Loading indicator during filter / search / pagination about shadcn-table HOT 4 CLOSED

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>
  )
}