In SvelteKit I'm trying to set up a traditional paginated table and disable the pagination controls while loading a new page. I'm doing something like the following:
<script lang="ts">
export let data: PageData
let limit = 5
let offset = 0
$: query = createQuery({
queryKey: ['query', limit, offset],
queryFn: async () => await trpc($page).example.query({limit, offset}),
initialData: data.example,
keepPreviousData: true
})
</script>
<Table data={$query.data} />
{#if $query.isRefetching}
<LoadingSpinner />
{:else}
<PaginationControls {limit} {offset} total={data.total}/>
{/if}
Without the if $query.isRefetching everything works fine but once I add this check the loading spinner is always shown. When I first load the page the pagination controls show for a split second but then the loading spinner comes back. Am I misunderstanding how isRefetching works?