feat(ssr): server load inital page of scores

src/components/player/Scores.tsx

@@ -6,18 +6,13 @@ import { useSettingsStore } from "@/store/settingsStore";
 import { SortType, SortTypes } from "@/types/SortTypes";
 import { ScoreSaberAPI } from "@/utils/scoresaber/api";
 import useStore from "@/utils/useStore";
-import clsx from "clsx";
-import dynamic from "next/dynamic";
 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;
   page: number;
   totalPages: number;
   sortType: SortType;
@@ -25,12 +20,18 @@ type PageInfo = {
 };
 
 type ScoresProps = {
+  initalScores: ScoresaberPlayerScore[] | undefined;
+  initalPage: number;
   playerData: ScoresaberPlayer;
-  page: number;
-  sortType: SortType;
+  initalSortType: SortType;
 };
 
-export default function Scores({ playerData, page, sortType }: ScoresProps) {
+export default function Scores({
+  initalScores,
+  playerData,
+  initalPage,
+  initalSortType,
+}: ScoresProps) {
   const settingsStore = useStore(useSettingsStore, (store) => store);
   const playerId = playerData.id;
 
@@ -39,28 +40,31 @@ export default function Scores({ playerData, page, sortType }: ScoresProps) {
   const [errorMessage, setErrorMessage] = useState("");
 
   const [scores, setScores] = useState<PageInfo>({
-    loading: true,
-    page: page,
+    page: initalPage,
     totalPages: 1,
-    sortType: sortType,
-    scores: [],
+    sortType: initalSortType,
+    scores: initalScores ? initalScores : [],
   });
 
   const updateScoresPage = useCallback(
     (sortType: SortType, page: any) => {
+      if (page == initalPage && sortType == initalSortType && initalScores) {
+        console.log("Already loaded scores, not fetching");
+        return;
+      }
+
       ScoreSaberAPI.fetchScores(playerId, page, sortType.value, 10).then(
         (scoresResponse) => {
           if (!scoresResponse) {
             setError(true);
             setErrorMessage("No Scores");
-            setScores({ ...scores, loading: false });
+            setScores({ ...scores });
             return;
           }
           setScores({
             ...scores,
             scores: scoresResponse.scores,
             totalPages: scoresResponse.pageInfo.totalPages,
-            loading: false,
             page: page,
             sortType: sortType,
           });
@@ -75,7 +79,7 @@ export default function Scores({ playerData, page, sortType }: ScoresProps) {
         },
       );
     },
-    [playerId, scores, settingsStore],
+    [initalPage, initalScores, initalSortType, playerId, scores, settingsStore],
   );
 
   useEffect(() => {
@@ -100,13 +104,7 @@ export default function Scores({ playerData, page, sortType }: ScoresProps) {
   }
 
   return (
-    <Card
-      outerClassName="mt-2"
-      className={clsx(
-        "w-full items-center md:flex-col",
-        scores.loading && "min-h-[1050px]",
-      )}
-    >
+    <Card outerClassName="mt-2" className="w-full items-center md:flex-col">
       {/* Sort */}
       <div className="mb-2 mt-1 w-full text-sm">
         <div className="flex justify-center gap-2">
@@ -132,43 +130,33 @@ export default function Scores({ playerData, page, sortType }: ScoresProps) {
       </div>
 
       <div className="flex h-full w-full flex-col items-center justify-center">
-        {scores.loading ? (
-          <div className="mt-2">
-            <Spinner />
-          </div>
-        ) : (
-          <>
-            <div className="grid min-w-full grid-cols-1 divide-y divide-border">
-              {!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 min-w-full grid-cols-1 divide-y divide-border">
+            {scores.scores.map((scoreData, id) => {
+              const { score, leaderboard } = scoreData;
 
-                  return (
-                    <Score
-                      key={id}
-                      player={playerData}
-                      score={score}
-                      leaderboard={leaderboard}
-                      ownProfile={settingsStore?.player}
-                    />
-                  );
-                })
-              )}
-            </div>
-            {/* Pagination */}
-            <div className="pt-3">
-              <Pagination
-                currentPage={scores.page}
-                totalPages={scores.totalPages}
-                onPageChange={(page) => {
-                  updateScoresPage(scores.sortType, page);
-                }}
-              />
-            </div>
-          </>
-        )}
+              return (
+                <Score
+                  key={id}
+                  player={playerData}
+                  score={score}
+                  leaderboard={leaderboard}
+                  ownProfile={settingsStore?.player}
+                />
+              );
+            })}
+          </div>
+          {/* Pagination */}
+          <div className="pt-3">
+            <Pagination
+              currentPage={scores.page}
+              totalPages={scores.totalPages}
+              onPageChange={(page) => {
+                updateScoresPage(scores.sortType, page);
+              }}
+            />
+          </div>
+        </>
       </div>
     </Card>
   );