Best place to hide splash screen in SPA
Hi 👋🏻 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 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 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 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? 🙂0 Replies