From 86cfa7686f9afa8dbec47a0c16119fb8449c717c Mon Sep 17 00:00:00 2001
From: Liam <liam@fascinated.cc>
Date: Mon, 23 Oct 2023 08:07:47 +0100
Subject: [PATCH] dynamic import some components to make the bundle size
 smaller

---
 src/components/Spinner.tsx                    | 2 +-
 src/components/player/GlobalRanking.tsx       | 8 +++++---
 src/components/player/PlayerInfo.tsx          | 4 +++-
 src/components/player/PlayerPage.tsx          | 8 +++++---
 src/components/player/PlayerRanking.tsx       | 6 ++++--
 src/components/player/PlayerRankingMobile.tsx | 4 +++-
 src/components/player/Scores.tsx              | 4 +++-
 7 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/src/components/Spinner.tsx b/src/components/Spinner.tsx
index 0271dd6..0311eaf 100644
--- a/src/components/Spinner.tsx
+++ b/src/components/Spinner.tsx
@@ -1,4 +1,4 @@
-export function Spinner() {
+export default function Spinner() {
   return (
     <>
       <svg
diff --git a/src/components/player/GlobalRanking.tsx b/src/components/player/GlobalRanking.tsx
index d0ae7c6..3b3c280 100644
--- a/src/components/player/GlobalRanking.tsx
+++ b/src/components/player/GlobalRanking.tsx
@@ -3,18 +3,20 @@
 import { ScoresaberPlayer } from "@/schemas/scoresaber/player";
 import { ScoreSaberAPI } from "@/utils/scoresaber/api";
 import { normalizedRegionName } from "@/utils/utils";
+import dynamic from "next/dynamic";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useCallback, useEffect, useState } from "react";
-import ReactCountryFlag from "react-country-flag";
 import Card from "../Card";
 import Container from "../Container";
-import Error from "../Error";
 import Pagination from "../Pagination";
-import { Spinner } from "../Spinner";
+import Spinner from "../Spinner";
 import PlayerRanking from "./PlayerRanking";
 import PlayerRankingMobile from "./PlayerRankingMobile";
 
+const ReactCountryFlag = dynamic(() => import("react-country-flag"));
+const Error = dynamic(() => import("@/components/Error"));
+
 type PageInfo = {
   loading: boolean;
   page: number;
diff --git a/src/components/player/PlayerInfo.tsx b/src/components/player/PlayerInfo.tsx
index 6ca7059..4c2337c 100644
--- a/src/components/player/PlayerInfo.tsx
+++ b/src/components/player/PlayerInfo.tsx
@@ -12,8 +12,8 @@ import {
   HomeIcon,
   UserIcon,
 } from "@heroicons/react/20/solid";
+import dynamic from "next/dynamic";
 import { useRef } from "react";
-import ReactCountryFlag from "react-country-flag";
 import { toast } from "react-toastify";
 import { useStore } from "zustand";
 import Avatar from "../Avatar";
@@ -21,6 +21,8 @@ import Card from "../Card";
 import Label from "../Label";
 import PlayerChart from "./PlayerChart";
 
+const ReactCountryFlag = dynamic(() => import("react-country-flag"));
+
 type PlayerInfoProps = {
   playerData: ScoresaberPlayer;
 };
diff --git a/src/components/player/PlayerPage.tsx b/src/components/player/PlayerPage.tsx
index 2c74b89..da6c3fe 100644
--- a/src/components/player/PlayerPage.tsx
+++ b/src/components/player/PlayerPage.tsx
@@ -2,16 +2,18 @@
 
 import Card from "@/components/Card";
 import Container from "@/components/Container";
-import Error from "@/components/Error";
-import { Spinner } from "@/components/Spinner";
-import PlayerInfo from "@/components/player/PlayerInfo";
+import Spinner from "@/components/Spinner";
 import Scores from "@/components/player/Scores";
 import { ScoresaberPlayer } from "@/schemas/scoresaber/player";
 import { useSettingsStore } from "@/store/settingsStore";
 import { SortType, SortTypes } from "@/types/SortTypes";
 import { ScoreSaberAPI } from "@/utils/scoresaber/api";
+import dynamic from "next/dynamic";
 import { useSearchParams } from "next/navigation";
 import { useEffect, useState } from "react";
+import PlayerInfo from "./PlayerInfo";
+
+const Error = dynamic(() => import("@/components/Error"));
 
 type PlayerInfo = {
   loading: boolean;
diff --git a/src/components/player/PlayerRanking.tsx b/src/components/player/PlayerRanking.tsx
index c9cff22..1f89b1c 100644
--- a/src/components/player/PlayerRanking.tsx
+++ b/src/components/player/PlayerRanking.tsx
@@ -1,16 +1,18 @@
 import { ScoresaberPlayer } from "@/schemas/scoresaber/player";
 import { useSettingsStore } from "@/store/settingsStore";
 import { formatNumber } from "@/utils/number";
+import dynamic from "next/dynamic";
 import Link from "next/link";
-import ReactCountryFlag from "react-country-flag";
 import { useStore } from "zustand";
-import Avatar from "../Avatar";
 
 type PlayerRankingProps = {
   player: ScoresaberPlayer;
   showCountryFlag?: boolean;
 };
 
+const ReactCountryFlag = dynamic(() => import("react-country-flag"));
+const Avatar = dynamic(() => import("@/components/Avatar"));
+
 export default function PlayerRanking({
   player,
   showCountryFlag,
diff --git a/src/components/player/PlayerRankingMobile.tsx b/src/components/player/PlayerRankingMobile.tsx
index e43d273..75e2dbe 100644
--- a/src/components/player/PlayerRankingMobile.tsx
+++ b/src/components/player/PlayerRankingMobile.tsx
@@ -1,7 +1,7 @@
 import { ScoresaberPlayer } from "@/schemas/scoresaber/player";
 import { useSettingsStore } from "@/store/settingsStore";
 import { formatNumber } from "@/utils/number";
-import ReactCountryFlag from "react-country-flag";
+import dynamic from "next/dynamic";
 import { useStore } from "zustand";
 import Avatar from "../Avatar";
 import Label from "../Label";
@@ -11,6 +11,8 @@ type PlayerRankingProps = {
   showCountryFlag?: boolean;
 };
 
+const ReactCountryFlag = dynamic(() => import("react-country-flag"));
+
 export default function PlayerRankingMobile({
   player,
   showCountryFlag = true,
diff --git a/src/components/player/Scores.tsx b/src/components/player/Scores.tsx
index 4077ad0..0b408be 100644
--- a/src/components/player/Scores.tsx
+++ b/src/components/player/Scores.tsx
@@ -3,13 +3,15 @@ import { ScoresaberPlayerScore } from "@/schemas/scoresaber/playerScore";
 import { useSettingsStore } from "@/store/settingsStore";
 import { SortType, SortTypes } from "@/types/SortTypes";
 import { ScoreSaberAPI } from "@/utils/scoresaber/api";
+import dynamic from "next/dynamic";
 import { useRouter } from "next/navigation";
 import { useCallback, useEffect, useState } from "react";
 import Card from "../Card";
 import Pagination from "../Pagination";
-import { Spinner } from "../Spinner";
 import Score from "./Score";
 
+const Spinner = dynamic(() => import("@/components/Spinner"));
+
 type PageInfo = {
   loading: boolean;
   page: number;