How to show a skeleton for slow connections?

[LetrixZ]

I want to show a skeleton or a loading message whenever a user navigates to a next page in a paginated list.
The +page.server.ts load function takes less than 100ms to run but the data transfer can be long, and in these situations, I would like to show a skeleton.

I already have this in +page.server.ts:

export const load = async ({ url, cookies, isDataRequest }) => {
    const { ids, total } = await search(url.searchParams);
    const archives = await libraryItems(ids);

    const library = new Promise<{ archives: ArchiveListItem[]; limit: number; total: number }>((r) =>
        r({ archives, limit: 24, total })
    );

    return {
        library: isDataRequest ? library : await library,
    };
};

And in +page.svelte:

{#await data.library}
    <Skeleton />
{:then library}
    <List {library} />
{/await}

Using Dev Tools, I throttle my connection but I never see the skeleton, only the contents from the previous page.
Then, when the __data.json load finishes, the skeleton flashes for a moment and finally the new content is displayed.

Using Bun, this happens in dev and production modes.

If I use Bun.sleep(1000).then(\*data*\) the skeleton appears for a second but only in production mode using either Bun or NodeJS adapters on a new project.
In dev mode, the same behavior as before will play out.

[brunnerh]

What version of SvelteKit are you using?
Top level promises are awaited before version 2.

In SvelteKit version 1, if the top-level properties of the object returned from a load function were promises, they were automatically awaited. With the introduction of streaming this behavior became a bit awkward as it forces you to nest your streamed data one level deep.

As of version 2, SvelteKit no longer differentiates between top-level and non-top-level promises. To get back the blocking behavior, use await (with Promise.all to prevent waterfalls, where appropriate):

[LetrixZ]

The latest version.
Displaying a skeleton during streaming only works if the data takes a long time to fetch on the server, not on the client.

I'll make a video to show it.

[brunnerh]

You are awaiting everything that matters on the server, the library promise does nothing.
SvelteKit will probably not stream anything like this, try removing await where the data is being requested or wrap everything in a single promise that is conditionally awaited.

[LetrixZ]

I'll try but it only takes less than 100ms to resolve, while the transfer takes at least 1 second.

[LetrixZ]

Here is the behavior that I'm seeing. I expect that once I press the pagination button, the skeleton shows and not when the response arrives.

new_Screen.Recording.2024-09-24.at.12.52.09.mov.mp4

The code:

export const load = async ({ url, cookies, locals, isDataRequest }) => {
	const library = new Promise<{
		archives: ArchiveListItem[];
		limit: number;
		total: number;
	}>((r) => {
		search(url.searchParams, !!locals.user?.admin).then(({ ids, total }) => {
			libraryItems(ids).then((archives) => r({ archives, limit: 24, total }));
		});
	});

	return { library: isDataRequest ? library : await library };
};

Probably I need to solve this by manually triggering the skeleton.