Page is not loading when using router.push() properly.
Unanswered
Prairie yellowjacket posted this in #help-forum
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>
);
};