Router changes the URL prematurely

[ebeloded]

Describe the bug

When using links within the SvelteKit app, the URL gets updated immediately, even though the underlying page is still loading. In this simple demonstration the second-page loads for 1s, but the URL is updated a immediately:

This is unconventional and results in asynchrony between the URL and the page content.

For contrast, here is what happens when clicking on the second link with rel="external", which triggers normal browser behavior:

Here you can see that both the URL and the page change at the same time. The page represents the URL at every moment. This behavior and universal across browsers.

SvelteKit mimicks browser behavior with History API. To do it correctly, the URL needs to be changed after the page is loaded.

Reproduction

Stackblitz
Source Code

Logs

No response

System Info

-

Severity

annoyance

Additional Information

No response

[harshmandan]

Can confirm it happens with me as well.
Edit: For some reason the URL does not change in stackBlitz but it does when visited the URL directly.
Edit 2: You need to open stackBlitz first, then copy and paste URL to open in a new tab.

[Rich-Harris]

Explanation of why the current behaviour is intentional: #2917 (comment)

[ebeloded]

Given the split in opinions regarding the URL change behavior, could this be added as a configuration option?

[rmunn]

Explanation of why the current behaviour is intentional: #2917 (comment)

But since the browser's built-in behavior is the opposite (see second GIF in #2870 (comment)), IMHO it should be the other way around, with the URL not updating until after load() completes. There's also the fact that the current behavior is causing #2945, and may be causing other issues as well.

[benmccann]

I wonder, if we did want to mirror the browser behavior, if the most analogous place to update the url would be in between the network fetch and dom rendering, which I think would be here:

kit/packages/kit/src/runtime/client/renderer.js

Line 442 in 943835f

for (let i = 0; i < filtered.length; i += 1) {

[Rich-Harris]

Did a reverse ferret on this — pushState is now deferred until navigation completes: #4070