How to indicate loading during pagination (using query parameter) with RSC and loading.tsx?

[branislavbrincko]

I am trying to implement pagination using RSC and loading.tsx. I render items on the server based on ?page=<number> query parameter.

The problem is client side/soft navigation - when I click on <Link href={`/?page=${page + 1}`}>Next</Link> nothing happens for 3 seconds (fake delay in data fetching).

next.mov

Is there a way how to indicate that items are loading?

Once I click the link I would expect the loading.tsx to "kick in" and show the loading page immediately. But that is not happening and I get no feedback for those 3 seconds.

At first glance this #43548 seemed to be my issue, but I reckon this is something else - this issue was related to dynamic pages (pages that use [dynamicSegments]/page.tsx) - this is not my case. Besides the problem in this issue was on Vercel side.

Any advice 🙏 ?

I have the following setup:

src/app/page.tsx
src/app/loading.tsx

// page.tsx
import Link from 'next/link'

const wait = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms))

const data = [
    { id: 1, name: 'John Doe' },
    { id: 2, name: 'Jane Doe' },
    { id: 3, name: 'John Smith' },
    { id: 4, name: 'Jane Smith' },
    { id: 5, name: 'John Smith' },
    { id: 6, name: 'Jane Smith' },
    { id: 7, name: 'John Doe' },
    { id: 8, name: 'Jane Doe' },
    { id: 9, name: 'John Smith' },
    { id: 10, name: 'Jane Smith' },
    { id: 11, name: 'John Smith' },
    { id: 12, name: 'Jane Smith' }
]

const PAGINATION_LIMIT = 2
const getData = async (page: number) => {
    await wait(3000)

    const items = data.slice((page - 1) * PAGINATION_LIMIT, page * PAGINATION_LIMIT)
    const hasNext = page * PAGINATION_LIMIT < data.length
    const hasPrev = page > 1
    const numOfPages = Math.ceil(data.length / PAGINATION_LIMIT)

    return {
        items,
        pagination: {
            hasNext,
            hasPrev,
            numOfPages
        }
    }
}

export default async function Home({ searchParams }: { searchParams: { page: string } }) {
    const page = Number(searchParams.page) || 1
    const { items } = await getData(page)

    return (
        <>
            <div className='text-center mb-10 pt-10'>
                {items.map((item) => (
                    <div key={item.id}>
                        {item.id}: {item.name}
                    </div>
                ))}
            </div>
            <div className='flex gap-10 justify-center'>
                <Link href={`/?page=${page - 1}`}>Prev</Link>
                <Link href={`/?page=${page + 1}`}>Next</Link>
            </div>
        </>
    )
}

// loading.tsx
export default async function Home() {
    return <div className='flex justify-center mt-10'>Loading...</div>
}

[vioao]

Same problem.

[twosixstudio]

Same problem here

[wiscaksono]

same problem here

[JeromeDeLeon]

I managed to solve it by following the solution here.

I did something similar because, at first, I put it at the root div, but I felt that was too unnecessary.

// page.jsx
import { v4 as uuidv4 } from 'uuid';

export default function Page() {
  return (
    <div>
      <div>
        {/* Other component */}
      </div>
      {/* I put a uuid as the key, and everything worked. /*}
      <Suspense key={uuidv4()} fallback="Loading...">
        <ComponentWithPagination />
      </Suspense>
    </div>
  );
}

---

This person also mentioned it here.

[syan-dev]

Thank god, you are my savior

[emimaricic]

have you managed to find solution?

[errunlee]

Wrapping the page change inside useTranstion worked for me, the data is being fetched in server component and with each page change I show loader based on isPending.

const [isPending, startTransition] = useTransition();

const handlePageChange = (pageIndex: number) => {
   const pageNum = pageIndex + 1;
   startTransition(() => {
     router.push(
       pathname + "?" + createQueryString("page", pageNum.toString())
     );
   });
 };