improve loading time for player page

package-lock.json

@@ -25,7 +25,6 @@
         "react-dom": "^18",
         "react-toastify": "^9.1.3",
         "sharp": "^0.32.6",
-        "swr": "^2.2.4",
         "zustand": "^4.4.3"
       },
       "devDependencies": {
@@ -5418,18 +5417,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/swr": {
-      "version": "2.2.4",
-      "resolved": "https://registry.npmjs.org/swr/-/swr-2.2.4.tgz",
-      "integrity": "sha512-njiZ/4RiIhoOlAaLYDqwz5qH/KZXVilRLvomrx83HjzCWTfa+InyfAjv05PSFxnmLzZkNO9ZfvgoqzAaEI4sGQ==",
-      "dependencies": {
-        "client-only": "^0.0.1",
-        "use-sync-external-store": "^1.2.0"
-      },
-      "peerDependencies": {
-        "react": "^16.11.0 || ^17.0.0 || ^18.0.0"
-      }
-    },
     "node_modules/tailwindcss": {
       "version": "3.3.3",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.3.tgz",

package.json

@@ -26,7 +26,6 @@
     "react-dom": "^18",
     "react-toastify": "^9.1.3",
     "sharp": "^0.32.6",
-    "swr": "^2.2.4",
     "zustand": "^4.4.3"
   },
   "devDependencies": {

src/app/player/[id]/[leaderboard]/[sort]/[page]/page.tsx

@@ -0,0 +1,124 @@
+import Card from "@/components/Card";
+import Container from "@/components/Container";
+import Error from "@/components/Error";
+import PlayerInfo from "@/components/player/PlayerInfo";
+import Scores from "@/components/player/Scores";
+import { ssrSettings } from "@/ssrSettings";
+import { SortTypes } from "@/types/SortTypes";
+import { formatNumber } from "@/utils/number";
+import { ScoreSaberAPI } from "@/utils/scoresaber/api";
+import { normalizedRegionName } from "@/utils/utils";
+import { Metadata } from "next";
+
+type PlayerPageProps = {
+  params: { id: string; leaderboard: string; sort: string; page: string };
+};
+
+const DEFAULT_SORT_TYPE = SortTypes.top;
+
+// Get data from API (server-sided)
+async function getData(playerId: string, sort?: string, page?: number) {
+  const playerData = await ScoreSaberAPI.fetchPlayerData(playerId);
+  if (!playerData) {
+    return undefined;
+  }
+
+  const scores = [];
+  let totalPages = -1;
+  if (sort && page) {
+    const scoresData = await ScoreSaberAPI.fetchScores(
+      playerId,
+      page,
+      sort,
+      10,
+    );
+    if (scoresData) {
+      scores.push(...scoresData.scores);
+      totalPages = scoresData.pageInfo.totalPages;
+    }
+  }
+
+  return { player: playerData, scores: scores, totalPages: totalPages };
+}
+
+export async function generateMetadata({
+  params: { id, leaderboard, sort, page },
+}: PlayerPageProps): Promise<Metadata> {
+  const data = await getData(id, sort, Number(page));
+  if (!data) {
+    return {
+      title: "Player not found",
+    };
+  }
+
+  const player = data.player;
+
+  const description = `
+    View ${player.name}'s scores, top plays, and more.
+    
+    Rank: #${formatNumber(player.rank)} (#${formatNumber(
+      player.countryRank,
+    )} - ${normalizedRegionName(player.country)})
+    PP: ${formatNumber(player.pp)}
+    Play Count: ${formatNumber(player.scoreStats.totalPlayCount)}`;
+
+  return {
+    title: `${player.name}`,
+    description: `View ${player.name}'s scores, top plays, and more.`,
+    openGraph: {
+      siteName: ssrSettings.siteName,
+      title: `${player.name}`,
+      description: description,
+      images: [
+        {
+          url: player.profilePicture,
+        },
+      ],
+    },
+    twitter: {
+      card: "summary",
+    },
+  };
+}
+
+export default async function Player({
+  params: { id, leaderboard, sort, page },
+}: PlayerPageProps) {
+  const playerData = await getData(id, sort, Number(page));
+  const currentPage = Number(page);
+  const sortType = SortTypes[sort] || DEFAULT_SORT_TYPE;
+
+  if (!playerData) {
+    return (
+      <main>
+        <Container>
+          <Card className="mt-2">
+            <Error errorMessage="Failed to load player. Is the is valid?" />
+          </Card>
+        </Container>
+      </main>
+    );
+  }
+
+  const player = playerData.player;
+  const scores = playerData.scores;
+
+  return (
+    <main>
+      <Container>
+        <Card className="mt-2">
+          <PlayerInfo playerData={player} />
+        </Card>
+        <Card className="mt-2">
+          <Scores
+            playerData={player}
+            page={currentPage}
+            sortType={sortType}
+            scores={scores}
+            totalPages={playerData.totalPages}
+          />
+        </Card>
+      </Container>
+    </main>
+  );
+}

src/app/player/[id]/page.tsx

@@ -1,52 +0,0 @@
-import PlayerPage from "@/components/player/Player";
-import { ssrSettings } from "@/ssrSettings";
-import { formatNumber } from "@/utils/number";
-import { ScoreSaberAPI } from "@/utils/scoresaber/api";
-import { normalizedRegionName } from "@/utils/utils";
-import { Metadata } from "next";
-
-type Props = {
-  params: { id: string };
-};
-
-export async function generateMetadata({
-  params: { id },
-}: Props): Promise<Metadata> {
-  const player = await ScoreSaberAPI.fetchPlayerData(id);
-  if (!player) {
-    return {
-      title: "Player not found",
-    };
-  }
-
-  const description = `
-    View ${player.name}'s scores, top plays, and more.
-    
-    Rank: #${formatNumber(player.rank)} (#${formatNumber(
-      player.countryRank,
-    )} - ${normalizedRegionName(player.country)})
-    PP: ${formatNumber(player.pp)}
-    Play Count: ${formatNumber(player.scoreStats.totalPlayCount)}`;
-
-  return {
-    title: `${player.name}`,
-    description: `View ${player.name}'s scores, top plays, and more.`,
-    openGraph: {
-      siteName: ssrSettings.siteName,
-      title: `${player.name}`,
-      description: description,
-      images: [
-        {
-          url: player.profilePicture,
-        },
-      ],
-    },
-    twitter: {
-      card: "summary",
-    },
-  };
-}
-
-export default function Player({ params: { id } }: Props) {
-  return <PlayerPage id={id} />;
-}

src/components/Navbar.tsx

@@ -56,7 +56,7 @@ export default function Navbar() {
                 size={32}
               />
             }
-            href={`/player/${settingsStore.player.id}`}
+            href={`/player/${settingsStore.player.id}/scoresaber/top/1`}
           />
         )}
 

