fix(ssr): make the player page less jarring when initally loading

next.config.js

@@ -60,41 +60,41 @@ const nextConfig = {
   },
 };
 
-// module.exports = withBundleAnalyzer(nextConfig);
+module.exports = withBundleAnalyzer(nextConfig);
 
-// // Injected content via Sentry wizard below
+// Injected content via Sentry wizard below
 
-// const { withSentryConfig } = require("@sentry/nextjs");
+const { withSentryConfig } = require("@sentry/nextjs");
 
-// module.exports = withSentryConfig(
+module.exports = withSentryConfig(
-//   module.exports,
+  module.exports,
-//   {
+  {
-//     // For all available options, see:
+    // For all available options, see:
-//     // https://github.com/getsentry/sentry-webpack-plugin#options
+    // https://github.com/getsentry/sentry-webpack-plugin#options
 
-//     // Suppresses source map uploading logs during build
+    // Suppresses source map uploading logs during build
-//     silent: true,
+    silent: true,
-//     org: "sentry",
+    org: "sentry",
-//     project: "scoresaber-reloaded",
+    project: "scoresaber-reloaded",
-//     url: "https://sentry.fascinated.cc/",
+    url: "https://sentry.fascinated.cc/",
-//   },
+  },
-//   {
+  {
-//     // For all available options, see:
+    // For all available options, see:
-//     // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
+    // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
 
-//     // Upload a larger set of source maps for prettier stack traces (increases build time)
+    // Upload a larger set of source maps for prettier stack traces (increases build time)
-//     widenClientFileUpload: false,
+    widenClientFileUpload: false,
 
-//     // Transpiles SDK to be compatible with IE11 (increases bundle size)
+    // Transpiles SDK to be compatible with IE11 (increases bundle size)
-//     transpileClientSDK: false,
+    transpileClientSDK: false,
 
-//     // Routes browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers (increases server load)
+    // Routes browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers (increases server load)
-//     tunnelRoute: "/monitoring",
+    tunnelRoute: "/monitoring",
 
-//     // Hides source maps from generated client bundles
+    // Hides source maps from generated client bundles
-//     hideSourceMaps: true,
+    hideSourceMaps: true,
 
-//     // Automatically tree-shake Sentry logger statements to reduce bundle size
+    // Automatically tree-shake Sentry logger statements to reduce bundle size
-//     disableLogger: true,
+    disableLogger: true,
-//   },
+  },
-// );
+);

src/app/player/[id]/[sort]/[page]/page.tsx

@@ -1,9 +1,25 @@
-import PlayerPage from "@/components/player/PlayerPage";
+import Card from "@/components/Card";
+import Container from "@/components/Container";
+import Spinner from "@/components/Spinner";
+import PlayerChart from "@/components/player/PlayerChart";
+import PlayerInfo from "@/components/player/PlayerInfo";
+import Scores from "@/components/player/Scores";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/Tooltip";
 import ssrSettings from "@/ssrSettings.json";
+import { SortTypes } from "@/types/SortTypes";
 import { formatNumber } from "@/utils/numberUtils";
 import { ScoreSaberAPI } from "@/utils/scoresaber/api";
 import { normalizedRegionName } from "@/utils/utils";
+import clsx from "clsx";
 import { Metadata } from "next";
