Add `pending` to `query` functions

[vladshcherbin]

Describe the problem

Similar to #14080 but for query functions.

Would be nice to have pending state of a query in script while it's resolved somewhere deep in the template.

Describe the proposed solution

<script lang="ts">
  import { getTags } from '$lib/remote/get-tags.remote.ts'

  const buttonDisabled = $derived(getTags.pending)
</script>

Alternatives considered

No response

Importance

would make my life easier

Additional Information

No response

[dummdidumm]

A loading property already exists, it's scoped to the specific arguments of the query though. Would that already be enough?

const loading = $derived(myQuery().loading)

[vladshcherbin]

@dummdidumm I've tried with loading but didn't figure out how to pass it outside.

For #snippet pending() to work (basically load just client-side) I need to wrap this component with <svelte:boundary> and loading will be trapped inside.

This is the example I'm trying to make but haven't figured out how:

<script lang="ts">
  import { getTags } from '$lib/remote/get-tags.remote.ts'

  // somehow get loading state of the query
  const buttonDisabled = $derived(getTags.pending)
</script>

<button disabled={buttonDisabled}>
  <svelte:boundary>
    {@const tags = await getTags()}

    {#snippet pending()}
      <span>Loading tags...</span>
    {/snippet}

    <span>There are {tags.length} tags</span>
  </svelte:boundary>
</button>

Maybe you can give me a hint if it's even possible with current remote query functionality

[vladshcherbin]

loading property also seems to be buggy for me with <svelte:boundary>

Query inside seems to not be ready and shows loading state after #pending().

<script lang="ts">
  import Inside from './inside.svelte'
</script>

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

    <Inside />
  </svelte:boundary>
</button>

Inside with loading

• shows ...
• then loading
• then data

<script lang="ts">
  import { getTags } from '$lib/remote/get-tags.remote.ts'

  const query = getTags()
</script>

{#if query.loading}
  <p>loading</p>
{:else}
  <p>{query.current!.length}</p>
{/if}

Screen.Recording.2025-11-07.at.14.10.46.mov

Inside with await

• shows ...
• then data

<script lang="ts">
  import { getTags } from '$lib/remote/get-tags.remote.ts'

  const tags = await getTags()
</script>

<p>{tags.length}</p>

Screen.Recording.2025-11-07.at.14.13.00.mov

[vladshcherbin]

Related: sveltejs/svelte#17011, sveltejs/svelte#17083