src/components/player/Player.tsx

@@ -1,109 +0,0 @@
-"use client";
-
-import Card from "@/components/Card";
-import Container from "@/components/Container";
-import Spinner from "@/components/Spinner";
-import Scores from "@/components/player/Scores";
-import { ScoresaberPlayer } from "@/schemas/scoresaber/player";
-import { useSettingsStore } from "@/store/settingsStore";
-import { SortType, SortTypes } from "@/types/SortTypes";
-import { ScoreSaberAPI } from "@/utils/scoresaber/api";
-import useStore from "@/utils/useStore";
-import dynamic from "next/dynamic";
-import { useSearchParams } from "next/navigation";
-import { useEffect, useState } from "react";
-import PlayerInfo from "./PlayerInfo";
-
-const Error = dynamic(() => import("@/components/Error"));
-
-type PlayerInfo = {
-  loading: boolean;
-  player: ScoresaberPlayer | undefined;
-};
-
-type PlayerPageProps = {
-  id: string;
-};
-
-const DEFAULT_SORT_TYPE = SortTypes.top;
-
-export default function PlayerPage({ id }: PlayerPageProps) {
-  const settingsStore = useStore(useSettingsStore, (store) => store);
-  const searchParams = useSearchParams();
-
-  const [mounted, setMounted] = useState(false);
-  const [error, setError] = useState(false);
-  const [errorMessage, setErrorMessage] = useState("");
-
-  const [player, setPlayer] = useState<PlayerInfo>({
-    loading: true,
-    player: undefined,
-  });
-
-  let page;
-  const pageString = searchParams.get("page");
-  if (pageString == null) {
-    page = 1;
-  } else {
-    page = Number.parseInt(pageString) || 1;
-  }
-
-  let sortType: SortType;
-  const sortTypeString = searchParams.get("sort");
-  if (sortTypeString == null) {
-    sortType = settingsStore?.lastUsedSortType || DEFAULT_SORT_TYPE;
-  } else {
-    sortType = SortTypes[sortTypeString] || DEFAULT_SORT_TYPE;
-  }
-
-  useEffect(() => {
-    setMounted(true);
-    if (error || !player.loading) {
-      return;
-    }
-
-    if (mounted == true) {
-      return;
-    }
-
-    ScoreSaberAPI.fetchPlayerData(id).then((playerResponse) => {
-      if (!playerResponse) {
-        setError(true);
-        setErrorMessage("Failed to fetch player. Is the ID correct?");
-        setPlayer({ ...player, loading: false });
-        return;
-      }
-      setPlayer({ ...player, player: playerResponse, loading: false });
-    });
-  }, [error, mounted, id, player]);
-
-  if (player.loading || error || !player.player) {
-    return (
-      <main>
-        <Container>
-          <Card className="mt-2">
-            <div className="p-3 text-center">
-              <div role="status">
-                <div className="flex flex-col items-center justify-center gap-2">
-                  {error && <Error errorMessage={errorMessage} />}
-                  {!error && <Spinner />}
-                </div>
-              </div>
-            </div>
-          </Card>
-        </Container>
-      </main>
-    );
-  }
-
-  const playerData = player.player;
-
-  return (
-    <main>
-      <Container>
-        <PlayerInfo playerData={playerData} />
-        <Scores playerData={playerData} page={page} sortType={sortType} />
-      </Container>
-    </main>
-  );
-}

