load function on next page/route fired before onDestroy lifecycle hook on old(the route before)

[PH4NTOMiki]

Describe the bug

I'm using SvelteKit and I want to save some information on the index route that is going to be useful in the load function of another route, and I wanted to save that but when I tried to save it from onDestroy, that onDestroy it turns out runs after the load function which doesn't make much sense.

Reproduction

Will be added soon if needed, but this is sum up:

src/routes/index.svelte:

<script context="module">
// irrelevant load function
</script>
<script>
import {onDestroy} from 'svelte';
import myStore from '$lib/mystore';

export let posts;

onDestroy(()=>{
    console.log('before navigation');
    myStore = [...posts];
});

</script>

src/routes/[slug].svelte:

<script context="module">
import myStore from '$lib/mystore';
import {browser} from '$app/env';

export async function load({page, fetch}){
    if(browser){
        console.log('after navigation');
        return {props:{posts: [...myStore]}};
    }
}
</script>
<script>
// some irrelevant code
</script>

Logs

This code logs:
after navigation
before navigation


expected:
before navigation
after navigation

System Info

System:
    OS: Linux 5.13 Manjaro Linux
    CPU: (8) x64 Intel(R) Core(TM) i5-8265U CPU @ 1.60GHz
    Memory: 2.79 GB / 7.65 GB
    Container: Yes
    Shell: 5.1.12 - /bin/bash
  Binaries:
    Node: 17.2.0 - /usr/local/bin/node
    npm: 8.1.4 - /usr/bin/npm
  Browsers:
    Chromium: 96.0.4664.93
    Firefox: 95.0.1
  npmPackages:
    @sveltejs/adapter-node: next => 1.0.0-next.55 
    @sveltejs/kit: ^1.0.0-next.202 => 1.0.0-next.202 
    svelte: ^3.44.3 => 3.44.3

Severity

blocking an upgrade

Additional Information

No response

[babichjacob]

It makes sense because the new page isn't created in place of the current one until it has loaded data. For that reason, the current page isn't destroyed until after load finishes running.

[Conduitry]

You probably want an onNavigate lifecycle function, which there are other issues for.

As @babichjacob mentioned, we need to run load first because, until it runs, we don't know what pages/components we're going to be rendering, and we don't want to have an interval where there's nothing on the screen.

[babichjacob]

@PH4NTOMiki you can find that being tracked here: #560

[PH4NTOMiki]

I solved my problem, so this is what I did:
in src/routes/index.svelte:

import myStore from '$lib/mystore';
import {onMount} from 'svelte';

onMount(() => {
    window.addEventListener('sveltekit:navigation-start', () => {
        console.log('before navigation');
        myStore = [...posts];
    }, {once: true});
});

and the [slug].svelte stays the same

and I get:
before navigation
after navigation

like I expected