Loading indicator during filter / search / pagination

[Tony Xiao]

Sorely missing at the moment. Would love an example for how to implement it.

[Sadman Sakib]

You can just pass the page, sort or any dynamic search-params on the key of the suspense. So whenever the value changes it will trigger the suspense boundary.

export default function TasksTablePage({ searchParams }: TasksTablePageProps) {
  const { page, sort } = searchParamsSchema.parse(searchParams)
  const tasksPromise = getTasks(searchParams)

  return (
    <Shell>
      <React.Suspense
        key={`${page}-${sort}`}
        fallback={
          <DataTableSkeleton columnCount={4} filterableColumnCount={2} />
        }
      >
        {/**
         * The `TasksTableShell` component is used to render the `DataTable` component within it.
         * This is done because the table columns need to be memoized, and the `useDataTable` hook needs to be called in a client component.
         * By encapsulating the `DataTable` component within the `tasktableshell` component, we can ensure that the necessary logic and state management is handled correctly.
         */}
        <TasksTableShell tasksPromise={tasksPromise} />
      </React.Suspense>
    </Shell>
  )
}

[Tony Xiao]

Hmm I see. What if you want to follow the stale-while-revalidate pattern and keep showing the data just with a refreshing indicator before the updated data comes back in?

[Sadman Sakib]

React suspense will handle that as its triggering the suspense for that unique key.

[DivMode]

Is there a way to make it so that only the table rows show the skeleton? With the current solution the whole table including column headers and page numbers becomes a skeleton