How can i prevent react suspense flashing of fallback spinner

[niklasgrewe]

Hi everyone

on my page i am using the useCurrentUser hook something like this:

const UpdateUserProfile = () => {
  const user = useCurrentUser()
  return <div>{user && !user.username ? <UpdateUserProfile /> : <p>My Page</p>}</div>
}

const MyPage: BlitzPage = () => {
  return (
    <Suspense fallback={<FullScreenLoader />}>
      <UpdateUserProfile />
    </Suspense>
  )
}

MyPage.suppressFirstRenderFlicker = true
MyPage.authenticate = true

export default MyPage

when the page loads, I see my <FullScreenLoader /> for one second. That the loading time is so low is of course great, but unfortunately the transition between loading screen and page content is broken by react suspense.

I have already read some stuff on stackoverflow about this. It seems that at the moment there is no direct Suspense API to play and stop animations in a controlled way, right? Are there other ways to make the transition a bit smoother?

Run again
and one more thing I noticed. Every time I reload the page the useCurrentUser() hook is executed. Is this not cached since it is a query? If so, why do I still see the fallback component, even if only shortly?

[flybayer]

unfortunately the transition between loading screen and page content is broken by react suspense.

Can you create a Loom video explaining and showing what the problem is?

[niklasgrewe]

here it is: https://www.loom.com/share/da733fcbc1c94995a37a0bf649a718b2

[flybayer]

Ok so what do you want to happen? I'm still not clear on exactly what part you don't like and what you want it to do instead.

[niklasgrewe]

I would wish that with such a short loading time, the Loading Indicator is not displayed at all. This jerky transition between loading indicator and page content is not really good from a UX point of view. Is there any way to improve this?

[flybayer]

Ok got it. In production it will be a longer load time, so test that. But the way to fix it is to use getServerSideProps instead of useQuery

[flybayer]

and one more thing I noticed. Every time I reload the page the useCurrentUser() hook is executed. Is this not cached since it is a query? If so, why do I still see the fallback component, even if only shortly?

React-query does not cache data between manual page refreshes, only during client-side navigations within the SPA. Although I think this is something they are looking to add in the future