perf: lazy load modals

Author: root

apps/web/app/dashboard/groups/[groupId]/page.tsx

@@ -5,6 +5,7 @@ import {
   PaginatedExpensesResponseDto
 } from '@fairshare/shared-types';
 import { notFound } from 'next/navigation';
+import { Suspense } from 'react';
 
 import { DashboardLayout } from '../../../../src/components/layout';
 import { MemberList, ExpenseTable, GroupActions } from '../../../../src/components/groups';
@@ -65,8 +66,12 @@ export default async function GroupDetailPage({ params }: GroupDetailPageProps)
             </div>
 
             <aside className="space-y-10">
-              <MemberList groupId={groupId} members={members} />
-              <GroupActions groupId={groupId} currency={group.currency} members={members} />
+              <Suspense fallback={<div className="h-52 rounded-3xl border border-[var(--fs-border)] bg-[var(--fs-card)] animate-pulse" />}>
+                <MemberList groupId={groupId} members={members} />
+              </Suspense>
+              <Suspense fallback={<div className="h-40 rounded-3xl border border-[var(--fs-border)] bg-[var(--fs-card)] animate-pulse" />}>
+                <GroupActions groupId={groupId} currency={group.currency} members={members} />
+              </Suspense>
             </aside>
           </div>
         </div>

apps/web/src/components/groups/ExpenseRow.tsx

@@ -2,7 +2,12 @@
 
 import { useState } from 'react';
 import { ExpenseDto } from '@fairshare/shared-types';
-import { ReceiptUploadModal } from './ReceiptUploadModal';
+import dynamic from 'next/dynamic';
+
+const ReceiptUploadModal = dynamic(
+  () => import('./ReceiptUploadModal').then((mod) => mod.ReceiptUploadModal),
+  { ssr: false },
+);
 
 export function ExpenseRow({ expense }: { expense: ExpenseDto }) {
   const [open, setOpen] = useState(false);

apps/web/src/components/groups/GroupActions.tsx

@@ -4,7 +4,12 @@ import { useState } from 'react';
 import { useRouter } from 'next/navigation';
 import { GroupMemberSummaryDto } from '@fairshare/shared-types';
 import { PlusCircle } from 'lucide-react';
-import { CreateExpenseModal } from './CreateExpenseModal';
+import dynamic from 'next/dynamic';
+
+const CreateExpenseModal = dynamic(
+  () => import('./CreateExpenseModal').then((mod) => mod.CreateExpenseModal),
+  { ssr: false },
+);
 
 type GroupActionsProps = {
   groupId: string;

apps/web/src/components/groups/MemberList.tsx

@@ -4,9 +4,11 @@ import React, { useState } from 'react';
 import { useRouter } from 'next/navigation';
 import { GroupMemberSummaryDto } from '@fairshare/shared-types';
 import { UserPlus } from 'lucide-react';
-import { InviteModal } from './InviteModal';
+import dynamic from 'next/dynamic';
 import { glassPanel } from '../layout/layoutStyles';
 
+const InviteModal = dynamic(() => import('./InviteModal').then((mod) => mod.InviteModal), { ssr: false });
+
 interface MemberListProps {
   groupId: string;
   members: GroupMemberSummaryDto[];