Should the __layout load called earlier than Page load ?

[itssumitrai]

I want to bring out this point about load execution order & stuff flow
Lets say you have
index.svelte
__layout.svelte

When you hit /,
load function of index page gets called first and than __layout load function gets called.

While if you think your page as a hierarchy, Page is actually a child of __layout.
And even the stuff flow is from __layout to child components (including the Page component)

But the load execution flow is in opposite direction, its the page first & then the layout. This creates issues where you might want to leverage stuff for sharing any data, because if you set something in stuff in page, its not going to be available in __layout as the flow for stuff is opposite to execution flow.

This is probably not a big deal, but having the load execution flow follow the page flow (parent -> child) would be more intuitive ? And you can actually set things along the execution flow.

[vekunz]

Another interesting approach would be parallel execution. Remix (in the React world) does this for performance reasons in highly nested layout-and-page-structures. But I am not sure if there is any real-world scenario where this is really necessary (and not just fancy).

[Rich-Harris]

FWIW, props can be a promise rather than an object, so you can have something like this...

export function load({ params }) {
  return {
    props: fetch(`/stuff/${params.id}.json`).then(r => r.json()).then(stuff => ({
      stuff
    }))
  };
}

...and it will return (and move on to the next load) synchronously. We just don't do that by default because there are cases where the child load needs to wait for some async work in the parent.

[geoffrich]

What makes you say that the index load function is called first? If you have the following...

<!-- __layout.svelte -->
<script context="module">
	export function load() {
		console.log('layout load');
		return {};
	}

</script>

<main>
	<slot />
</main>

<!-- index.svelte -->
<script context="module">
	export function load() {
		console.log('page load');
		return {};
	}
</script>

<h1>Hello world</h1>

... and navigate to localhost:3000, the console will log the following:

layout load
page load

So the __layout load function is executed first, then the page. Do you have an example where that isn't happening?

This matches how the docs talk about stuff as being something that's passed from a layout to child nodes:

stuff is passed from layouts to descendant layouts and pages, and can be filled with anything else you need to make available. For the root __layout.svelte component, it is equal to {}, but if that component's load function returns an object with a stuff property, it will be available to subsequent load functions.

[itssumitrai]

execution

Wow, Thanks for pointing it out. My bad, you are right my log is actually inside the <script and not in load. That makes this entire thread invalid. Such a nooby mistake

[geoffrich]

No worries!