0

I am making a website with React and it has client-side rendering. I want the page to be fully loaded with the fonts and the images properly on the page (and also inside the components used in the page) before the page is even displayed to the client to see. However, currently my page will e.g. show the unformatted Times New Roman font and some partially loaded images that will slowly load to form the full image. I am wondering if there is some simple function surrounding my router that can show a loading page unless all these stuff are properly loaded.

I use React functional component (so no class) and I don't prefer adding a useEffect in every single component to check if they are loaded if possible.

Sample code will be very helpful! Thank you :D

Chloe
  • 3
  • 4

1 Answers1

0

You can use <Suspense> that can display a loading animation until children have finished loading.

React Docs

Shashikant Yadav - Kantbtrue
  • 808
  • 6
  • 12
  • mmm it doesn't seem to work well - a loading page is shown but after the page is loaded the fonts and the images are still not fully loaded for some reason – Chloe Jul 22 '23 at 23:12
  • const Page= lazy(() => import("./pages/main/Page")); fyi I wrap suspense to the Page component – Chloe Jul 22 '23 at 23:12