Background Fetching Indicators

A query's status === 'loading' state is sufficient enough to show the initial hard-loading state for a query, but sometimes you may want to display an additional indicator that a query is refetching in the background. To do this, queries also supply you with an isFetching boolean that you can use to show that it's in a fetching state, regardless of the state of the status variable:

1 <script>
2   import { useQuery } from '@sveltestack/svelte-query';
3 
4   const queryResult = useQuery('todos', fetchTodos)
5 </script>
6 
7 {#if $queryResult.status === 'loading'}
8   <span>Loading...</span>
9 {:else if $queryResult.status === 'error'}
10   <span>Error: {$queryResult.error.message}</span>
11 {:else}
12   {#if $queryResult.isFetching}
13     <div>Refreshing...</div>
14   {/if}
15   {#each $queryResult.data as todo}
16     <Todo {todo} />
17   {/each}
18 {/if}

Displaying Global Background Fetching Loading State

In addition to individual query loading states, if you would like to show a global loading indicator when any queries are fetching (including in the background), you can use the useIsFetching hook:

1 <script>
2   import { useIsFetching } from '@sveltestack/svelte-query'
3 
4   const isFetching = useIsFetching()
5 </script>
6 
7 {#if $isFetching}
8   <div>Queries are fetching in the background...</div>
9 {/if}