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!

[apoorva-01]

The pending snippet on <svelte:boundary> only fires while there's no resolved content yet, so it covers the first load and then never again. Once the query has resolved once, a re-fetch on param change doesn't re-suspend the boundary, that's why you get nothing on page changes.

For the re-fetch indicator you want the query's own state instead of await. The query object has .loading, .current, and .error on it. .current keeps the last resolved value while .loading flips true during the re-fetch, which is exactly the "show the old page slightly dimmed with a spinner" UX you're after:

<script lang="ts">
  import { getPosts } from './data.remote.js';
  let { params } = $props();

  // store the query in a variable, don't inline it
  const posts = $derived(getPosts(params));
</script>

{#if posts.loading}
  <p>Refreshing…</p>
{/if}

{#if posts.error}
  <p>Failed: {posts.error.message}</p>
{:else}
  <ul>
    {#each posts.current ?? [] as post}
      <li>{post.title}</li>
    {/each}
  </ul>
{/if}

The one thing that'll bite you: assign the query to a variable first (const posts = $derived(...)) and read posts.loading off that. If you inline it as getPosts(params).loading the .loading won't track reactively. That's a known issue (#14915), and it looks exactly like "the loading state does nothing," so it's an easy hour to lose.

Trade-off worth knowing: await is what gives you the clean SSR + boundary story, and the .loading/.current form is what gives you granular per-refetch state. For pagination where you want feedback on every page change, the property form is the one you want.