What I have:

/app/loading.tsx
const Loading = () => {
return <div>Loading...</div>;
};
export default Loading;


/app/page.tsx
const page: number = +searchParams.page! 0;
const limit: number = +searchParams.limit! 10;

const response = await fetch(
https://pokeapi.co/api/v2/pokemon/?limit=${limit}&offset=${page}
);
const data: Data = await response.json();

{data.results.map((pokemon: Pokemon) => {
return (
<div
key={pokemon.name}
className='flex flex-col items-center justify-center'
>
<p>{pokemon.name}</p>
</div>
);
})}

I tried Wrapping it into <Suspense fallback={<Loading />} key={page}>

What is happening right now:
when user clicks on pagination, it takes some time to display new fetched pokemons
What I want:
After user clicks on pagination, show loading state until new fetched pokemons

full code: https://github.com/bopavlic/pokemon_v2
live: https://pokemon-v2-git-main-bopavlic.vercel.app/?page=0&limit=10