add cache to the player data fetching on the player page to speedup initial page loads

src/app/(pages)/player/[...slug]/page.tsx

@@ -8,6 +8,7 @@ import { redirect } from "next/navigation";
 import { Colors } from "@/common/colors";
 import ScoreSaberPlayerScoresPageToken from "@/common/model/token/scoresaber/score-saber-player-scores-page-token";
 import { getAverageColor } from "@/common/image-utils";
+import { cache } from "react";
 
 const UNKNOWN_PLAYER = {
   title: "ScoreSaber Reloaded - Unknown Player",
@@ -30,32 +31,34 @@ type Props = {
  * @param fetchScores whether to fetch the scores
  * @returns the player data and scores
  */
-async function getPlayerData({ params }: Props, fetchScores: boolean = true) {
-  const { slug } = await params;
-  const id = slug[0]; // The players id
-  const sort: ScoreSort = (slug[1] as ScoreSort) || "recent"; // The sorting method
-  const page = parseInt(slug[2]) || 1; // The page number
-  const search = (slug[3] as string) || ""; // The search query
+const getPlayerData = cache(
+  async ({ params }: Props, fetchScores: boolean = true) => {
+    const { slug } = await params;
+    const id = slug[0]; // The players id
+    const sort: ScoreSort = (slug[1] as ScoreSort) || "recent"; // The sorting method
+    const page = parseInt(slug[2]) || 1; // The page number
+    const search = (slug[3] as string) || ""; // The search query
 
-  const player = (await scoresaberService.lookupPlayer(id, false))?.player;
-  let scores: ScoreSaberPlayerScoresPageToken | undefined;
-  if (fetchScores) {
-    scores = await scoresaberService.lookupPlayerScores({
-      playerId: id,
-      sort,
-      page,
-      search,
-    });
-  }
+    const player = (await scoresaberService.lookupPlayer(id, false))?.player;
+    let scores: ScoreSaberPlayerScoresPageToken | undefined;
+    if (fetchScores) {
+      scores = await scoresaberService.lookupPlayerScores({
+        playerId: id,
+        sort,
+        page,
+        search,
+      });
+    }
 
-  return {
-    sort: sort,
-    page: page,
-    search: search,
-    player: player,
-    scores: scores,
-  };
-}
+    return {
+      sort: sort,
+      page: page,
+      search: search,
+      player: player,
+      scores: scores,
+    };
+  },
+);
 
 export async function generateMetadata(props: Props): Promise<Metadata> {
   const { player } = await getPlayerData(props, false);