TanStack•2y 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()

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

loader(): void

defined always causes the throbber to load, even though we return no value and the loader is not

async

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

defaultPendingMs: 300

and

defaultPendingMinMs: 400

defaultPendingMinMs: 400

and even set

pendingMs: 1000

pendingMs: 1000

on the relevant component, yet still the pending component is rendered.

If we comment out the

loader()

loader()

definition no pending component is shown.

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

TanStack•2y 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()

useQuery()

loader(): void

loader(): void

defined always causes the throbber to load, even though we return no value and the loader is not

async

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

defaultPendingMs: 300

and

defaultPendingMinMs: 400

defaultPendingMinMs: 400

and even set

pendingMs: 1000

pendingMs: 1000

on the relevant component, yet still the pending component is rendered.

If we comment out the

loader()

loader()

definition no pending component is shown.

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

Sync loader always causes pending component to show?

Similar Threads

Sync loader always causes pending component to show?

Similar Threads

Similar Threads

Similar Threads