add animation to the score leaderboard and clean it up a bit

src/components/leaderboard/leaderboard-player.tsx

@@ -13,7 +13,7 @@ export default function LeaderboardPlayer({ score }: Props) {
     <div className="flex gap-2">
       <Image
         unoptimized
-        src={player.profilePicture}
+        src={`https://img.fascinated.cc/upload/w_48,h_48/${player.profilePicture}`}
         width={48}
         height={48}
         alt="Song Artwork"

src/components/leaderboard/leaderboard-score.tsx

@@ -20,10 +20,12 @@ type Props = {
 
 export default function LeaderboardScore({ score, leaderboard }: Props) {
   return (
-    <div className="grid items-center w-full pb-2 pt-2 gap-2 lg:gap-0 first:pt-0 last:pb-0 grid-cols-[20px 1fr_1fr] lg:grid-cols-[130px_4fr_300px]">
+    <div className="pb-1 pt-1">
-      <ScoreRankInfo score={score} />
+      <div className="grid items-center w-full gap-2 first:pt-0 last:pb-0 grid-cols-[20px 1fr_1fr] lg:grid-cols-[130px_4fr_300px]">
-      <LeaderboardPlayer score={score} />
+        <ScoreRankInfo score={score} />
-      <LeaderboardScoreStats score={score} leaderboard={leaderboard} />
+        <LeaderboardPlayer score={score} />
+        <LeaderboardScoreStats score={score} leaderboard={leaderboard} />
+      </div>
     </div>
   );
 }

src/components/leaderboard/leaderboard-scores.tsx

@@ -5,11 +5,12 @@ import ScoreSaberLeaderboardToken from "@/common/model/token/scoresaber/score-sa
 import ScoreSaberLeaderboardScoresPageToken from "@/common/model/token/scoresaber/score-saber-leaderboard-scores-page-token";
 import useWindowDimensions from "@/hooks/use-window-dimensions";
 import { useQuery } from "@tanstack/react-query";
-import { motion } from "framer-motion";
+import { motion, useAnimation, Variants } from "framer-motion";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import Card from "../card";
 import Pagination from "../input/pagination";
 import LeaderboardScore from "./leaderboard-score";
+import { scoreAnimation } from "@/components/score/score-animation";
 
 type Props = {
   leaderboard: ScoreSaberLeaderboardToken;
@@ -17,9 +18,12 @@ type Props = {
 
 export default function LeaderboardScores({ leaderboard }: Props) {
   const { width } = useWindowDimensions();
+  const controls = useAnimation();
 
+  const [previousPage, setPreviousPage] = useState(1);
   const [currentPage, setCurrentPage] = useState(1);
   const [currentScores, setCurrentScores] = useState<ScoreSaberLeaderboardScoresPageToken | undefined>();
+  const topOfScoresRef = useRef<HTMLDivElement>(null);
 
   const {
     data: scores,
@@ -32,16 +36,45 @@ export default function LeaderboardScores({ leaderboard }: Props) {
     staleTime: 30 * 1000, // Cache data for 30 seconds
   });
 
+  /**
+   * Starts the animation for the scores.
+   */
+  const handleScoreAnimation = useCallback(async () => {
+    await controls.start(previousPage >= currentPage ? "hiddenRight" : "hiddenLeft");
+    setCurrentScores(scores);
+    await controls.start("visible");
+  }, [controls, currentPage, previousPage, scores]);
+
+  /**
+   * Set the current scores.
+   */
   useEffect(() => {
     if (scores) {
-      setCurrentScores(scores);
+      handleScoreAnimation();
     }
-  }, [scores]);
+  }, [scores, handleScoreAnimation]);
 
+  /**
+   * Handle page change.
+   */
   useEffect(() => {
     refetch();
   }, [leaderboard, currentPage, refetch]);
 
+  /**
+   * Handle scrolling to the top of the
+   * scores when new scores are loaded.
+   */
+  useEffect(() => {
+    if (topOfScoresRef.current) {
+      const topOfScoresPosition = topOfScoresRef.current.getBoundingClientRect().top + window.scrollY;
+      window.scrollTo({
+        top: topOfScoresPosition - 75, // Navbar height (plus some padding)
+        behavior: "smooth",
+      });
+    }
+  }, [currentPage, topOfScoresRef]);
+
   if (currentScores === undefined) {
     return undefined;
   }
@@ -49,23 +82,36 @@ export default function LeaderboardScores({ leaderboard }: Props) {
   return (
     <motion.div initial={{ opacity: 0, y: -50 }} exit={{ opacity: 0, y: -50 }} animate={{ opacity: 1, y: 0 }}>
       <Card className="flex gap-2 border border-input mt-2">
+        {/* Where to scroll to when new scores are loaded */}
+        <div ref={topOfScoresRef} className="absolute" />
+
         <div className="text-center">
           {isError && <p>Oopsies! Something went wrong.</p>}
           {currentScores.scores.length === 0 && <p>No scores found. Invalid Page?</p>}
         </div>
 
-        <div className="grid min-w-full grid-cols-1 divide-y divide-border">
+        <motion.div
+          initial="hidden"
+          animate={controls}
+          variants={scoreAnimation}
+          className="grid min-w-full grid-cols-1 divide-y divide-border"
+        >
           {currentScores.scores.map((playerScore, index) => (
-            <LeaderboardScore key={index} score={playerScore} leaderboard={leaderboard} />
+            <motion.div key={index} variants={scoreAnimation}>
+              <LeaderboardScore key={index} score={playerScore} leaderboard={leaderboard} />
+            </motion.div>
           ))}
-        </div>
+        </motion.div>
 
         <Pagination
           mobilePagination={width < 768}
           page={currentPage}
           totalPages={Math.ceil(currentScores.metadata.total / currentScores.metadata.itemsPerPage)}
           loadingPage={isLoading ? currentPage : undefined}
-          onPageChange={setCurrentPage}
+          onPageChange={newPage => {
+            setCurrentPage(newPage);
+            setPreviousPage(currentPage);
+          }}
         />
       </Card>
     </motion.div>

src/components/player/player-scores.tsx

@@ -15,6 +15,7 @@ import { scoresaberService } from "@/common/service/impl/scoresaber";
 import { Input } from "@/components/ui/input";
 import { clsx } from "clsx";
 import { useDebounce } from "@uidotdev/usehooks";
+import { scoreAnimation } from "@/components/score/score-animation";
 
 type Props = {
   initialScoreData?: ScoreSaberPlayerScoresPageToken;
@@ -42,12 +43,6 @@ const scoreSort = [
   },
 ];
 
-const scoreAnimation: Variants = {
-  hiddenRight: { opacity: 0, x: 50 },
-  hiddenLeft: { opacity: 0, x: -50 },
-  visible: { opacity: 1, x: 0, transition: { staggerChildren: 0.03 } },
-};
-
 export default function PlayerScores({ initialScoreData, initialSearch, player, sort, page }: Props) {
   const { width } = useWindowDimensions();
   const controls = useAnimation();
@@ -156,7 +151,7 @@ export default function PlayerScores({ initialScoreData, initialSearch, player,
     <Card className="flex gap-1">
       <div className="flex flex-col items-center w-full gap-2 relative">
         {/* Where to scroll to when new scores are loaded */}
-        <div ref={topOfScoresRef} className="absolute flex h-11 p-11" />
+        <div ref={topOfScoresRef} className="absolute" />
 
         <div className="flex gap-2">
           {scoreSort.map(sortOption => (

src/components/score/score-animation.tsx

@@ -0,0 +1,10 @@
+import { Variants } from "framer-motion";
+
+/**
+ * The animation values for the score slide in animation.
+ */
+export const scoreAnimation: Variants = {
+  hiddenRight: { opacity: 0, x: 50 },
+  hiddenLeft: { opacity: 0, x: -50 },
+  visible: { opacity: 1, x: 0, transition: { staggerChildren: 0.03 } },
+};