add loading indicator to the pagination

src/components/input/pagination.tsx

@@ -1,3 +1,5 @@
+import { ArrowPathIcon } from "@heroicons/react/24/solid";
+import clsx from "clsx";
 import { useEffect, useState } from "react";
 import {
   PaginationContent,
@@ -9,6 +11,19 @@ import {
   Pagination as ShadCnPagination,
 } from "../ui/pagination";
 
+type PaginationItemWrapperProps = {
+  isLoadingPage: boolean;
+  children: React.ReactNode;
+};
+
+function PaginationItemWrapper({ isLoadingPage, children }: PaginationItemWrapperProps) {
+  return (
+    <PaginationItem className={clsx(isLoadingPage ? "cursor-not-allowed" : "cursor-pointer")}>
+      {children}
+    </PaginationItem>
+  );
+}
+
 type Props = {
   /**
    * If true, the pagination will be rendered as a mobile-friendly pagination.
@@ -25,14 +40,20 @@ type Props = {
    */
   totalPages: number;
 
+  /**
+   * The page to show a loading icon on.
+   */
+  loadingPage: number | undefined;
+
   /**
    * Callback function that is called when the user clicks on a page number.
    */
   onPageChange: (page: number) => void;
 };
 
-export default function Pagination({ mobilePagination, page, totalPages, onPageChange }: Props) {
+export default function Pagination({ mobilePagination, page, totalPages, loadingPage, onPageChange }: Props) {
   totalPages = Math.round(totalPages);
+  const isLoading = loadingPage !== undefined;
   const [currentPage, setCurrentPage] = useState(page);
 
   useEffect(() => {
@@ -40,7 +61,7 @@ export default function Pagination({ mobilePagination, page, totalPages, onPageC
   }, [page]);
 
   const handlePageChange = (newPage: number) => {
-    if (newPage < 1 || newPage > totalPages || newPage == currentPage) {
+    if (newPage < 1 || newPage > totalPages || newPage == currentPage || isLoading) {
       return;
     }
 
@@ -62,12 +83,12 @@ export default function Pagination({ mobilePagination, page, totalPages, onPageC
     if (startPage > 1 && !mobilePagination) {
       pageNumbers.push(
         <>
-          <PaginationItem key="start" className="cursor-pointer">
+          <PaginationItemWrapper key="start" isLoadingPage={isLoading}>
             <PaginationLink onClick={() => handlePageChange(1)}>1</PaginationLink>
-          </PaginationItem>
-          <PaginationItem key="ellipsis-start" className="cursor-pointer">
+          </PaginationItemWrapper>
+          <PaginationItemWrapper key="ellipsis-start" isLoadingPage={isLoading}>
             <PaginationEllipsis />
-          </PaginationItem>
+          </PaginationItemWrapper>
         </>
       );
     }
@@ -75,11 +96,11 @@ export default function Pagination({ mobilePagination, page, totalPages, onPageC
     // Generate page numbers between startPage and endPage for desktop view
     for (let i = startPage; i <= endPage; i++) {
       pageNumbers.push(
-        <PaginationItem key={i} className="cursor-pointer">
+        <PaginationItemWrapper key={i} isLoadingPage={isLoading}>
           <PaginationLink isActive={i === currentPage} onClick={() => handlePageChange(i)}>
-            {i}
+            {loadingPage === i ? <ArrowPathIcon className="w-4 h-4 animate-spin" /> : i}
           </PaginationLink>
-        </PaginationItem>
+        </PaginationItemWrapper>
       );
     }
 
@@ -90,28 +111,28 @@ export default function Pagination({ mobilePagination, page, totalPages, onPageC
     <ShadCnPagination className="select-none">
       <PaginationContent>
         {/* Previous button for mobile and desktop */}
-        <PaginationItem className="cursor-pointer">
+        <PaginationItemWrapper isLoadingPage={isLoading}>
           <PaginationPrevious onClick={() => handlePageChange(currentPage - 1)} />
-        </PaginationItem>
+        </PaginationItemWrapper>
 
         {renderPageNumbers()}
 
         {/* For desktop, show ellipsis and link to the last page */}
         {!mobilePagination && currentPage < totalPages && (
           <>
-            <PaginationItem key="ellipsis-end">
+            <PaginationItemWrapper key="ellipsis-end" isLoadingPage={isLoading}>
               <PaginationEllipsis className="cursor-default" />
-            </PaginationItem>
-            <PaginationItem key="end" className="cursor-pointer">
+            </PaginationItemWrapper>
+            <PaginationItemWrapper key="end" isLoadingPage={isLoading}>
               <PaginationLink onClick={() => handlePageChange(totalPages)}>{totalPages}</PaginationLink>
-            </PaginationItem>
+            </PaginationItemWrapper>
           </>
         )}
 
         {/* Next button for mobile and desktop */}
-        <PaginationItem className="cursor-pointer">
+        <PaginationItemWrapper isLoadingPage={isLoading}>
           <PaginationNext onClick={() => handlePageChange(currentPage + 1)} />
-        </PaginationItem>
+        </PaginationItemWrapper>
       </PaginationContent>
     </ShadCnPagination>
   );

src/components/player/player-scores.tsx

@@ -25,7 +25,7 @@ export default function PlayerScores({ player, sort, page }: Props) {
   const [currentPage, setCurrentPage] = useState(page);
   const [previousScores, setPreviousScores] = useState<ScoreSaberPlayerScoresPage | undefined>();
 
-  const { data, isError, refetch } = useQuery({
+  const { data, isError, isLoading, refetch } = useQuery({
     queryKey: ["playerScores", player.id, currentSort, currentPage],
     queryFn: () => scoresaberFetcher.lookupPlayerScores(player.id, currentSort, currentPage),
   });
@@ -89,6 +89,7 @@ export default function PlayerScores({ player, sort, page }: Props) {
         mobilePagination={width < 768}
         page={currentPage}
         totalPages={Math.ceil(previousScores.metadata.total / previousScores.metadata.itemsPerPage)}
+        loadingPage={isLoading ? currentPage : undefined}
         onPageChange={(newPage) => {
           setCurrentPage(newPage);
         }}