With back-forward cache, SvelteKit docs get stuck in loading state after going back

[ivan]

Describe the bug

The SPA navigation in the SvelteKit documentation reliably gets stuck in the loading state when going back from another page, if the browser has a back-forward cache. I have reproduced this issue with a new Chrome 103.0.5060.114 profile (no extensions) and also on iOS Safari 15.5.

Reproduction

1. Visit https://kit.svelte.dev/docs/introduction
2. Click the 'Visual Studio Code (aka VS Code)' link
3. Go back
4. Observe that https://kit.svelte.dev/docs/introduction is now stuck in the 'loading' state (top orange bar) and grayed-out page after a few seconds

If this does not repro, you may need to restart a new-profile Chrome a few times for it to enable the back/forward cache by default. This issue does not reproduce if 'Back-forward cache' is explicitly disabled in chrome://flags/.

Logs

There doesn't appear to be anything in the DevTools Console or Network tabs

System Info

Chrome 103.0.5060.114 on Windows 10 21H2

iOS Safari 15.5 on iPhone 11

Severity

annoyance

Additional Information

I have not tested whether this affects SvelteKit in general

[dummdidumm]

Reproducible when setting the flag to force-cache everything.

The problem is that the navigation is started but never finished in the eyes of the SvelteKit application - Chrome simply restores the whole thing. According to this web.dev article we can find out if this is a bfcache navigation by listening to the pageshow event and reset the navigation store in that case. We could also reset the store upon unloading. Either way, this might result in flickering as the navigating store is in the wrong state for a very short time. I think the bfcache solution (flickering upon going back) is better for now since this case happens less often compared to leaving a page.