+import Image from "next/image";
+import { Suspense } from "react";
+
+const DEFAULT_SORT_TYPE = SortTypes.top;
 
 type Props = {
   params: { id: string; sort: string; page: string };
@@ -61,10 +77,61 @@ async function getData(id: string) {
 }
 
 export default async function Player({ params: { id, sort, page } }: Props) {
-  const { data } = await getData(id);
+  const { data: player } = await getData(id);
-  if (!data) {
+  if (!player) {
-    return <div>Player not found</div>;
+    return (
+      <main>
+        <Container>
+          <Card outerClassName="mt-2">
+            <h1 className="text-2xl font-bold">Player not found</h1>
+          </Card>
+        </Container>
+      </main>
+    );
   }
 
-  return <PlayerPage player={data} sort={sort} page={page} />;
+  const sortType = SortTypes[sort] || DEFAULT_SORT_TYPE;
+  const badges = player.badges;
+
+  return (
+    <main>
+      <Container>
+        <PlayerInfo playerData={player} />
+        {/* Chart */}
+        <Card outerClassName="mt-2 min-h-[320px]">
+          {/* Badges */}
+          <div
+            className={clsx(
+              "mb-2 mt-2 flex flex-wrap items-center justify-center gap-2",
+              badges.length > 0 ? "block" : "hidden",
+            )}
+          >
+            {badges.map((badge) => {
+              return (
+                <Tooltip key={badge.image}>
+                  <TooltipTrigger>
+                    <Image
+                      src={badge.image}
+                      alt={badge.description}
+                      width={80}
+                      height={30}
+                    />
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    <p>{badge.description}</p>
+                  </TooltipContent>
+                </Tooltip>
+              );
+            })}
+          </div>
+          <div className="h-[320px] w-full">
+            <Suspense fallback={<Spinner />}>
+              <PlayerChart scoresaber={player} />
+            </Suspense>
+          </div>
+        </Card>
+        <Scores playerData={player} page={Number(page)} sortType={sortType} />
+      </Container>
+    </main>
+  );
 }

src/components/player/PlayerPage.tsx

@@ -1,69 +0,0 @@
-import Card from "@/components/Card";
-import Container from "@/components/Container";
-import Scores from "@/components/player/Scores";
-import { ScoresaberPlayer } from "@/schemas/scoresaber/player";
-import { SortTypes } from "@/types/SortTypes";
-import clsx from "clsx";
-import Image from "next/image";
-import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/Tooltip";
-import PlayerChart from "./PlayerChart";
-import PlayerInfo from "./PlayerInfo";
-
-type PlayerInfo = {
-  loading: boolean;
-  player: ScoresaberPlayer | undefined;
-};
-
-type PlayerPageProps = {
-  player: ScoresaberPlayer;
-  sort: string;
-  page: string;
-};
-
-const DEFAULT_SORT_TYPE = SortTypes.top;
-
-export default function PlayerPage({ player, sort, page }: PlayerPageProps) {
-  const sortType = SortTypes[sort] || DEFAULT_SORT_TYPE;
-
-  const badges = player.badges;
-
-  return (
-    <main>
-      <Container>
-        <PlayerInfo playerData={player} />
-        {/* Chart */}
-        <Card outerClassName="mt-2">
-          {/* Badges */}
-          <div
-            className={clsx(
-              "mb-2 mt-2 flex flex-wrap items-center justify-center gap-2",
-              badges.length > 0 ? "block" : "hidden",
-            )}
-          >
-            {badges.map((badge) => {
-              return (
-                <Tooltip key={badge.image}>
-                  <TooltipTrigger>
-                    <Image
-                      src={badge.image}
-                      alt={badge.description}
-                      width={80}
-                      height={30}
-                    />
-                  </TooltipTrigger>
-                  <TooltipContent>
-                    <p>{badge.description}</p>
-                  </TooltipContent>
-                </Tooltip>
-              );
-            })}
-          </div>
-          <div className="h-[320px] w-full">
-            <PlayerChart scoresaber={player} />
-          </div>
-        </Card>
-        <Scores playerData={player} page={Number(page)} sortType={sortType} />
-      </Container>
-    </main>
-  );
-}

src/components/player/Scores.tsx

@@ -6,6 +6,7 @@ import { useSettingsStore } from "@/store/settingsStore";
 import { SortType, SortTypes } from "@/types/SortTypes";
 import { ScoreSaberAPI } from "@/utils/scoresaber/api";
 import useStore from "@/utils/useStore";
+import clsx from "clsx";
 import dynamic from "next/dynamic";
 import { useCallback, useEffect, useState } from "react";
 import Card from "../Card";
@@ -99,7 +100,13 @@ export default function Scores({ playerData, page, sortType }: ScoresProps) {
   }
 
   return (
-    <Card outerClassName="mt-2" className="w-full items-center md:flex-col">
+    <Card
+      outerClassName="mt-2"
+      className={clsx(
+        "w-full items-center md:flex-col",
+        scores.loading && "min-h-[1050px]",
+      )}
+    >
       {/* Sort */}
       <div className="mb-2 mt-1 w-full text-sm">
         <div className="flex justify-center gap-2">
@@ -124,13 +131,14 @@ export default function Scores({ playerData, page, sortType }: ScoresProps) {
         </div>
       </div>
 
-      <div className="w-full p-1">
+      <div className="flex h-full w-full flex-col items-center justify-center">
         {scores.loading ? (
-          <div className="flex justify-center">
+          <div className="mt-2">
             <Spinner />
           </div>
         ) : (
-          <div className="grid grid-cols-1 divide-y divide-border">
+          <>
+            <div className="grid min-w-full grid-cols-1 divide-y divide-border">
               {!scores.loading && scores.scores.length == 0 ? (
                 <p className="text-red-400">{errorMessage}</p>
               ) : (
@@ -149,11 +157,7 @@ export default function Scores({ playerData, page, sortType }: ScoresProps) {
                 })
               )}
             </div>
-        )}
-      </div>
-
             {/* Pagination */}
-      <div>
             <div className="pt-3">
               <Pagination
                 currentPage={scores.page}
@@ -163,6 +167,8 @@ export default function Scores({ playerData, page, sortType }: ScoresProps) {
                 }}
               />
             </div>
+          </>
+        )}
       </div>
     </Card>
   );