Improvement: Rework the static initialisation through Flags #39
Description
There are some things that help the app start without flashes of content:
- Is it dark mode? Less flashing of the map when loading, anything that relies on DarkMode (not many things do; it's in the cascade from the root)
- Has the user interacted with the app? Then we don't need to show the pitch. Currently, we flash the pitch if the user has not interacted, which I find a bit distracting.
The main dilemma here:
Not waiting for (localstorage, indexedDB) allows us to paint faster. How fast or slow are those? IndexedDB being asynchronous could be used to unblock paint, but the flashes seem worse, maybe? Furthermore, can we synchronously set dark mode on the page? Currently we get a flash from light to dark on load.
One approach to dark mode:
- Synchronously store user preferences in localstorage
- Get that inline in the
<head>, using the user preferences
The downside to that is blocking the parser, leading to a slower first paint.
A more modest approach:
- Use an a media-query to pick initial light/dark mode
- Give higher priority to
.light-mode/.dark-mode
The assumption there is that if the user has light/dark mode, then it is more likely to sync with their preference.
Either way, I think we should be handling at least the userHasInteractedWithApp in the initialisation!