sacred-rose

Best place to hide splash screen in SPA

I'm building a SPA where we have a so called splash screen that is shown while the JS bundle is being downloaded > app rendered > auth status checked > and finally initial data loaded. So my question is what is the best place to hide this splash screen (by calling our

hideSplashScreen

hideSplashScreen

method)? We are using Suspense to load data with Apollo Client and we have a pending spinner component configured for routes that is shown after the initial load on subsequent navigations. My goal is to avoid showing the spinner after the splash screen has been hidden, meaning that on the initial load I want to keep showing the splash screen as long as all the data has been fetched (it's all fetched at the loader level so there are no waterfalls). I used to have a hacky solution where I hid the splash screen in the global pending component's

useEffect

useEffect

return callback but that doesn't seem to work with the latest router version (1.131.50) - I suspect that the pending component is never rendered anymore if the data loads quickly enough. Now I moved the hiding to the root route's

onEnter

onEnter

handler but that doesn't seem to wait for the pending components to be hidden in case they are shown due to slow data fetching. So any ideas how to achieve this kind of splash screen behaviour?

TanStack•6mo ago

sacred-rose

Best place to hide splash screen in SPA

hideSplashScreen

hideSplashScreen

useEffect

useEffect

onEnter

onEnter

handler but that doesn't seem to wait for the pending components to be hidden in case they are shown due to slow data fetching. So any ideas how to achieve this kind of splash screen behaviour?

Best place to hide splash screen in SPA

Similar Threads

Best place to hide splash screen in SPA

Similar Threads

Similar Threads

Similar Threads