Next.js Discord

Discord Forum

Page is not loading when using router.push() properly.

Unanswered
Prairie yellowjacket posted this in #help-forum
Open in Discord
Prairie yellowjacketOP
Hello, I'm implementing async data table which have pagination search filters where I'm using router.push() to fetch my data, and I want to add Loading state when fetch is happening. Problem is everything I tried loading is not happening, it is triggering only on first render. I know it has something to do with caching, is there any solution for the mentioned problem?

export const PlayersClient: React.FC<PlayersClientProps> = ({
  total,
  initialPlayers,
}) => {
  const router = useRouter();
  const searchParams = useSearchParams();

  const key = JSON.stringify(searchParams);

  const onRowClick = (id: any) => {
    router.push(`players/${id}`);
  };

  const columns = generateColumns(initialPlayers);

  return (
      <Suspense key={key} fallback={<Loading />}>
        <DataTable
          columns={columns}
          data={initialPlayers}
          total={total}
          onRowClick={['id', onRowClick]}
        />
      </Suspense>
  );
};

0 Replies