التعديل على واجهة الloading إلى حين تحميل محتوى الصفحة

في ملف الـ app، قم بإضافة حالة بالاسم loading وتكون قيمتها true بالشكل الافتراضي:

const [loading, setLoading] = useState(true);

وقم بإنشاء useEffect وفي داخلها قم بتغيير الحالة loading إلى false :

useEffect(() => {
  setLoading(false)
}, []);

وقبل الـ return الخاصة بالـ app، قم بإضافة الكود التالي :

if(loading) return "loading..."

يمكنك استخدام useEffect(). هذه الخاصية تسمح لك بتنفيذ كود عند تحميل البيانات أو عند تحديث البيانات.

على سبيل المثال، لعرض spinner أثناء التحميل، يمكنك استخدام الكود التالي:

import React, { useState, useEffect } from "react";

function App() {
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // ابدأ تحميل البيانات
    // ...

    // بمجرد تحميل البيانات، اضبط حالة loading على false
    setLoading(false);
  }, []);

  return (
    <div>
      {loading ? (
        <Spinner />
      ) : (
        // اعرض المحتوى الرئيسي
        <MyContent />
      )}
    </div>
  );
}

const Spinner = () => (
  <div className="spinner">
    <div className="spinner-container">
      <div className="spinner-inner"></div>
    </div>
  </div>
);

const MyContent = () => (
  <div>
    // هذا هو المحتوى الرئيسي
  </div>
);

export default App;