Flash of unstyled content when loading pages

[JasonWeill]

In Notebook 7.0.0a17, I am seeing a brief flash of unstyled content when loading pages.

This was found by @ellisonbg during a bug bash.

[andrii-i]

Could you please record the video or describe the steps to reproduce the problem? @krassowski mentions that JupyterLab shows loading Jupyter logo animation until styles are fully loaded. We should check if problem has to do with that and potentially use the same solution.

[krassowski]

Specifically one would need to implement a SplashScreen token - this is an optional token used by theme manager to update splash screen once the CSS of themes has fully loaded.

[jtpio]

For reference the splash screen was deliberately not added to RetroLab / Notebook 7 to make notebooks and other pages open like regular page (and not like an "application").

[JasonWeill]

Example of this happening in tip-of-main for Jupyter notebook:

Screen.Recording.2023-05-30.at.2.59.51.PM.mov

Screen capture with a flash of unstyled text (FOUT):

[jtpio]

This might also happen when switching themes.

Specifically one would need to implement a SplashScreen token - this is an optional token used by theme manager to update splash screen once the CSS of themes has fully loaded.

Maybe one way to mitigate this would be to provide a ISplashScreen in Notebook 7. But instead of having the animation like in JupyterLab, maybe a blank overlay which would then be removed when the application is ready?

[andrii-i]

Thank you @JasonWeill

[jtpio]

Given that the splash screen is optional, maybe that's something that could be fixed in JupyterLab directly.

Looking at the code the previous theme is first unloaded here:

https://github.com/jupyterlab/jupyterlab/blob/e0b4de1eb37c9dd37c11e5319ed00cb8d37b8d92/packages/apputils/src/thememanager.ts#L405-L410

And then the new theme is loaded here by calling its load() method to bring the new CSS: https://github.com/jupyterlab/jupyterlab/blob/e0b4de1eb37c9dd37c11e5319ed00cb8d37b8d92/packages/apputils/src/thememanager.ts#L423

In JupyterLab this is "hidden" by the splash screen so it's not visible by default. But if we disable the plugin that provides the splash screen with jupyter labextension disable @jupyterlab/apputils-extension:splash then we can also notice the flash of unstyled content:

splash-screen-disabled.mp4