كيف أضيف Loader في react js

إن كنت تقصد Loader  اثناء تحميل البيانات فيمكنك عرض الـ gif باستخدام شرط مثل :

{!data && <span>loader</span>}

حيث ان السطر السابق يترجم إلى (إذا لم يكن هنالك data قم بعرض العنصر).

والمتغير data هنا هو عبارة عن الـ state التي تخزن فيها البيانات بعد احضارها من السيرفر.

وتجعلها null قبل احضار البيانات وبعد احضار البيانات تحفظ البيانات في الـ state المسماة data.

-------

اما إذا كنت تقصد الـ loader التي تظهر بين الصفحات فيمكنك تنفيذها بنفس الطريقة ولكن تغيير الـ state إلى true من داخل الـ useEffect :

const [showLoader, setShowLoader] = useState(true);
useEffect(() => {    
	setShowLoader(false)
},[]);

return(
  <div>
       	{showLoader && <span>loader</span>    	
  </div>
)