src/components/player/PlayerInfo.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { ScoresaberPlayer } from "@/schemas/scoresaber/player";
 import { useScoresaberScoresStore } from "@/store/scoresaberScoresStore";
 import { useSettingsStore } from "@/store/settingsStore";
@@ -18,7 +20,6 @@ import { useRef } from "react";
 import { toast } from "react-toastify";
 import { useStore } from "zustand";
 import Avatar from "../Avatar";
-import Card from "../Card";
 import Label from "../Label";
 
 const PlayerChart = dynamic(() => import("./PlayerChart"));
@@ -95,10 +96,6 @@ export default function PlayerInfo({ playerData }: PlayerInfoProps) {
               });
             }
           }
-
-          console.log(
-            `Fetching scores for ${playerId} (${page}/${totalPages})`,
-          );
         },
       );
       if (reponse?.error) {
@@ -112,145 +109,138 @@ export default function PlayerInfo({ playerData }: PlayerInfoProps) {
   const isOwnProfile = settingsStore.player?.id == playerId;
 
   return (
-    <Card className="mt-2">
-      {/* Player Info */}
-      <div className="flex flex-col items-center gap-3 md:flex-row md:items-start">
-        <div className="min-w-fit">
-          {/* Avatar */}
-          <div className="flex flex-col items-center gap-2">
-            <Avatar url={playerData.profilePicture} label="Avatar" />
-          </div>
-
-          {/* Settings Buttons */}
-          <div className="absolute right-3 top-20 flex flex-col justify-end gap-2 md:relative md:right-0 md:top-0 md:mt-2 md:flex-row md:justify-center">
-            {!isOwnProfile && (
-              <button
-                className="h-fit w-fit rounded-md bg-blue-500 p-1 hover:bg-blue-600"
-                onClick={claimProfile}
-              >
-                <HomeIcon title="Set as your Profile" width={24} height={24} />
-              </button>
-            )}
-
-            {!isOwnProfile && (
-              <>
-                {!settingsStore?.isFriend(playerId) && (
-                  <button
-                    className="rounded-md bg-blue-500 p-1 hover:opacity-80"
-                    onClick={addFriend}
-                  >
-                    <UserIcon title="Add as Friend" width={24} height={24} />
-                  </button>
-                )}
-
-                {settingsStore.isFriend(playerId) && (
-                  <button
-                    className="rounded-md bg-red-500 p-1 hover:opacity-80"
-                    onClick={removeFriend}
-                  >
-                    <XMarkIcon title="Remove Friend" width={24} height={24} />
-                  </button>
-                )}
-              </>
-            )}
-          </div>
+    <div className="flex flex-col items-center gap-3 md:flex-row md:items-start">
+      <div className="min-w-fit">
+        {/* Avatar */}
+        <div className="flex flex-col items-center gap-2">
+          <Avatar url={playerData.profilePicture} label="Avatar" />
         </div>
-        <div className="mt-1 flex w-full flex-col items-center gap-2 md:items-start">
-          {/* Name */}
-          <p className="text-2xl leading-none">{playerData.name}</p>
 
-          <div className="flex items-center gap-3 text-xl">
-            {/* Global Rank */}
-            <div className="flex items-center gap-1 text-gray-300">
-              <GlobeAsiaAustraliaIcon width={32} height={32} />
+        {/* Settings Buttons */}
+        <div className="absolute right-3 top-20 flex flex-col justify-end gap-2 md:relative md:right-0 md:top-0 md:mt-2 md:flex-row md:justify-center">
+          {!isOwnProfile && (
+            <button
+              className="h-fit w-fit rounded-md bg-blue-500 p-1 hover:bg-blue-600"
+              onClick={claimProfile}
+            >
+              <HomeIcon title="Set as your Profile" width={24} height={24} />
+            </button>
+          )}
 
-              <a
-                className="flex transform-gpu items-center gap-1 transition-all hover:text-blue-500"
-                href={`/ranking/global/${Math.ceil(playerData.rank / 50)}`}
-              >
-                <p>#{formatNumber(playerData.rank)}</p>
-              </a>
-            </div>
+          {!isOwnProfile && (
+            <>
+              {!settingsStore?.isFriend(playerId) && (
+                <button
+                  className="rounded-md bg-blue-500 p-1 hover:opacity-80"
+                  onClick={addFriend}
+                >
+                  <UserIcon title="Add as Friend" width={24} height={24} />
+                </button>
+              )}
 
-            {/* Country Rank */}
-            <div className="text-gray-300">
-              <a
-                className="flex transform-gpu items-center gap-1 transition-all hover:text-blue-500"
-                href={`/ranking/country/${playerData.country}/${Math.ceil(
-                  playerData.countryRank / 50,
-                )}`}
-              >
-                <ReactCountryFlag
-                  countryCode={playerData.country}
-                  svg
-                  className="!h-7 !w-7"
-                />
-                <p>#{formatNumber(playerData.countryRank)}</p>
-              </a>
-            </div>
-
-            {/* PP */}
-            <div className="flex items-center text-gray-300">
-              <p>{formatNumber(playerData.pp)}pp</p>
-            </div>
-          </div>
-          {/* Labels */}
-          <div className="flex flex-wrap justify-center gap-2 md:justify-start">
-            <Label
-              title="Total play count"
-              className="bg-blue-500"
-              hoverValue="Total ranked song play count"
-              value={formatNumber(playerData.scoreStats.totalPlayCount)}
-            />
-            <Label
-              title="Total score"
-              className="bg-blue-500"
-              hoverValue="Total score of all your plays"
-              value={formatNumber(playerData.scoreStats.totalScore)}
-            />
-            <Label
-              title="Avg ranked acc"
-              className="bg-blue-500"
-              hoverValue="Average accuracy of all your ranked plays"
-              value={`${playerData.scoreStats.averageRankedAccuracy.toFixed(
-                2,
-              )}%`}
-            />
-
-            {hasLocalScores && (
-              <>
-                <Label
-                  title="Top PP"
-                  className="bg-[#8992e8]"
-                  hoverValue="Highest pp play"
-                  value={`${formatNumber(
-                    getHighestPpPlay(playerId)?.toFixed(2),
-                  )}pp`}
-                />
-                <Label
-                  title="Avg PP"
-                  className="bg-[#8992e8]"
-                  hoverValue="Average amount of pp per play (best 20 scores)"
-                  value={`${formatNumber(
-                    getAveragePp(playerId)?.toFixed(2),
-                  )}pp`}
-                />
-                <Label
-                  title="+ 1pp"
-                  className="bg-[#8992e8]"
-                  hoverValue="Amount of raw pp required to increase your global pp by 1pp"
-                  value={`${formatNumber(
-                    calcPpBoundary(playerId, 1)?.toFixed(2),
-                  )}pp raw per global`}
-                />
-              </>
-            )}
-          </div>
-
-          {/* Chart */}
-          <PlayerChart scoresaber={playerData} />
+              {settingsStore.isFriend(playerId) && (
+                <button
+                  className="rounded-md bg-red-500 p-1 hover:opacity-80"
+                  onClick={removeFriend}
+                >
+                  <XMarkIcon title="Remove Friend" width={24} height={24} />
+                </button>
+              )}
+            </>
+          )}
         </div>
       </div>
-    </Card>
+      <div className="mt-1 flex w-full flex-col items-center gap-2 md:items-start">
+        {/* Name */}
+        <p className="text-2xl leading-none">{playerData.name}</p>
+
+        <div className="flex items-center gap-3 text-xl">
+          {/* Global Rank */}
+          <div className="flex items-center gap-1 text-gray-300">
+            <GlobeAsiaAustraliaIcon width={32} height={32} />
+
+            <a
+              className="flex transform-gpu items-center gap-1 transition-all hover:text-blue-500"
+              href={`/ranking/global/${Math.ceil(playerData.rank / 50)}`}
+            >
+              <p>#{formatNumber(playerData.rank)}</p>
+            </a>
+          </div>
+
+          {/* Country Rank */}
+          <div className="text-gray-300">
+            <a
+              className="flex transform-gpu items-center gap-1 transition-all hover:text-blue-500"
+              href={`/ranking/country/${playerData.country}/${Math.ceil(
+                playerData.countryRank / 50,
+              )}`}
+            >
+              <ReactCountryFlag
+                countryCode={playerData.country}
+                svg
+                className="!h-7 !w-7"
+              />
+              <p>#{formatNumber(playerData.countryRank)}</p>
+            </a>
+          </div>
+
+          {/* PP */}
+          <div className="flex items-center text-gray-300">
+            <p>{formatNumber(playerData.pp)}pp</p>
+          </div>
+        </div>
+        {/* Labels */}
+        <div className="flex flex-wrap justify-center gap-2 md:justify-start">
+          <Label
+            title="Total play count"
+            className="bg-blue-500"
+            hoverValue="Total ranked song play count"
+            value={formatNumber(playerData.scoreStats.totalPlayCount)}
+          />
+          <Label
+            title="Total score"
+            className="bg-blue-500"
+            hoverValue="Total score of all your plays"
+            value={formatNumber(playerData.scoreStats.totalScore)}
+          />
+          <Label
+            title="Avg ranked acc"
+            className="bg-blue-500"
+            hoverValue="Average accuracy of all your ranked plays"
+            value={`${playerData.scoreStats.averageRankedAccuracy.toFixed(2)}%`}
+          />
+
+          {hasLocalScores && (
+            <>
+              <Label
+                title="Top PP"
+                className="bg-[#8992e8]"
+                hoverValue="Highest pp play"
+                value={`${formatNumber(
+                  getHighestPpPlay(playerId)?.toFixed(2),
+                )}pp`}
+              />
+              <Label
+                title="Avg PP"
+                className="bg-[#8992e8]"
+                hoverValue="Average amount of pp per play (best 20 scores)"
+                value={`${formatNumber(getAveragePp(playerId)?.toFixed(2))}pp`}
+              />
+              <Label
+                title="+ 1pp"
+                className="bg-[#8992e8]"
+                hoverValue="Amount of raw pp required to increase your global pp by 1pp"
+                value={`${formatNumber(
+                  calcPpBoundary(playerId, 1)?.toFixed(2),
+                )}pp raw per global`}
+              />
+            </>
+          )}
+        </div>
+
+        {/* Chart */}
+        <PlayerChart scoresaber={playerData} />
+      </div>
+    </div>
   );
 }

src/components/player/Scores.tsx

@@ -1,109 +1,46 @@
+"use client";
+
 import { ScoresaberPlayer } from "@/schemas/scoresaber/player";
 import { ScoresaberPlayerScore } from "@/schemas/scoresaber/playerScore";
 import { useSettingsStore } from "@/store/settingsStore";
 import { SortType, SortTypes } from "@/types/SortTypes";
-import { ScoreSaberAPI } from "@/utils/scoresaber/api";
 import useStore from "@/utils/useStore";
-import dynamic from "next/dynamic";
 import { useRouter } from "next/navigation";
-import { useCallback, useEffect, useState } from "react";
 import Card from "../Card";
-import Error from "../Error";
 import Pagination from "../Pagination";
 import Score from "./Score";
 
-const Spinner = dynamic(() => import("@/components/Spinner"));
-
-type PageInfo = {
-  loading: boolean;
+type ScoresProps = {
+  playerData: ScoresaberPlayer;
   page: number;
   totalPages: number;
   sortType: SortType;
   scores: ScoresaberPlayerScore[];
 };
 
-type ScoresProps = {
-  playerData: ScoresaberPlayer;
-  page: number;
-  sortType: SortType;
-};
-
-export default function Scores({ playerData, page, sortType }: ScoresProps) {
+export default function Scores({
+  playerData,
+  page,
+  totalPages,
+  sortType,
+  scores,
+}: ScoresProps) {
   const settingsStore = useStore(useSettingsStore, (store) => store);
   const playerId = playerData.id;
 
   const router = useRouter();
 
-  const [mounted, setMounted] = useState(false);
-  const [error, setError] = useState(false);
-  const [errorMessage, setErrorMessage] = useState("");
-
-  const [scores, setScores] = useState<PageInfo>({
-    loading: true,
-    page: page,
-    totalPages: 1,
-    sortType: sortType,
-    scores: [],
-  });
-
-  const updateScoresPage = useCallback(
-    (sortType: SortType, page: any) => {
-      ScoreSaberAPI.fetchScores(playerId, page, sortType.value, 10).then(
-        (scoresResponse) => {
-          if (!scoresResponse) {
-            setError(true);
-            setErrorMessage("No Scores");
-            setScores({ ...scores, loading: false });
-            return;
-          }
-          setScores({
-            ...scores,
-            scores: scoresResponse.scores,
-            totalPages: scoresResponse.pageInfo.totalPages,
-            loading: false,
-            page: page,
-            sortType: sortType,
-          });
-          settingsStore?.setLastUsedSortType(sortType);
-
-          if (page > 1) {
-            router.push(
-              `/player/${playerId}?page=${page}&sort=${sortType.value}`,
-              {
-                scroll: false,
-              },
-            );
-          } else {
-            router.push(`/player/${playerId}?sort=${sortType.value}`, {
-              scroll: false,
-            });
-          }
-
-          console.log(`Switched page to ${page} with sort ${sortType.value}`);
-        },
-      );
-    },
-    [playerId, router, scores, settingsStore],
-  );
-
-  useEffect(() => {
-    if (mounted) return;
-    setMounted(true);
-
-    updateScoresPage(scores.sortType, scores.page);
-  }, [mounted, updateScoresPage, scores.sortType, scores.page]);
-
-  if (error) {
-    return (
-      <Card className="mt-2">
-        <div className="p-3 text-center">
-          <div role="status">
-            <div className="flex flex-col items-center justify-center gap-2">
-              {error && <Error errorMessage={errorMessage} />}
-            </div>
-          </div>
-        </div>
-      </Card>
+  function setPage(page: number, sortTypee?: SortType) {
+    if (sortTypee) {
+      settingsStore?.setLastUsedSortType(sortTypee);
+    }
+    router.push(
+      `/player/${playerId}/scoresaber/${
+        sortTypee ? sortTypee.value : sortType.value
+      }/${page}`,
+      {
+        scroll: false,
+      },
     );
   }
 
@@ -112,21 +49,21 @@ export default function Scores({ playerData, page, sortType }: ScoresProps) {
       {/* Sort */}
       <div className="m-2 w-full text-sm">
         <div className="flex justify-center gap-2">
-          {Object.values(SortTypes).map((sortType) => {
+          {Object.values(SortTypes).map((sortTypee) => {
             return (
               <button
                 key={sortType.value}
                 className={`flex transform-gpu flex-row items-center gap-1 rounded-md p-[0.35rem] transition-all hover:opacity-80 ${
-                  scores.sortType.value === sortType.value
+                  sortType.value === sortTypee.value
                     ? "bg-blue-500"
                     : "bg-gray-500"
                 }`}
                 onClick={() => {
-                  updateScoresPage(sortType, 1);
+                  setPage(1, sortTypee);
                 }}
               >
-                {sortType.icon}
-                <p>{sortType.name}</p>
+                {sortTypee.icon}
+                <p>{sortTypee.name}</p>
               </button>
             );
           })}
@@ -134,40 +71,30 @@ export default function Scores({ playerData, page, sortType }: ScoresProps) {
       </div>
 
       <div className="w-full p-1">
-        {scores.loading ? (
-          <div className="flex justify-center">
-            <Spinner />
-          </div>
-        ) : (
-          <div className="grid grid-cols-1 divide-y divide-gray-500">
-            {!scores.loading && scores.scores.length == 0 ? (
-              <p className="text-red-400">{errorMessage}</p>
-            ) : (
-              scores.scores.map((scoreData, id) => {
-                const { score, leaderboard } = scoreData;
+        <div className="grid grid-cols-1 divide-y divide-gray-500">
+          {scores.map((scoreData, id) => {
+            const { score, leaderboard } = scoreData;
 
-                return (
-                  <Score
-                    key={id}
-                    player={playerData}
-                    score={score}
-                    leaderboard={leaderboard}
-                  />
-                );
-              })
-            )}
-          </div>
-        )}
+            return (
+              <Score
+                key={id}
+                player={playerData}
+                score={score}
+                leaderboard={leaderboard}
+              />
+            );
+          })}
+        </div>
       </div>
 
       {/* Pagination */}
       <div className="flex w-full flex-row justify-center rounded-md bg-gray-800 md:flex-col">
         <div className="p-3">
           <Pagination
-            currentPage={scores.page}
-            totalPages={scores.totalPages}
+            currentPage={page}
+            totalPages={totalPages}
             onPageChange={(page) => {
-              updateScoresPage(scores.sortType, page);
+              setPage(page);
             }}
           />
         </div>

src/utils/fetchWithQueue.ts

@@ -25,7 +25,7 @@ export class FetchQueue {
 
     const response = await fetch(url, {
       next: {
-        revalidate: 3600, // Keep the data for 1 hour, then fetch new data
+        revalidate: 60 * 5, // Keep the data for 5 minutes
       },
     });
     if (response.status === 429) {