-1

My question has to do with all of the react applications i have created always end up flashing a blank page just for a split second before showing all the content. If I view the renders using lighthouse for example I can clearly see how the first 1-3 renders or so are just blank white pages. However I notice that all the pages build upon react that I find online does not flash on refresh and when viewing the renders on lighthouse you can see that the first renders have content on them. I'm wondering if I'm missing something or what I should do to fix this. Thanks.

Tobias Ulander
  • 3
  • 2

2 Answers2

0

Maybe you can apply loaders like this one https://mhnpd.github.io/react-loader-spinner/docs/components/progress-bar

The logic is like this, as long as the React is not ready yet you can call the spinner / loader function. Then when React is ready you just output everything that is rendered.

Here's a question that tackles it React - Display loading screen while DOM is rendering?

Cary Bondoc
  • 2,923
  • 4
  • 37
  • 60
0

Probably you are fetching some data asynchronously somewhere high up in the component tree and you are returning null until it arrives.

There's not much you can do about that other than considering not returning null and showing some loading state. Or you could use NextJS or Remix or something which has server-side rendering of the React components before your JS even loads on the browser side. The reason you don't see it on other sites will be:

  • They don't need to fetch any data over the API.
  • They do fetch data, but their API is faster than yours.
  • They inject whatever the data is needed to load the page into the HTML on the server side and then the JS app collects it from their. This is often a useful trick.
  • They are using something like NextJS -- which pre-renders the content on the server first.
  • They have moved their loading states to be scoped to the components that require the data, instead of blocking the whole app. Not always possible if its checking auth or something since that's a global thing.

I assure you though there will be plenty of apps that also do have this problem. It's one of the downsides to single page apps.

halfer
  • 19,824
  • 17
  • 99
  • 186
adsy
  • 8,531
  • 2
  • 20
  • 31
  • So this is just one of the downsides of using create-react-app i guess? Because even if I just have a default app directly out of the box I still run into the problem. Well thank you for answering it will help me going forward! – Tobias Ulander Sep 10 '22 at 23:39
  • Ah -- so that might be because youre in dev mode and also have strict mode on. In dev it does render components twice in that case https://stackoverflow.com/questions/61254372/my-react-component-is-rendering-twice-because-of-strict-mode – adsy Sep 10 '22 at 23:41
  • Well even in production the same happens. I could share a project and you could take a quick look but like you said, its probably just a downside to create-react-app. – Tobias Ulander Sep 11 '22 at 00:01