fix scores flashing no scores found

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

@@ -52,7 +52,7 @@ export default async function Search({ params: { slug } }: Props) {
 
   return (
     <div className="flex flex-col h-full w-full">
-      <PlayerData initalPlayerData={player} initialScoreData={scores} sort={sort} page={page} />
+      <PlayerData initialPlayerData={player} initialScoreData={scores} sort={sort} page={page} />
     </div>
   );
 }

src/components/player/player-data.tsx

@@ -12,13 +12,13 @@ import PlayerScores from "./player-scores";
 const REFRESH_INTERVAL = 5 * 60 * 1000; // 5 minutes
 
 type Props = {
-  initalPlayerData: ScoreSaberPlayer;
+  initialPlayerData: ScoreSaberPlayer;
   initialScoreData?: ScoreSaberPlayerScoresPage;
   sort: ScoreSort;
   page: number;
 };
 
-export default function PlayerData({ initalPlayerData, initialScoreData, sort, page }: Props) {
+export default function PlayerData({ initialPlayerData: initalPlayerData, initialScoreData, sort, page }: Props) {
   let player = initalPlayerData;
   const { data, isLoading, isError } = useQuery({
     queryKey: ["player", player.id],

src/components/player/player-scores.tsx

@@ -27,6 +27,7 @@ export default function PlayerScores({ initialScoreData, player, sort, page }: P
 
   const [currentSort, setCurrentSort] = useState(sort);
   const [currentPage, setCurrentPage] = useState(page);
+  const [currentScores, setCurrentScores] = useState<ScoreSaberPlayerScoresPage | undefined>(initialScoreData);
 
   const {
     data: scores,
@@ -37,7 +38,6 @@ export default function PlayerScores({ initialScoreData, player, sort, page }: P
     queryKey: ["playerScores", player.id, currentSort, currentPage],
     queryFn: () => scoresaberFetcher.lookupPlayerScores(player.id, currentSort, currentPage),
     staleTime: 30 * 1000, // Cache data for 30 seconds
-    initialData: initialScoreData,
   });
 
   const handleAnimation = useCallback(() => {
@@ -45,6 +45,12 @@ export default function PlayerScores({ initialScoreData, player, sort, page }: P
     controls.start({ x: 0, opacity: 1, transition: { duration: 0.25 } });
   }, [controls]);
 
+  useEffect(() => {
+    if (scores) {
+      setCurrentScores(scores);
+    }
+  }, [scores]);
+
   useEffect(() => {
     if (scores) {
       handleAnimation();
@@ -64,18 +70,10 @@ export default function PlayerScores({ initialScoreData, player, sort, page }: P
     }
   };
 
-  if (scores === undefined) {
+  if (currentScores === undefined) {
     return undefined;
   }
 
-  if (isError) {
-    return (
-      <Card className="gap-2">
-        <p>Oopsies! Something went wrong.</p>
-      </Card>
-    );
-  }
-
   return (
     <Card className="flex gap-4">
       <div className="flex items-center flex-row w-full gap-2 justify-center">
@@ -90,9 +88,14 @@ export default function PlayerScores({ initialScoreData, player, sort, page }: P
         ))}
       </div>
 
+      <div className="text-center">
+        {isError && <p>Oopsies! Something went wrong.</p>}
+        {currentScores.playerScores.length === 0 && <p>No scores found. Invalid Page?</p>}
+      </div>
+
       <motion.div animate={controls}>
         <div className="grid min-w-full grid-cols-1 divide-y divide-border">
-          {scores.playerScores.map((playerScore, index) => (
+          {currentScores.playerScores.map((playerScore, index) => (
             <Score key={index} playerScore={playerScore} />
           ))}
         </div>
@@ -101,7 +104,7 @@ export default function PlayerScores({ initialScoreData, player, sort, page }: P
       <Pagination
         mobilePagination={width < 768}
         page={currentPage}
-        totalPages={Math.ceil(scores.metadata.total / scores.metadata.itemsPerPage)}
+        totalPages={Math.ceil(currentScores.metadata.total / currentScores.metadata.itemsPerPage)}
         loadingPage={isLoading ? currentPage : undefined}
         onPageChange={setCurrentPage}
       />