feat(ssr): server load inital page of scores

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

@@ -69,15 +69,21 @@ export async function generateMetadata({
  * @param id the player's id
  * @returns the player's data
  */
-async function getData(id: string) {
-  const response = await ScoreSaberAPI.fetchPlayerData(id);
+async function getData(id: string, page: number, sort: string) {
+  const playerData = await ScoreSaberAPI.fetchPlayerData(id);
+  const playerScores = await ScoreSaberAPI.fetchScores(id, page, sort, 10);
   return {
-    data: response,
+    playerData: playerData,
+    playerScores: playerScores,
   };
 }
 
 export default async function Player({ params: { id, sort, page } }: Props) {
-  const { data: player } = await getData(id);
+  const { playerData: player, playerScores } = await getData(
+    id,
+    Number(page),
+    sort,
+  );
   if (!player) {
     return (
       <main>
@@ -130,7 +136,12 @@ export default async function Player({ params: { id, sort, page } }: Props) {
             </Suspense>
           </div>
         </Card>
-        <Scores playerData={player} page={Number(page)} sortType={sortType} />
+        <Scores
+          initalScores={playerScores?.scores}
+          initalPage={Number(page)}
+          playerData={player}
+          initalSortType={sortType}
+        />
       </Container>
     </main>
   );

src/components/GlobalRanking.tsx

@@ -64,21 +64,6 @@ export default function GlobalRanking({
                 ))}
               </tbody>
             </table>
-            {/* 
-              {isMobile && (
-                <div className="flex flex-col gap-2">
-                  {players.map((player) => (
-                    <div
-                      key={player.rank}
-                      className="flex flex-col gap-2 rounded-md bg-background"
-                    >
-                      <Link href={`/player/${player.id}/top/1`}>
-                        <PlayerRankingMobile player={player} />
-                      </Link>
-                    </div>
-                  ))}
-                </div>
-              )} */}
 
             {/* Pagination */}
             <div className="flex w-full flex-row justify-center">

src/components/player/PlayerRankingMobile.tsx

@@ -1,54 +0,0 @@
-import { ScoresaberPlayer } from "@/schemas/scoresaber/player";
-import { useSettingsStore } from "@/store/settingsStore";
-import { formatNumber } from "@/utils/numberUtils";
-import { useStore } from "zustand";
-import Avatar from "../Avatar";
-import CountyFlag from "../CountryFlag";
-import Label from "../Label";
-
-type PlayerRankingProps = {
-  player: ScoresaberPlayer;
-  showCountryFlag?: boolean;
-};
-
-export default function PlayerRankingMobile({
-  player,
-  showCountryFlag = true,
-}: PlayerRankingProps) {
-  const settingsStore = useStore(useSettingsStore, (store) => store);
-
-  return (
-    <div>
-      <div className="m-3 flex flex-col gap-2">
-        <p className="flex items-center gap-2">
-          <p>#{formatNumber(player.rank)}</p>
-          <Avatar url={player.profilePicture} label="Avatar" size={24} />
-          {showCountryFlag && (
-            <CountyFlag countryCode={player.country} className="!h-5 !w-5" />
-          )}
-          <p
-            className={
-              player.id == settingsStore.player?.id
-                ? "transform-gpu text-red-500 transition-all hover:text-blue-500"
-                : ""
-            }
-          >
-            {player.name}
-          </p>
-        </p>
-        <div className="flex flex-wrap justify-center gap-2">
-          <Label
-            title="PP"
-            tooltip={<p>The total amount of pp this player has</p>}
-            value={`${formatNumber(player.pp)}`}
-          />
-          <Label
-            title="Total play count"
-            tooltip={<p>The total amount of plays this player has</p>}
-            value={formatNumber(player.scoreStats.totalPlayCount)}
-          />
-        </div>
-      </div>
-    </div>
-  );
-}

src/components/player/Score.tsx

@@ -74,7 +74,7 @@ export default function Score({
             className="h-fit min-w-[60px] rounded-md"
             width={60}
             height={60}
-            loading="lazy"
+            priority
           />
           <div
             className="absolute mt-12 flex w-[55px] cursor-default items-center justify-center divide-x divide-y rounded-sm pl-[3px] pr-[3px] text-[0.8rem] opacity-90"

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>
   );