Flash of unstyled content after initial render

[terencechow]

After the initial render, clicking between routes has a flash of unstyled content. Your example repo is very basic, so it is hard to see, but if you open chrome dev tools and set the network to something extremely slow (i.e. I created a custom speed that is 1000ms, 1kb/s and 1kb/s), you can view the problem.

Steps to reproduce

1. Navigate to the landing page.
2. Go to your network tab in chrome dev tools and set the network speed to the super slow custom speed.
3. Click the dashboard page.

As the dashboard javascript loads, the page will turn white until the dashboard javascript has loaded and is displayed on screen.

In your simple example this is hard to notice and requires lowering the speed to something extremely low. However in a real world example where each page has a non insignificant amount of js, this flash of unstyled content is quite visible. For example, in my app, any additional route.js might be say 80kb. While the browser downloads the 80kb there is a quick flash of white before the page displays again. (This makes a SPA not like a SPA...)

At the moment I haven't found a solution to this. Either we download everything on the client under the splitPoints (which defeats the purpose of async code splitting), or we possibly use the <link preload> in the server side rendered html, hence causing preloading of other routes.

I'm leaning towards the second option, but even still, I have some 20 routes so preloading 80kb * 20 = 1.6 mb of data on any given page seems wrong.

Don't have a solution yet. Thoughts?

[newyork-anthonyng]

@terencechow I believe this flash of unstyled content issue that you're seeing isn't specific to the example in this repo. Do you think it's something that all SPA's that implement code-splitting face?

Two solutions I see are:

• Implement a loading screen for your component. Take a look at this example. Could you return a Loader component instead of null?
• Add <link preload> on routes that are most likely going to be navigated to. I imagine some user testing would need to be involved to decide what to preload.

What do you think?

[terencechow]

I know it's not related to this repo but it's a pretty crucial requirement for a ssr code-splitting boilerplate.

I'm on mobile right now so I can't check but I'm fairly certain preload isn't supported in anything but chrome iirc

A loading screen is the most likely solution but obviously some sorta prefetching ability is preferred

On 11 Aug 2017 12:22 am, "Anthony Ng" [email protected] wrote:

@terencechow https://github.com/terencechow I believe this flash of unstyled content issue that you're seeing isn't specific to the example in this repo. Do you think it's something that all SPA's that implement code-splitting face?

Two solutions I see are:

• Implement a loading screen for your component. Take a look at this example https://gist.github.com/acdlite/a68433004f9d6b4cbc83b5cc3990c194. Could you return a Loader component instead of null?
• Add on routes that are most likely going to be navigated to. I imagine some user testing would need to be involved to decide what to preload.

What do you think?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/emilecantin/ssr_code-splitting_sample/issues/5#issuecomment-321699259, or mute the thread https://github.com/notifications/unsubscribe-auth/AB2PfBo5mQxe07DhHRCLLuJz8rDPynXOks5sW5DCgaJpZM4OoPZC .