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,8 +109,6 @@ 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 */}
@@ -212,9 +207,7 @@ export default function PlayerInfo({ playerData }: PlayerInfoProps) {
             title="Avg ranked acc"
             className="bg-blue-500"
             hoverValue="Average accuracy of all your ranked plays"
-              value={`${playerData.scoreStats.averageRankedAccuracy.toFixed(
+            value={`${playerData.scoreStats.averageRankedAccuracy.toFixed(2)}%`}
-                2,
-              )}%`}
           />
 
           {hasLocalScores && (
@@ -231,9 +224,7 @@ export default function PlayerInfo({ playerData }: PlayerInfoProps) {
                 title="Avg PP"
                 className="bg-[#8992e8]"
                 hoverValue="Average amount of pp per play (best 20 scores)"
-                  value={`${formatNumber(
+                value={`${formatNumber(getAveragePp(playerId)?.toFixed(2))}pp`}
-                    getAveragePp(playerId)?.toFixed(2),
-                  )}pp`}
               />
               <Label
                 title="+ 1pp"
@@ -251,6 +242,5 @@ export default function PlayerInfo({ playerData }: PlayerInfoProps) {
         <PlayerChart scoresaber={playerData} />
       </div>
     </div>
-    </Card>
   );
 }

src/components/player/Scores.tsx

@@ -1,110 +1,47 @@
+"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 ScoresProps = {
-
+  playerData: ScoresaberPlayer;
-type PageInfo = {
-  loading: boolean;
   page: number;
   totalPages: number;
   sortType: SortType;
   scores: ScoresaberPlayerScore[];
 };
 
-type ScoresProps = {
+export default function Scores({
-  playerData: ScoresaberPlayer;
+  playerData,
-  page: number;
+  page,
-  sortType: SortType;
+  totalPages,
-};
+  sortType,
-
+  scores,
-export default function Scores({ playerData, page, sortType }: ScoresProps) {
+}: ScoresProps) {
   const settingsStore = useStore(useSettingsStore, (store) => store);
   const playerId = playerData.id;
 
   const router = useRouter();
 
-  const [mounted, setMounted] = useState(false);
+  function setPage(page: number, sortTypee?: SortType) {
-  const [error, setError] = useState(false);
+    if (sortTypee) {
-  const [errorMessage, setErrorMessage] = useState("");
+      settingsStore?.setLastUsedSortType(sortTypee);
-
-  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}`,
+      `/player/${playerId}/scoresaber/${
+        sortTypee ? sortTypee.value : sortType.value
+      }/${page}`,
       {
         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>
-    );
   }
 
   return (
@@ -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}
+                {sortTypee.icon}
-                <p>{sortType.name}</p>
+                <p>{sortTypee.name}</p>
               </button>
             );
           })}
@@ -134,16 +71,8 @@ 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 ? (
+          {scores.map((scoreData, id) => {
-              <p className="text-red-400">{errorMessage}</p>
-            ) : (
-              scores.scores.map((scoreData, id) => {
             const { score, leaderboard } = scoreData;
 
             return (
@@ -154,20 +83,18 @@ export default function Scores({ playerData, page, sortType }: ScoresProps) {
                 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}
+            currentPage={page}
-            totalPages={scores.totalPages}
+            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) {