make leaderboard page not animate when loading it

src/components/context/leaderboard-context.tsx

@@ -1,6 +0,0 @@
-"use client";
-
-import { createContext } from "react";
-import ScoreSaberLeaderboardToken from "@/common/model/token/scoresaber/score-saber-leaderboard-token";
-
-export const LeaderboardContext = createContext<ScoreSaberLeaderboardToken | undefined>(undefined);

src/components/leaderboard/leaderboard-data.tsx

@@ -2,7 +2,6 @@
 
 import ScoreSaberLeaderboardScoresPageToken from "@/common/model/token/scoresaber/score-saber-leaderboard-scores-page-token";
 import ScoreSaberLeaderboardToken from "@/common/model/token/scoresaber/score-saber-leaderboard-token";
-import { LeaderboardContext } from "@/components/context/leaderboard-context";
 import LeaderboardScores from "@/components/leaderboard/leaderboard-scores";
 import { LeaderboardInfo } from "@/components/leaderboard/leaderboard-info";
 import { useQuery } from "@tanstack/react-query";
@@ -36,6 +35,7 @@ export function LeaderboardData({ initialPage, initialScores, initialLeaderboard
   const { data: leaderboard } = useQuery({
     queryKey: ["leaderboard-" + initialLeaderboard.id, selectedLeaderboardId],
     queryFn: () => scoresaberService.lookupLeaderboard(selectedLeaderboardId + ""),
+    initialData: initialLeaderboard,
     staleTime: 30 * 1000, // Cache data for 30 seconds
   });
 
@@ -64,17 +64,15 @@ export function LeaderboardData({ initialPage, initialScores, initialLeaderboard
 
   return (
     <main className="flex flex-col-reverse xl:flex-row w-full gap-2">
-      <LeaderboardContext.Provider value={currentLeaderboard}>
-        <LeaderboardScores
-          leaderboard={currentLeaderboard}
-          initialScores={initialScores}
-          initialPage={initialPage}
-          showDifficulties
-          isLeaderboardPage
-          leaderboardChanged={id => setSelectedLeaderboardId(id)}
-        />
-        <LeaderboardInfo leaderboard={currentLeaderboard} beatSaverMap={beatSaverMap} />
-      </LeaderboardContext.Provider>
+      <LeaderboardScores
+        leaderboard={currentLeaderboard}
+        initialScores={initialScores}
+        initialPage={initialPage}
+        showDifficulties
+        isLeaderboardPage
+        leaderboardChanged={id => setSelectedLeaderboardId(id)}
+      />
+      <LeaderboardInfo leaderboard={currentLeaderboard} beatSaverMap={beatSaverMap} />
     </main>
   );
 }

src/components/leaderboard/leaderboard-scores.tsx

@@ -75,7 +75,7 @@ export default function LeaderboardScores({
   const [currentPage, setCurrentPage] = useState(initialPage);
   const [currentScores, setCurrentScores] = useState<ScoreSaberLeaderboardScoresPageToken | undefined>(initialScores);
   const topOfScoresRef = useRef<HTMLDivElement>(null);
-  const [shouldFetch, setShouldFetch] = useState(false); // New state to control fetching
+  const [shouldFetch, setShouldFetch] = useState(false);
 
   const {
     data: scores,
@@ -84,8 +84,8 @@ export default function LeaderboardScores({
   } = useQuery({
     queryKey: ["leaderboardScores-" + leaderboard.id, selectedLeaderboardId, currentPage],
     queryFn: () => scoresaberService.lookupLeaderboardScores(selectedLeaderboardId + "", currentPage),
-    staleTime: 30 * 1000, // Cache data for 30 seconds
-    enabled: shouldFetch || isLeaderboardPage,
+    staleTime: 30 * 1000,
+    enabled: (shouldFetch && isLeaderboardPage) || !isLeaderboardPage,
   });
 
   /**
@@ -102,9 +102,9 @@ export default function LeaderboardScores({
    */
   const handleLeaderboardChange = useCallback(
     (id: number) => {
+      setShouldFetch(true);
       setSelectedLeaderboardId(id);
       setCurrentPage(1);
-      setShouldFetch(true);
 
       if (leaderboardChanged) {
         leaderboardChanged(id);

src/components/player/player-scores.tsx

@@ -52,7 +52,7 @@ export default function PlayerScores({ initialScoreData, initialSearch, player,
   const [currentScores, setCurrentScores] = useState<ScoreSaberPlayerScoresPageToken | undefined>(initialScoreData);
   const [searchTerm, setSearchTerm] = useState(initialSearch || "");
   const debouncedSearchTerm = useDebounce(searchTerm, 250);
-  const [shouldFetch, setShouldFetch] = useState(false); // New state to control fetching
+  const [shouldFetch, setShouldFetch] = useState(false);
   const topOfScoresRef = useRef<HTMLDivElement>(null);
 
   const isSearchActive = debouncedSearchTerm.length >= 3;
@@ -71,7 +71,7 @@ export default function PlayerScores({ initialScoreData, initialSearch, player,
       });
     },
     staleTime: 30 * 1000, // 30 seconds
-    enabled: shouldFetch && (debouncedSearchTerm.length >= 3 || debouncedSearchTerm.length === 0), // Only enable if we set shouldFetch to true
+    enabled: shouldFetch && (debouncedSearchTerm.length >= 3 || debouncedSearchTerm.length === 0),
   });
 
   /**