From a63415461afaed0e12b8c1cb3d34260a37bf1e03 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Wed, 15 Nov 2023 12:16:49 -0600
Subject: [PATCH] feat: non-loaded page blocking

---
 .../components/PageTurner/index.css.ts        | 13 ++++++
 .../{PageTurner.tsx => PageTurner/index.tsx}  | 44 ++++++++++++++++---
 src/app/tools/ratings/page.tsx                | 10 +++++
 3 files changed, 61 insertions(+), 6 deletions(-)
 create mode 100644 src/app/tools/ratings/components/PageTurner/index.css.ts
 rename src/app/tools/ratings/components/{PageTurner.tsx => PageTurner/index.tsx} (58%)

diff --git a/src/app/tools/ratings/components/PageTurner/index.css.ts b/src/app/tools/ratings/components/PageTurner/index.css.ts
new file mode 100644
index 000000000..e7521e1c9
--- /dev/null
+++ b/src/app/tools/ratings/components/PageTurner/index.css.ts
@@ -0,0 +1,13 @@
+import { keyframes, style } from '@vanilla-extract/css';
+
+const spinKeyframes = keyframes({
+  from: { transform: 'rotate(0deg)' },
+  to: { transform: 'rotate(360deg)' },
+});
+
+export const infiniteSpin = style({
+  animationName: spinKeyframes,
+  animationIterationCount: 'infinite',
+  animationTimingFunction: 'linear',
+  animationDuration: '1s',
+});
diff --git a/src/app/tools/ratings/components/PageTurner.tsx b/src/app/tools/ratings/components/PageTurner/index.tsx
similarity index 58%
rename from src/app/tools/ratings/components/PageTurner.tsx
rename to src/app/tools/ratings/components/PageTurner/index.tsx
index 850b89ba5..ba009d392 100644
--- a/src/app/tools/ratings/components/PageTurner.tsx
+++ b/src/app/tools/ratings/components/PageTurner/index.tsx
@@ -1,15 +1,39 @@
-import { CaretLeftIcon, CaretRightIcon } from '@radix-ui/react-icons';
+import {
+  CaretLeftIcon,
+  CaretRightIcon,
+  SymbolIcon,
+} from '@radix-ui/react-icons';
 import { Button, Flex, TextField } from '@radix-ui/themes';
+import { range } from 'lodash';
 import { useEffect, useRef } from 'react';
+import { infiniteSpin } from './index.css';
 
 interface PageTurnerProps {
+  leaderboard: Record<number, number>;
   page: number;
+  rowsPerPage: number;
   pages: number;
   onPageChange: (page: number, isButtonClick: boolean) => void;
+  totalPlayers: number;
 }
 
-export function PageTurner({ page, onPageChange, pages }: PageTurnerProps) {
+export function PageTurner({
+  page,
+  rowsPerPage,
+  onPageChange,
+  pages,
+  leaderboard,
+  totalPlayers,
+}: PageTurnerProps) {
   const pageInput = useRef<HTMLInputElement>(null);
+  const rightLoading = range(
+    page * rowsPerPage,
+    Math.min(totalPlayers - 1, page * rowsPerPage + rowsPerPage + 1),
+  ).some((index) => !(index in leaderboard));
+  const leftLoading = range(
+    Math.max(0, page * rowsPerPage - 1),
+    Math.max(0, page * rowsPerPage - rowsPerPage - 1) + 1,
+  ).some((index) => !(index in leaderboard));
 
   useEffect(() => {
     if (pageInput.current) pageInput.current.value = `${page + 1}`;
@@ -21,9 +45,13 @@ export function PageTurner({ page, onPageChange, pages }: PageTurnerProps) {
         <Button
           variant="soft"
           onClick={() => onPageChange(Math.max(page - 1, 0), true)}
-          disabled={page === 0}
+          disabled={page === 0 || leftLoading}
         >
-          <CaretLeftIcon />
+          {leftLoading ? (
+            <SymbolIcon className={infiniteSpin} />
+          ) : (
+            <CaretLeftIcon />
+          )}
         </Button>
         <TextField.Root>
           <TextField.Slot>Page</TextField.Slot>
@@ -53,9 +81,13 @@ export function PageTurner({ page, onPageChange, pages }: PageTurnerProps) {
           onClick={() => {
             onPageChange(Math.min(page + 1, pages - 1), true);
           }}
-          disabled={page === pages - 1}
+          disabled={page === pages - 1 || rightLoading}
         >
-          <CaretRightIcon />
+          {rightLoading ? (
+            <SymbolIcon className={infiniteSpin} />
+          ) : (
+            <CaretRightIcon />
+          )}
         </Button>
       </Flex>
     </Flex>
diff --git a/src/app/tools/ratings/page.tsx b/src/app/tools/ratings/page.tsx
index 2f477ea9d..6a48fdffd 100644
--- a/src/app/tools/ratings/page.tsx
+++ b/src/app/tools/ratings/page.tsx
@@ -919,6 +919,11 @@ export default function Page() {
       </Flex>
 
       <PageTurner
+        totalPlayers={
+          (ratingsInfo?.detail ? undefined : ratingsInfo?.count) ?? 0
+        }
+        leaderboard={leaderboard[region][season] ?? {}}
+        rowsPerPage={ROWS_PER_PAGE}
         page={page}
         pages={pages}
         onPageChange={(page, isButtonClick) =>
@@ -1032,6 +1037,11 @@ export default function Page() {
       </Table.Root>
 
       <PageTurner
+        totalPlayers={
+          (ratingsInfo?.detail ? undefined : ratingsInfo?.count) ?? 0
+        }
+        rowsPerPage={ROWS_PER_PAGE}
+        leaderboard={leaderboard[region][season] ?? {}}
         page={page}
         pages={pages}
         onPageChange={(page, isButtonClick) =>