refactor: add suspense boundary in sidebar layout

2 files changed, 16 insertions, 42 deletions

diff --git a/apps/web/app/admin/users/page.tsx b/apps/web/app/admin/users/page.tsx
index 5af899a4..3c178e79 100644
--- a/apps/web/app/admin/users/page.tsx
+++ b/apps/web/app/admin/users/page.tsx
@@ -1,5 +1,9 @@
 import type { Metadata } from "next";
+import { Suspense } from "react";
+import InvitesList from "@/components/admin/InvitesList";
+import InvitesListSkeleton from "@/components/admin/InvitesListSkeleton";
 import UserList from "@/components/admin/UserList";
+import UserListSkeleton from "@/components/admin/UserListSkeleton";
 import { useTranslation } from "@/lib/i18n/server";
 
 export async function generateMetadata(): Promise<Metadata> {
@@ -11,5 +15,14 @@ export async function generateMetadata(): Promise<Metadata> {
 }
 
 export default function AdminUsersPage() {
-  return <UserList />;
+  return (
+    <div className="flex flex-col gap-4">
+      <Suspense fallback={<UserListSkeleton />}>
+        <UserList />
+      </Suspense>
+      <Suspense fallback={<InvitesListSkeleton />}>
+        <InvitesList />
+      </Suspense>
+    </div>
+  );
 }
diff --git a/apps/web/app/dashboard/error.tsx b/apps/web/app/dashboard/error.tsx
index 2577d2bf..bf1ae0a0 100644
--- a/apps/web/app/dashboard/error.tsx
+++ b/apps/web/app/dashboard/error.tsx
@@ -1,46 +1,7 @@
 "use client";
 
-import Link from "next/link";
-import { Button } from "@/components/ui/button";
-import { AlertTriangle, Home, RefreshCw } from "lucide-react";
+import ErrorFallback from "@/components/dashboard/ErrorFallback";
 
 export default function Error() {
-  return (
-    <div className="flex flex-1 items-center justify-center rounded-lg bg-slate-50 p-8 shadow-sm dark:bg-slate-700/50 dark:shadow-md">
-      <div className="w-full max-w-md space-y-8 text-center">
-        {/* Error Icon */}
-        <div className="flex justify-center">
-          <div className="flex h-20 w-20 items-center justify-center rounded-full bg-muted">
-            <AlertTriangle className="h-10 w-10 text-muted-foreground" />
-          </div>
-        </div>
-
-        {/* Main Content */}
-        <div className="space-y-4">
-          <h1 className="text-balance text-2xl font-semibold text-foreground">
-            Oops! Something went wrong
-          </h1>
-          <p className="text-pretty leading-relaxed text-muted-foreground">
-            We&apos;re sorry, but an unexpected error occurred. Please try again
-            or contact support if the issue persists.
-          </p>
-        </div>
-
-        {/* Action Buttons */}
-        <div className="space-y-3">
-          <Button className="w-full" onClick={() => window.location.reload()}>
-            <RefreshCw className="mr-2 h-4 w-4" />
-            Try Again
-          </Button>
-
-          <Link href="/" className="block">
-            <Button variant="outline" className="w-full">
-              <Home className="mr-2 h-4 w-4" />
-              Go Home
-            </Button>
-          </Link>
-        </div>
-      </div>
-    </div>
-  );
+  return <ErrorFallback />;
 }