perf(global): add Suspense

app/(main)/page.tsx

@@ -1,5 +1,9 @@
 import ServerList from "@/components/ServerList";
 import ServerOverview from "@/components/ServerOverview";
+import { Loader } from "@/components/loading/Loader";
+import { ServerStackIcon } from "@heroicons/react/20/solid";
+import Link from "next/link";
+import { Suspense } from "react";
 
 import ServerGlobal from "./ClientComponents/Global";
 
@@ -13,7 +17,26 @@ export default async function Home({
     <div className="mx-auto grid w-full max-w-5xl gap-4 md:gap-6">
       <ServerOverview />
       {!global && <ServerList />}
-      {global && <ServerGlobal />}
+      {global && (
+        <Suspense
+          fallback={
+            <section className="flex flex-col gap-4 mt-[3.2px]">
+              <Link
+                href={`/`}
+                className="rounded-[50px] w-fit bg-stone-100 p-[10px] transition-all hover:bg-stone-200 dark:hover:bg-stone-700 dark:bg-stone-800"
+              >
+                <ServerStackIcon className="size-4" />
+              </Link>
+              <div className="flex min-h-40 flex-col items-center justify-center font-medium text-sm">
+                Loading...
+                <Loader visible={true} />
+              </div>
+            </section>
+          }
+        >
+          <ServerGlobal />
+        </Suspense>
+      )}
     </div>
   );
 }