dynamic import some components to make the bundle size smaller

src/components/Spinner.tsx

@@ -1,4 +1,4 @@
-export function Spinner() {
+export default function Spinner() {
   return (
     <>
       <svg

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;

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;
 };

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;

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,

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,

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;