Nested page loader indicator

[ivands]

Describe the problem

I have a page loader indicator on the root layout level. But I also have a page loader indicator on deeper layouts. The problem is that knowing when to show the correct page loader without Sveltekit giving some extra info is impossible. The navigating store only tells me the from and to URLs. But that doesn't tell me which layout is going to change. Or what loader is going to be called?

Describe the proposed solution

Maybe we could have a more local navigating store inside every layout / page? Or maybe a will-unload indicator that will let me know that a given layout / page is going to be replaced when the navigation is done. I'm also open to other solutions. Or if there are any existing ones.

Alternatives considered

No response

Importance

would make my life easier

Additional Information

No response

[teemingc]

I think this is solvable by creating your own global store and updating it whenever a layout loads or unloads. You can tell when a layout has unloaded using Svelte's onDestroy function or by returning a cleanup function from onMount.

• https://svelte.dev/docs/svelte#ondestroy
• https://svelte.dev/docs/svelte#onmount

[ivands]

@eltigerchino, The lifecycle functions like onDestroy & onMount can't help us because they don't fire when a navigation starts loading. It only fires when the navigation is done loading and it's time to switch the page UI. I think it would help if a layout file would also get something like a willReplaceChildren prop, that would be true when a navigation starts loading & will replace the layout page.