Updated layout and added suspense

src/app/(stats)/layout.tsx

@@ -4,19 +4,21 @@ import { Settings } from "lucide-react"
 import Link from "next/link"
 import { ReactNode } from "react"
 
-export default function RootLayout({ children }: Readonly<{ children: ReactNode }>) {
+export default function StatsLayout({ children }: Readonly<{ children: ReactNode }>) {
     return (
         <>
-            <nav className="flex items-center justify-between px-6 py-4 border-b">
-                <Link href="/">
-                    <span className="font-semibold text-lg">Hypixel Stats</span>
-                </Link>
-                <SearchBar navbar />
-                <Button variant="ghost" size="icon" aria-label="Settings">
-                    <Settings className="h-5 w-5" />
-                </Button>
-            </nav>
-            <div>
+            <header className="fixed w-screen bg-background/50 backdrop-blur-sm">
+                <nav className="flex justify-between items-center px-6 border-b h-header">
+                    <Link href="/">
+                        <span className="text-lg font-semibold">Hypixel Stats</span>
+                    </Link>
+                    <SearchBar navbar />
+                    <Button variant="ghost" size="icon" aria-label="Settings">
+                        <Settings className="w-5 h-5" />
+                    </Button>
+                </nav>
+            </header>
+            <div className="pt-header">
                 {children}
             </div>
         </>

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 (

src/app/globals.css

@@ -22,6 +22,11 @@
     --color-mc-white: #FFFFFF;
 }
 
+@theme inline {
+    --spacing-header: 3.75rem;
+    --spacing-content: calc(100vh - var(--spacing-header));
+}
+
 @theme inline {
     --radius-sm: calc(var(--radius) - 4px);
     --radius-md: calc(var(--radius) - 2px);