Loading screens & layouts

src/app/groups/[groupId]/expenses/[expenseId]/edit/loading.tsx

@@ -0,0 +1,3 @@
+export default function Loading() {
+  return <p>Loading…</p>
+}

src/app/groups/[groupId]/layout.tsx

@@ -0,0 +1,37 @@
+import { Button } from '@/components/ui/button'
+import { getGroup } from '@/lib/api'
+import { ChevronLeft, Edit } from 'lucide-react'
+import Link from 'next/link'
+import { notFound } from 'next/navigation'
+import { PropsWithChildren } from 'react'
+
+export default async function GroupLayout({
+  children,
+  params: { groupId },
+}: PropsWithChildren<{
+  params: { groupId: string }
+}>) {
+  const group = await getGroup(groupId)
+  if (!group) notFound()
+
+  return (
+    <main>
+      <div className="mb-4 flex justify-between">
+        <Button variant="ghost" asChild>
+          <Link href="/groups">
+            <ChevronLeft className="w-4 h-4 mr-2" /> Back to recent groups
+          </Link>
+        </Button>
+        <Button variant="secondary" asChild>
+          <Link href={`/groups/${groupId}/edit`}>
+            <Edit className="w-4 h-4 mr-2" /> Edit group settings
+          </Link>
+        </Button>
+      </div>
+
+      <h1 className="font-bold mb-4">{group.name}</h1>
+
+      {children}
+    </main>
+  )
+}

src/app/groups/[groupId]/loading.tsx

@@ -0,0 +1,3 @@
+export default function Loading() {
+  return <p>Loading…</p>
+}

src/app/groups/[groupId]/page.tsx

@@ -17,7 +17,7 @@ import {
   TableRow,
 } from '@/components/ui/table'
 import { getGroup, getGroupExpenses } from '@/lib/api'
-import { ChevronLeft, ChevronRight, Edit, Plus } from 'lucide-react'
+import { ChevronRight, Plus } from 'lucide-react'
 import Link from 'next/link'
 import { notFound } from 'next/navigation'
 
@@ -32,22 +32,7 @@ export default async function GroupPage({
   const expenses = await getGroupExpenses(groupId)
 
   return (
-    <main>
-      <div className="mb-4 flex justify-between">
-        <Button variant="ghost" asChild>
-          <Link href="/groups">
-            <ChevronLeft className="w-4 h-4 mr-2" /> Back to recent groups
-          </Link>
-        </Button>
-        <Button variant="secondary" asChild>
-          <Link href={`/groups/${groupId}/edit`}>
-            <Edit className="w-4 h-4 mr-2" /> Edit group settings
-          </Link>
-        </Button>
-      </div>
-
-      <h1 className="font-bold mb-4">{group.name}</h1>
-
+    <>
       <Card className="mb-4">
         <div className="flex flex-1">
           <CardHeader className="flex-1">
@@ -136,6 +121,6 @@ export default async function GroupPage({
         </CardContent>
       </Card>
       <SaveGroupLocally group={{ id: group.id, name: group.name }} />
-    </main>
+    </>
   )
 }

src/app/groups/loading.tsx

@@ -0,0 +1,3 @@
+export default function Loading() {
+  return <p>Loading…</p>
+}