I'm following the nextjs search and pagination tutorial: https://nextjs.org/learn/dashboard-app/adding-search-and-pagination

I'm currently just focus my test on the pagination, so I have a simple page to update de limit with a previous and next buttons

the main server component looks like this:

const Page = async (props: PageProps) => {
  return (
    <Fragment>
      <Suspense
        key={props.searchParams?.limit}
        fallback={<div>Loading...</div>}
      >
        <Table limit={props.searchParams?.limit} />
      </Suspense>
      <Pagination totalPages={10} />
    </Fragment>
  );
};

Table is just showing the data getting from a api request:

const Table = async (props: TableProps) => {
  const getUsers = async () => {
  return apiCall(props.limit);
  };

  const users = await getUsers();

  return (
    <div>
      {users.map((user) => (
        <div key={user.$id}>{user.name}</div>
      ))}
    </div>
  );
};

And the pagination component:

"use client"
const Pagination = ({ totalPages }: { totalPages: number }) => {
  /...
  return (
    <>
      <Button
        component={Link}
        href={createPageURL(currentPage - 1)}
      >
        Previous
      </Button>
      <Button
        component={Link}
        href={createPageURL(currentPage + 1)}
      >
        Next
      </Button>
    </>
  );
};

export default Pagination;

With this approach if I press any of the pagination buttons the Table component hides its content and shows Loading... while it is getting the data.

I want to have a different feedback, for example: Show a loader in the button or any other place but avoiding to hide the Table component, is that possible?