T
TanStack•11mo ago
correct-apricot

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,
      },
    })
  },
  // 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?
4 Replies
robust-apricot
robust-apricot•11mo ago
out of curiosity, if you make your loader async (with no awaits) does this still happen?
correct-apricot
correct-apricotOP•11mo ago
Yes it still happens when I make the loader async (without returning anything), or if I return a Promise.resolve() The contents of the loader() don't seem to matter, commenting out all fetching logic makes no difference.
optimistic-gold
optimistic-gold•11mo ago
can you please create a minimal complete example?
correct-apricot
correct-apricotOP•11mo ago
Found the issue, it was that we set pendingMs: 0 on the __root route and we had some asynchronous logic there, which caused every subsequent route to always flash the pendingComponent if it defined a loader. (We set this together with defining pendingMinMs:0 on the root route because without it a spinner was always shown for that amount of time). Removing pendingMs from the root route solved the issue

Did you find this page helpful?