Help with Using Tanstack SWR with Loading skeletons

[Oppslia]

I am trying to implement a loading indicator inside of a part of my component. The tutorial I was following used pendingComponent() to show a loading indictator on the initial data fetch. This is not ideal for what I wanted to build off of it. I would like to take advantage of the SWR rendering, but also be able to place the loading indicator INSIDE my component, so that the indicator is inside the bounds where the content being loaded would exist.

The only way I can get anything close to this, is to write my template twice. Once with the data as the component and once inside the pendingComponent() function with the added loading indicator.

I have tried something along these lines to get the indicator to show up, however the indicator ALWAYS shows up, and that just completely voids the benefit of the built in SWR caching Tanstack provides, which is to use cached data to provide a more snappy user experience by removing the loading screens from subsequent navigations to the same route withthin the allotted stale data time:

export const Route = createFileRoute('/org/activities/meetups/$meetupId')({
  loader: ({ params }) => {
    const meetupPromise = fetch(`http://localhost:3001/events/${params.meetupId}`)
      .then((res) => {
        if (!res.ok) throw new Error('Meetup not found')
        return res.json()
      })

    return { meetupPromise }
  },
  component: MeetupLayout,
})

function MeetupLayout() {
  const { meetupPromise } = Route.useLoaderData()

  return (
    <div className="max-w-2xl mx-auto bg-neutral-900 border border-neutral-800 p-8 rounded-2xl shadow-xl">
      <Suspense fallback={<div className="text-neutral-400">Loading…</div>}>
        <Await promise={meetupPromise}>
          {(meetup) => (
            <>
              <MeetupTitle meetup={meetup} />
              <div className="bg-neutral-950 rounded-xl border border-neutral-800 overflow-hidden">
                <MeetupDetails meetup={meetup} />
              </div>
            </>
          )}
        </Await>
      </Suspense>
    </div>
  )
}

function MeetupTitle({ meetup }: { meetup: MeetupEvent }) {
  return (
    <>
      <h1 className="text-4xl font-extrabold text-white mb-4 tracking-tight">
        {meetup.title}
      </h1>

      <p className="text-neutral-400 text-lg mb-8 leading-relaxed">
        {meetup.description}
      </p>
    </>
  )
}

function MeetupDetails({ meetup }: { meetup: MeetupEvent }) {
  const details = [
    { label: 'Date', value: meetup.date },
    { label: 'Location', value: meetup.location },
    { label: 'Attendees', value: meetup.attendees },
    { label: 'City', value: meetup.city },
    { label: 'Tech Stack', value: meetup.tech },
  ]
  return (
    <>
      {details.map((detail, index) => {
        // Only render if the value exists and isn't empty
        if (!detail.value) return null

        return (
          <div
            key={detail.label}
            className={`flex justify-between py-4 px-6 ${
              index !== details.length - 1 ? 'border-b border-neutral-800' : ''
            }`}
          >
            <span className="text-neutral-500 font-medium">{detail.label}</span>
            <span className="text-emerald-400 font-semibold">
              {detail.value}
            </span>
          </div>
        )
      })}
    </>
  )
} 

• Being able to show a loading indicator in the portion of a component where it would be displayed seems like a pretty obvious use case, so I am not sure if I am just missing something obvious. Maybe this is not a problem Tanstack Router was meant to solve.

[barry166]

Await is the right tool for an in-component skeleton. The part missing in your example is cache freshness: with the default staleTime: 0, the route data is stale as soon as it is loaded, so a repeat navigation can create a new unresolved promise and your <Await> fallback appears again.

Give the route a staleTime and keep the skeleton only around the region that is actually deferred:

export const Route = createFileRoute('/org/activities/meetups/$meetupId')({
  staleTime: 60_000,
  loader: ({ params }) => ({
    meetupPromise: fetchMeetup(params.meetupId),
  }),
  component: MeetupLayout,
})

function MeetupLayout() {
  const { meetupPromise } = Route.useLoaderData()

  return (
    <div className="max-w-2xl mx-auto bg-neutral-900 border border-neutral-800 p-8 rounded-2xl shadow-xl">
      <Await promise={meetupPromise} fallback={<MeetupDetailsSkeleton />}>
        {(meetup) => <MeetupDetails meetup={meetup} />}
      </Await>
    </div>
  )
}

Within staleTime, the router can reuse the cached loader data and you should not see the skeleton on return navigation. After it becomes stale, the default staleReloadMode: 'background' keeps successful stale matches rendered while the loader revalidates, so you still avoid duplicating the whole page template in pendingComponent.

Docs: https://tanstack.com/router/latest/docs/framework/react/guide/data-loading and https://tanstack.com/router/latest/docs/framework/react/guide/deferred-data-loading