TanStackT
TanStack•16mo ago•
4 replies
progressive-amaranth

Sync loader always causes pending component to show?

Our loader does preloading of an apollo query which is separately fetched in the component using 
useQuery()
 (so we get reactive data but also start fetching the data as soon as possible).

We handle loading state of the actual route using skeletons, so we want to get it mounted as soon as possible. We observe that merely having the loader(): void defined always causes the throbber to load, even though we return no value and the loader is not async.

  // commenting out this code makes the pendingComponent not shown, as expected
  loader: ({ params, context }): void => {
    const state = context.store.getState()
    const market = accountSelectors.market(state)
    context.apollo.queryTtl({
      query: OurQueryDoc,
      variables: {
        playlistId: params.musicId,
        market,
      },
    })
  },


We have defaultPendingMs: 300 and defaultPendingMinMs: 400 and even set pendingMs: 1000 on the relevant component, yet still the pending component is rendered.

If we comment out the loader() definition no pending component is shown.

Is this expected behaviour? Is there some config setting we've forgotten to set?
Was this page helpful?