Updated layout and added suspense

src/app/(stats)/player/[ign]/_components/Sidebar.tsx

@@ -1,11 +1,11 @@
 import { Card, CardContent } from "@/components/ui/card"
+import { Separator } from "@/components/ui/separator"
 import { getColor } from "@/data/colors"
 import { formatDate, formatNumber } from "@/lib/formatters"
 import { getGuildMember, getGuildRankTag, getMemberGEXP, getMemberWeeklyGEXP } from "@/lib/hypixel/guild"
 import { getCoinMultiplier, getTotalChallenges, getTotalCoins, getTotalQuests, rewardClaimed } from "@/lib/hypixel/stats"
 import { Guild } from "@/lib/schema/guild"
 import { Player } from "@/lib/schema/player"
-import { Separator } from "@radix-ui/react-separator"
 import Link from "next/link"
 import SocialIcons from "./SocialIcons"
 
@@ -18,7 +18,7 @@ type SidebarProps = {
 
 export default function Sidebar({ level, ign, player, guild }: SidebarProps) {
     return (
-        <Card className="w-1/4">
+        <Card className="overflow-hidden w-1/4 max-h-fit">
             <CardContent>
                 <div className="flex justify-between px-8">
                     <div className="text-center">

src/app/(stats)/player/[ign]/_stats/bedwars/bedwars.tsx

@@ -2,10 +2,10 @@
 
 import { Card, CardContent } from "@/components/ui/card"
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"
+import { Separator } from "@/components/ui/separator"
 import { getBWLevelForExp, getTotalExpForLevel } from "@/lib/hypixel/bedwarsLevel"
 import { getProgress } from "@/lib/hypixel/general"
 import { Player } from "@/lib/schema/player"
-import { Separator } from "@radix-ui/react-separator"
 import { ChevronDown, ChevronUp, Menu } from "lucide-react"
 import { useEffect, useRef, useState } from "react"
 import CollapsedStats from "../../_components/CollapsedStats"

src/app/(stats)/player/[ign]/page.tsx

@@ -3,6 +3,8 @@ import { getGuild } from "@/lib/hypixel/api/guild"
 import { getUuid } from "@/lib/hypixel/api/mojang"
 import { getPlayer } from "@/lib/hypixel/api/player"
 import { getExactLevel } from "@/lib/hypixel/level"
+import { Loader2Icon } from "lucide-react"
+import { Suspense } from "react"
 import Sidebar from "./_components/Sidebar"
 import BedwarsStats from "./_stats/bedwars/bedwars"
 
@@ -11,8 +13,23 @@ export default async function PlayerPage({
 }: {
     params: Promise<{ ign: string }>
 }) {
-    const { ign: pign } = await params
+    const { ign } = await params
 
+    return (
+        <Suspense
+            fallback={
+                <div className="flex flex-col justify-center items-center h-screen">
+                    <Loader2Icon className="animate-spin size-30" />
+                    <p>{`Loading stats for ${ign}`}</p>
+                </div>
+            }
+        >
+            <SuspendedPage ign={ign} />
+        </Suspense>
+    )
+}
+
+async function SuspendedPage({ ign: pign }: { ign: string }) {
     const uuid = await getUuid(pign)
     if (!uuid) {
         return (