Site açılışına loading animasyonu eklemek

Merhabalar herkese.

Kendimi geliştirebilmek için reactjs kullanarak bir proje yazıyorum. Bazı kurumsal siteler açılışlarında sadece görsel amaçlı bir animasyon oynatıyorlar. Logolarını renklendirmek gibi. Keyframes kullanarak animasyonu oluşturuyorum.

Site açılırken örnek veriyorum animasyon 3 saniye sürsün. Ekranda sadece bu animasyonun görünmesini nasıl sağlarım?(tam ekran)

3 saniye sonra animasyonun kaybolmasını; navbar, header ve geri kalan kısımların görünür hale gelmesini nasıl sağlarım?

React ile bunu yapmak için kütüphaneler var. Örneğin;

Bu içeriği görüntülemek için üçüncü taraf çerezlerini yerleştirmek için izninize ihtiyacımız olacak.
Daha detaylı bilgi için, çerezler sayfamıza bakınız.

Üçüncü taraf çerezlerini kabul et

Istedigin sistemi useState ve useEffect hooklarini kullanarak asagidaki gibi bir ornek uzerinden gelistirebilirsin.

[CODE lang="javascript" title="Ornek.js"]const YukleniyorAnimasyonu = props => {
return (
<>
//Buraya animasyon icerigini yapistir.
</>
);
};

const Sayfa = props => {
const [yukleniyor, yukleniyorDurumunuDegistir] = useState(true);

useEffect(()=>{
setTimeout(()=>{
yukleniyorDurumunuDegistir(false);
}, 3000); // 3000 milisaniye = 3sn
}, []);

return (
{
yukleniyor ?
<YukleniyorAnimasyonu />
: <>
// buraya sayfanin gercek icerigini gir.
</>
}
);

};[/CODE]

@nullptr Peki; react için şöyle bir kısayol da var mı? json-serverdan bir takım kişi bilgileri çekip ekranda tablo şeklinde gösteriyorum. Bu tablodaki herhangi bir kişiye tıkladığımda sadece bu kişinin bilgilerini içeren hazır olmayan bir sayfa nasıl oluştururum?