SvelteKit and hybrid fetching

[nerodono]

Suppose I have route which needs data from some external API.

// profiles/[sel]/+page.ts

import type { PageLoad } from './$types';

import { API } from "$lib/api/impl.ts";

function transformSelector(sel: string): { id: string } | { nickname: string } {
    if (sel.startsWith("@")) {
        return { nickname: sel.slice(1) };
    } else {
        return { id: sel };
    }
}

export const load: PageLoad = async ({ params, data }) => {
    const selector = params.sel == "me" ? null : transformSelector(params.sel);
    const session = data.session;

    return { response: API.makeRequest({
        request: "users::get",
        data: { selector },
        session,
    }) };
};

// profiles/[sel]/+page.server.ts

export const load: PageServerLoad = async ({ cookies }) => {
	return { session: getAuthToken(serverOnlyCookies(cookies)) };
};

And +page.svelte:

<script lang="ts">
    import type { PageProps } from './$types';
    import Profile from "$lib/components/profile.svelte";

    let { data }: PageProps = $props();
    let response = $derived(data.response);
</script>

<!-- dummy code for demonstration, this is CSR-only fetching -->
<svelte:boundary>
        <p>{(await response).ok.user.display_name}</p>

        {#snippet pending()}
                <p>Loading...</p>
        {/snippet}
</svelte:boundary>

In short, desired behavior is:

1. When user first visits website, for example, /profiles/@testuser, the page must NOT display Loading..., data must be instantly available in the returned HTML, so crawlers could see it, e.g. using opengraph protocol like this:
   
2. On subsequent navigation, data should be fetched on the client-side, showing user some kind of loading indication (skeleton of target page with shimmer animation, for example)

How can I achieve this?

Approaches I tried

1. Using <svelte:boundary> with pending snippet - pending snippet makes fetching purely CSR, so data wouldn't be available in returned HTML instantly.
2. using {#await} blocks - same, data isn't in returned HTML instantly.
3. Writing this function and wrapping API.makeRequest in it inside the universal load function:

export async function ready<T>(v: T): Promise<T> {
    return v;
}

export async function sleep(ms: number): Promise<void> {
    await new Promise(r => setTimeout(r, ms));
}

async function slowdown<T>(ms: number, promise: Promise<T>): Promise<T> {
    await sleep(ms);
    return await promise;
}

export async function hybrid<T>(f: () => Promise<T>): Promise<Promise<T>> {
    if (browser) {
        // Artificially slowdown loading in CSR to see if this approach will actually work.
        return slowdown(5000, f());
    } else {
        return ready(await f());
    }
}

// +page.ts

export const load: PageLoad = async ({ params, data }) => {
    const selector = params.sel == "me" ? null : transformSelector(params.sel);
    const session = data.session;

    const response = await hybrid(() => API.makeRequest({
        request: "users::get",
        data: { selector },
        session,
    }));

    return { response };
};

Still, it acts like it's rendered only on SSR. Additionally, when I add logging in it like this:

async function slowdown<T>(ms: number, promise: Promise<T>): Promise<T> {
    console.debug("client()");
    await sleep(ms);
    return await promise;
}

export async function hybrid<T>(f: () => Promise<T>): Promise<Promise<T>> {
    if (browser) {
        // Artificially slowdown loading in CSR to see if this approach will actually work.
        return slowdown(5000, f());
    } else {
        console.debug("server()");
        return ready(await f());
    }
}

Console in browser logs client() and my terminal logs server(), so it looks like sveltekit FIRST executes fetch on the server, waits, and THEN calls fetch on the client.
4. Calling await inside the load function - works well, CSR and SSR as expected, but there's no way to animate the process of loading the data, especially with individual skeletons for pages, so user don't see that fetching IS in progress and page isn't just lagging