Buggy navigation-related stores reactivity

Describe the bug

Using page and navigating when the pages use async deriveds is bugged, it's very easy to end up with bugged pages/outdated classes on element and sometimes multiple pages get rendered at once.

Reproduction

SvelteLab

Simply play with the example by quickly clicking many routes during the loading, you will mostly encounter bugs like showing red background on a different route than the one that gets navigated to and sometimes I can see the content of two routes at the same time. I've tried many different scenarios combining $state.eager, avoiding navigating store and whatnot and in the end every solution does offer different results.

What I would like is to make the red background always show on the currently navigating to route and do not see two route's content at the same time.

Logs

N/A

System Info

N/A

Severity

annoyance

Additional Information

Example uses data-sveltekit-preload-data="off" and ssr disabled

Start with the linked SvelteLab reproduction and its routes, especially +layout.svelte, +layout.js, the three route pages, Link.svelte, and the navigation-related page and navigating stores. Reproduce the issue by clicking routes quickly while async deriveds load, then trace how pending navigation state and rendered route content are coordinated. Done means the red background tracks the destination route and two routes are never shown together.