How to show loading state when remote function re-fetches on URL param change

[davidbaranek]

Hi! I’m learning SvelteKit and remote functions, and I can’t figure out this problem:

Context: I’m building a simple list of posts with pagination. The current page is stored in the URL as search params. I get the params using useSearchParams from the Runed library and pass them into the remote function. The remote function is wrapped in $derived, so whenever the params update, the remote function re-fetches the data. Also I am using await as it is recommended in the docs and required (If I understand it right) for SSR to work. Also it is cleaner as I don't need to write if branches everywhere and use <svelte:boundary>. Here is relevant code:

// +page.svelte
<script>
    import Data from "./Data.svelte";
</script>

<svelte:boundary>
    <Data />

    {#snippet pending()}
        <div>
            <p>Initial loading provided by boundary</p>
        </div>
    {/snippet}

    {#snippet failed(error, reset)}
        <h2>Error</h2>
        <p>{error}</p>
        <button onclick={reset}>Oops! try again</button>
    {/snippet}
</svelte:boundary>

// Data.svelte
<script lang="ts">
    import { useSearchParams } from "runed/kit";
    import { navigating } from "$app/state";
    import * as z from "zod";
    import { getPosts } from "$lib/data.remote";
    import Pagination from "./Pagination.svelte";

    const GetPostsQuery = z.object({
        page: z.coerce.number<number>().int().min(1).default(1),
        limit: z.coerce.number<number>().int().min(1).max(100).default(5),
    });

    const params = useSearchParams(GetPostsQuery);
    const page = $derived(params.page);
    const limit = $derived(params.limit);

    const posts = $derived(getPosts({ page, limit }));
    const { pagination, data } = $derived(await posts);
</script>

<div>
    <h2>Debug info</h2>
    <p>Current page: {params.page}</p>
    <p>Current limit: {limit}</p>
    <p>Remote function loading: {posts.loading}</p>
    <p>Navigating to: {navigating.to}</p>
</div>

<div class="">
    <h2>Posts</h2>
    <p>
        <strong>Loading (this should be indicator of refetching)?</strong>
        {posts.loading}
    </p>
    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>Title</th>
                <th>Date</th>
            </tr>
        </thead>
        <tbody>
            {#each data as post (post.id)}
                <tr>
                    <td>{post.id}</td>
                    <td>{post.title}</td>
                    <td>{post.date}</td>
                </tr>
            {/each}
        </tbody>
    </table>
</div>

<Pagination
    bind:page={params.page}
    bind:limit={params.limit}
    totalPages={pagination.totalPages}
    loading={posts.loading}
/>

Problem: During the refetch I want to show a loading indicator to the user. I tried using the pending block inside <svelte:boundary>, but that only works on the initial load (as stated in the docs). I also tried checking remoteFunction().loading, but that doesn’t work either because it stays false even while the data is being fetched. Only time it .loading works is, when not using await at all and only use .loading .error .current notation. But then I cannot get the advantages of using await form: SSR (if I don't use pending snippet), pending snippet and that I have old data until the refetch is resolved (which is very useful), while with .current, data gets replaced with undefined until the refetch is resolved.

Question: What is the correct way to indicate that a remote function is refetching when the URL search parameters change? Ideally using await form? I just want to show some indicator and deactivate pagination buttons to not cause confusion for the user.

Here is demo repo: https://github.com/davidbaranek/sveltekit-demo

Sorry if this has already been answered, but I wasn’t able to find anything useful. Thanks for any advice!