From fb0e8a7ea1be5b999ac509a3478bdc0fc6d58555 Mon Sep 17 00:00:00 2001
From: Liam <liam@fascinated.cc>
Date: Wed, 8 Nov 2023 09:55:20 +0000
Subject: [PATCH] lazy load some components

---
 next.config.js                             |  7 ++++++-
 src/app/player/[id]/[sort]/[page]/page.tsx | 11 +++++++++--
 src/components/player/PlayerInfo.tsx       | 21 ++++++++++++++++++---
 3 files changed, 33 insertions(+), 6 deletions(-)

diff --git a/next.config.js b/next.config.js
index a499789..12b2906 100644
--- a/next.config.js
+++ b/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");
 
diff --git a/src/app/player/[id]/[sort]/[page]/page.tsx b/src/app/player/[id]/[sort]/[page]/page.tsx
index 3ee6b44..6d6d543 100644
--- a/src/app/player/[id]/[sort]/[page]/page.tsx
+++ b/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">
-            <PlayerChart scoresaber={player} />
+            <Fragment>
+              <Suspense>
+                <PlayerChart scoresaber={player} />
+              </Suspense>
+            </Fragment>
           </div>
         </Card>
         <Scores
diff --git a/src/components/player/PlayerInfo.tsx b/src/components/player/PlayerInfo.tsx
index 4d54755..9df992c 100644
--- a/src/components/player/PlayerInfo.tsx
+++ b/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">
-            <PlayerSettingsButtons playerData={playerData} />
+            <Fragment>
+              <Suspense>
+                <PlayerSettingsButtons playerData={playerData} />
+              </Suspense>
+            </Fragment>
           </div>
         </div>
 
@@ -125,7 +136,11 @@ export default function PlayerInfo({ playerData }: PlayerInfoProps) {
               value={formatNumber(scoreStats.replaysWatched)}
             />
 
-            <PlayerInfoExtraLabels playerId={playerData.id} />
+            <Fragment>
+              <Suspense>
+                <PlayerInfoExtraLabels playerId={playerData.id} />
+              </Suspense>
+            </Fragment>
           </div>
         </div>
       </div>