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; 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(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) { Page @@ -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} > - + {rightLoading ? ( + + ) : ( + + )} 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() { @@ -1032,6 +1037,11 @@ export default function Page() {