From 3c3d86855c649c85f49c47f688039057ffec4a10 Mon Sep 17 00:00:00 2001
From: Mohamed Bassem <me@mbassem.com>
Date: Mon, 29 Dec 2025 08:56:45 +0000
Subject: refactor: add suspense boundary in sidebar layout

---
 apps/web/components/admin/InvitesList.tsx | 32 +++++++++++++++----------------
 1 file changed, 15 insertions(+), 17 deletions(-)

(limited to 'apps/web/components/admin/InvitesList.tsx')

diff --git a/apps/web/components/admin/InvitesList.tsx b/apps/web/components/admin/InvitesList.tsx
index fdc39798..75d29748 100644
--- a/apps/web/components/admin/InvitesList.tsx
+++ b/apps/web/components/admin/InvitesList.tsx
@@ -3,7 +3,6 @@
 import { ActionButton } from "@/components/ui/action-button";
 import { ButtonWithTooltip } from "@/components/ui/button";
 import { toast } from "@/components/ui/sonner";
-import LoadingSpinner from "@/components/ui/spinner";
 import {
   Table,
   TableBody,
@@ -17,11 +16,12 @@ import { formatDistanceToNow } from "date-fns";
 import { Mail, MailX, UserPlus } from "lucide-react";
 
 import ActionConfirmingDialog from "../ui/action-confirming-dialog";
+import { AdminCard } from "./AdminCard";
 import CreateInviteDialog from "./CreateInviteDialog";
 
 export default function InvitesList() {
   const invalidateInvitesList = api.useUtils().invites.list.invalidate;
-  const { data: invites, isLoading } = api.invites.list.useQuery();
+  const [invites] = api.invites.list.useSuspenseQuery();
 
   const { mutateAsync: revokeInvite, isPending: isRevokePending } =
     api.invites.revoke.useMutation({
@@ -55,10 +55,6 @@ export default function InvitesList() {
       },
     });
 
-  if (isLoading) {
-    return <LoadingSpinner />;
-  }
-
   const activeInvites = invites?.invites || [];
 
   const InviteTable = ({
@@ -139,17 +135,19 @@ export default function InvitesList() {
   );
 
   return (
-    <div className="flex flex-col gap-4">
-      <div className="mb-2 flex items-center justify-between text-xl font-medium">
-        <span>User Invitations ({activeInvites.length})</span>
-        <CreateInviteDialog>
-          <ButtonWithTooltip tooltip="Send Invite" variant="outline">
-            <UserPlus size={16} />
-          </ButtonWithTooltip>
-        </CreateInviteDialog>
-      </div>
+    <AdminCard>
+      <div className="flex flex-col gap-4">
+        <div className="mb-2 flex items-center justify-between text-xl font-medium">
+          <span>User Invitations ({activeInvites.length})</span>
+          <CreateInviteDialog>
+            <ButtonWithTooltip tooltip="Send Invite" variant="outline">
+              <UserPlus size={16} />
+            </ButtonWithTooltip>
+          </CreateInviteDialog>
+        </div>
 
-      <InviteTable invites={activeInvites} title="Invites" />
-    </div>
+        <InviteTable invites={activeInvites} title="Invites" />
+      </div>
+    </AdminCard>
   );
 }
-- 
cgit v1.2.3-70-g09d2