T
TanStack•14mo ago
deep-jade

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
equal-aqua
equal-aqua•14mo ago
out of curiosity, if you make your loader async (with no awaits) does this still happen?
deep-jade
deep-jadeOP•14mo 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.
xenial-black
xenial-black•14mo ago
can you please create a minimal complete example?
deep-jade
deep-jadeOP•14mo 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?