lazy load some components

next.config.js

@@ -1,4 +1,7 @@
 const nextBuildId = require("next-build-id");
+const withBundleAnalyzer = require("@next/bundle-analyzer")({
+  enabled: false,
+});
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
@@ -57,7 +60,9 @@ const nextConfig = {
   },
 };
 
-module.exports = nextConfig;
+module.exports = withBundleAnalyzer(nextConfig);
+
+// // Injected content via Sentry wizard below
 
 // const { withSentryConfig } = require("@sentry/nextjs");
 

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

@@ -1,6 +1,5 @@
 import Card from "@/components/Card";
 import Container from "@/components/Container";
-import PlayerChart from "@/components/player/PlayerChart";
 import PlayerInfo from "@/components/player/PlayerInfo";
 import Scores from "@/components/player/Scores";
 import {
@@ -15,7 +14,11 @@ import { ScoreSaberAPI } from "@/utils/scoresaber/api";
 import { normalizedRegionName } from "@/utils/utils";
 import clsx from "clsx";
 import { Metadata } from "next";
+import dynamic from "next/dynamic";
 import Image from "next/image";
+import { Fragment, Suspense } from "react";
+
+const PlayerChart = dynamic(() => import("@/components/player/PlayerChart"));
 
 const DEFAULT_SORT_TYPE = SortTypes.top;
 
@@ -129,7 +132,11 @@ export default async function Player({ params: { id, sort, page } }: Props) {
             })}
           </div>
           <div className="h-[320px] w-full">
+            <Fragment>
+              <Suspense>
                 <PlayerChart scoresaber={player} />
+              </Suspense>
+            </Fragment>
           </div>
         </Card>
         <Scores

src/components/player/PlayerInfo.tsx

@@ -2,12 +2,19 @@ import { ScoresaberPlayer } from "@/schemas/scoresaber/player";
 import { formatNumber } from "@/utils/numberUtils";
 import { normalizedRegionName } from "@/utils/utils";
 import { GlobeAsiaAustraliaIcon } from "@heroicons/react/20/solid";
+import dynamic from "next/dynamic";
+import { Fragment, Suspense } from "react";
 import Avatar from "../Avatar";
 import Card from "../Card";
 import CountyFlag from "../CountryFlag";
 import Label from "../Label";
-import PlayerInfoExtraLabels from "./PlayerInfoExtraLabels";
+
+/**
+ * import PlayerInfoExtraLabels from "./PlayerInfoExtraLabels";
 import PlayerSettingsButtons from "./PlayerSettingsButtons";
+ */
+const PlayerInfoExtraLabels = dynamic(() => import("./PlayerInfoExtraLabels"));
+const PlayerSettingsButtons = dynamic(() => import("./PlayerSettingsButtons"));
 
 type PlayerInfoProps = {
   playerData: ScoresaberPlayer;
@@ -28,7 +35,11 @@ export default function PlayerInfo({ playerData }: PlayerInfoProps) {
 
           {/* Settings Buttons */}
           <div className="absolute right-3 top-20 flex flex-col justify-end gap-2 md:relative md:right-0 md:top-0 md:mt-2 md:flex-row md:justify-center">
+            <Fragment>
+              <Suspense>
                 <PlayerSettingsButtons playerData={playerData} />
+              </Suspense>
+            </Fragment>
           </div>
         </div>
 
@@ -125,7 +136,11 @@ export default function PlayerInfo({ playerData }: PlayerInfoProps) {
               value={formatNumber(scoreStats.replaysWatched)}
             />
 
+            <Fragment>
+              <Suspense>
                 <PlayerInfoExtraLabels playerId={playerData.id} />
+              </Suspense>
+            </Fragment>
           </div>
         </div>
       </div>