`beforeNavigate` `complete` promise doesn't resolve after async work

[Tyler-Petrov]

Describe the bug

When a page is navigated to (via client side navigation) and the page has async data fetching, the event.complete promise resolution doesn't wait till the async work is done. onNavigate has the same problem.

This problem also affects page scroll after navigation. The window scrolls to the top then the new page is mounted once the async work is done.

Reproduction

+layout.svelte

<script lang="ts">
    import type { LayoutProps } from "./$types";
    import { beforeNavigate } from "$app/navigation";

    let { children }: LayoutProps = $props();

    beforeNavigate(async (e) => {
        event.complete.finally(() => {
            console.log('navigation finished')
        });
    });
</script>

{@render children()}

<script lang="ts">
    await new Promise((resolve) => setTimeout(resolve, 1000));
</script>
Slow page

Logs

System Info

System:
    OS: Linux 6.6 Arch Linux
    CPU: (16) x64 Intel(R) Core(TM) i9-9900K CPU @ 3.60GHz
    Memory: 8.41 GB / 15.57 GB
    Container: Yes
    Shell: 5.2.37 - /usr/bin/bash
  Binaries:
    Node: 22.17.0 - /home/tpetrov/.nvm/versions/node/v22.17.0/bin/node
    npm: 10.9.2 - /home/tpetrov/.nvm/versions/node/v22.17.0/bin/npm
    pnpm: 10.19.0 - /home/tpetrov/.local/share/pnpm/pnpm
  npmPackages:
    @sveltejs/adapter-auto: ^6.1.1 => 6.1.1 
    @sveltejs/adapter-vercel: ^5.10.3 => 5.10.3 
    @sveltejs/kit: ^2.46.4 => 2.46.4 
    @sveltejs/vite-plugin-svelte: ^5.1.1 => 5.1.1 
    svelte: ^5.39.11 => 5.39.11 
    vite: ^6.3.6 => 6.3.6

Severity

serious, but I can work around it

Additional Information

No response