option to render layout before page is loaded

Describe the problem

When building application-like websites, users expect instant feedback when changing pages, even if the page’s content isn’t ready yet. It’s confusing to a user when they click a button and nothing happens, then a second later the page changes. Loading indicators help but are still not ideal.

Describe the proposed solution

Provide an option that will allow a +layout.svelte file to be rendered before the +page.svelte is ready. For example, say clicking a button opens up a page that is a modal. We place the markup for the modal inside the +layout.svelte file and the content inside the +page.svelte file. As soon as the user clicks, we can render an empty modal. Then once the page is ready, the content will appear. While the page is loading, we can utilize the slot default as a loading page or skeleton UI.

<script>
	// declare that this layout will be rendered to the DOM before the page is loaded
	export const optimistic = true;
</script>

<div class="modal">
	<slot>
		<p>skeleton ui or loading indicator</p>
	</slot>
</div>

Alternatives considered

• Using #await block so that surrounding markup is not dependent on data: This destroys SSR and sveltekit’s entire data model.
• Having a dedicated +loading.svelte file: Seems like unnecessary complexity when it can be done without it. If for some reason someone requires separate default and placeholder page contents they can always use the $navigating store to switch between them.

Importance

would make my life easier

Additional Information

• If the +layout.svelte also relies on data we can still render it as soon as its own data is ready.
• This probably shouldn’t affect SSR in any way. When we render on the server, we probably want to wait until the entire page is loaded before responding to the client. If we didn’t, it would defeat the purpose of SSR in the first place.
• As far as I know, this doesn’t break any existing functionality.

[dummdidumm]

The problem is that you can use $page.data anywhere on the page and if you access data from the page in a layout that would break. Something like +loading.svelte seems like a safer, more consistent solution to me.

[sw-yx]

will point out that nextjs (which people will invariably compare sveltekit to) has loading.js https://app-dir.vercel.app/loading

it appears to be the only major feature we lack in comparison