made bundle size smaller and added hover text to date set on a score

src/components/player/PlayerInfo.tsx

@@ -19,8 +19,8 @@ import { useStore } from "zustand";
 import Avatar from "../Avatar";
 import Card from "../Card";
 import Label from "../Label";
-import PlayerChart from "./PlayerChart";
 
+const PlayerChart = dynamic(() => import("./PlayerChart"));
 const ReactCountryFlag = dynamic(() => import("react-country-flag"));
 
 type PlayerInfoProps = {

src/components/player/Score.tsx

@@ -2,13 +2,13 @@ import { ScoresaberLeaderboardInfo } from "@/schemas/scoresaber/leaderboard";
 import { ScoresaberPlayer } from "@/schemas/scoresaber/player";
 import { ScoresaberScore } from "@/schemas/scoresaber/score";
 import { formatNumber } from "@/utils/number";
+import { formatDate, formatTimeAgo } from "@/utils/timeUtils";
 import {
   CheckIcon,
   GlobeAsiaAustraliaIcon,
   XMarkIcon,
 } from "@heroicons/react/20/solid";
 import clsx from "clsx";
-import moment from "moment";
 import Image from "next/image";
 import ScoreStatLabel from "./ScoreStatLabel";
 
@@ -28,8 +28,11 @@ export default function Score({ score, player, leaderboard }: ScoreProps) {
           <GlobeAsiaAustraliaIcon width={20} height={20} />
           <p>#{score.rank}</p>
         </div>
-        <p className="hidden text-sm text-gray-200 md:block">
-          {moment(score.timeSet).fromNow()}
+        <p
+          className="hidden text-sm text-gray-200 md:block"
+          title={formatDate(score.timeSet)}
+        >
+          {formatTimeAgo(score.timeSet)}
         </p>
       </div>
       {/* Song Image */}
@@ -60,9 +63,11 @@ export default function Score({ score, player, leaderboard }: ScoreProps) {
 
           {/* Time Set (Mobile) */}
           <div>
-            {" "}
-            <p className="block text-sm text-gray-200 md:hidden">
-              {moment(score.timeSet).fromNow()}
+            <p
+              className="block text-sm text-gray-200 md:hidden"
+              title={formatDate(score.timeSet)}
+            >
+              {formatTimeAgo(score.timeSet)}
             </p>
           </div>
         </div>

src/store/scoresaberScoresStore.ts

@@ -3,7 +3,6 @@
 import { ScoresaberPlayer } from "@/schemas/scoresaber/player";
 import { ScoresaberSmallerPlayerScore } from "@/schemas/scoresaber/smaller/smallerPlayerScore";
 import { ScoreSaberAPI } from "@/utils/scoresaber/api";
-import moment from "moment";
 import { toast } from "react-toastify";
 import { create } from "zustand";
 import { createJSONStorage, persist } from "zustand/middleware";
@@ -215,8 +214,8 @@ export const useScoresaberScoresStore = create<ScoreSaberScoresStore>()(
         if (timeUntilRefreshMs > 0) {
           console.log(
             "Waiting",
-            moment.duration(timeUntilRefreshMs).humanize(),
-            "to refresh scores for players",
+            timeUntilRefreshMs / 1000,
+            "seconds to refresh scores for players",
           );
           setTimeout(
             () => useScoresaberScoresStore.getState().updatePlayerScores(),

src/store/settingsStore.ts

@@ -3,7 +3,6 @@
 import { ScoresaberPlayer } from "@/schemas/scoresaber/player";
 import { SortType, SortTypes } from "@/types/SortTypes";
 import { ScoreSaberAPI } from "@/utils/scoresaber/api";
-import moment from "moment";
 import { create } from "zustand";
 import { createJSONStorage, persist } from "zustand/middleware";
 
@@ -81,7 +80,7 @@ export const useSettingsStore = create<SettingsStore>()(
         if (timeUntilRefreshMs > 0) {
           console.log(
             "Waiting",
-            moment.duration(timeUntilRefreshMs).humanize(),
+            timeUntilRefreshMs / 1000,
             "to refresh profiles",
           );
           setTimeout(() => this.refreshProfiles(), timeUntilRefreshMs);

src/utils/timeUtils.ts

@@ -0,0 +1,40 @@
+import { formatDistanceToNow, parseISO } from "date-fns";
+
+/**
+ * Formats a timestamp to a human readable format
+ * eg: 1 minute ago, 2 hours ago, 3 days ago
+ *
+ * @param timestamp the timestamp to format
+ * @returns the formatted timestamp
+ */
+export function formatTimeAgo(timestamp: string) {
+  const date = parseISO(timestamp);
+  const now = new Date();
+  if (date > now) {
+    return "just now";
+  }
+
+  const timeDifference = formatDistanceToNow(date);
+  if (timeDifference === "less than a minute") {
+    return "just now";
+  } else {
+    return `${timeDifference.replace("about", "").replace("almost", "")} ago`;
+  }
+}
+
+/**
+ * Formats a timestamp to a human readable format
+ *
+ * @param timestamp the timestamp to format
+ * @returns the formatted timestamp
+ */
+export function formatDate(timestamp: string) {
+  const date = parseISO(timestamp);
+  return date.toLocaleDateString("en-US", {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+    hour: "numeric",
+    minute: "numeric",
+  });
+}