Better loading behavior

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

@@ -1,9 +1,6 @@
 import { GroupForm } from '@/components/group-form'
-import { Button } from '@/components/ui/button'
 import { getGroup, updateGroup } from '@/lib/api'
 import { groupFormSchema } from '@/lib/schemas'
-import { ChevronLeft } from 'lucide-react'
-import Link from 'next/link'
 import { notFound, redirect } from 'next/navigation'
 
 export default async function EditGroupPage({
@@ -21,16 +18,5 @@ export default async function EditGroupPage({
     redirect(`/groups/${group.id}`)
   }
 
-  return (
-    <main>
-      <div className="mb-4">
-        <Button variant="ghost" asChild>
-          <Link href={`/groups/${groupId}`}>
-            <ChevronLeft className="w-4 h-4 mr-2" /> Back to group
-          </Link>
-        </Button>
-      </div>
-      <GroupForm group={group} onSubmit={updateGroupAction} />
-    </main>
-  )
+  return <GroupForm group={group} onSubmit={updateGroupAction} />
 }

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

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

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

@@ -1,9 +1,6 @@
 import { ExpenseForm } from '@/components/expense-form'
-import { Button } from '@/components/ui/button'
 import { getExpense, getGroup, updateExpense } from '@/lib/api'
 import { expenseFormSchema } from '@/lib/schemas'
-import { ChevronLeft } from 'lucide-react'
-import Link from 'next/link'
 import { notFound, redirect } from 'next/navigation'
 
 export default async function EditExpensePage({
@@ -24,19 +21,10 @@ export default async function EditExpensePage({
   }
 
   return (
-    <main>
-      <div className="mb-4">
-        <Button variant="ghost" asChild>
-          <Link href={`/groups/${groupId}`}>
-            <ChevronLeft className="w-4 h-4 mr-2" /> Back to group
-          </Link>
-        </Button>
-      </div>
-      <ExpenseForm
-        group={group}
-        expense={expense}
-        onSubmit={updateExpenseAction}
-      />
-    </main>
+    <ExpenseForm
+      group={group}
+      expense={expense}
+      onSubmit={updateExpenseAction}
+    />
   )
 }

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

@@ -15,13 +15,20 @@ export default async function GroupLayout({
   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>
+      </div>
+
+      <div className="flex justify-between items-baseline mb-4">
+        <h1 className="font-bold text-2xl">
+          <Link href={`/groups/${groupId}`}>{group.name}</Link>
+        </h1>
+
         <Button variant="secondary" asChild>
           <Link href={`/groups/${groupId}/edit`}>
             <Edit className="w-4 h-4 mr-2" /> Edit group settings
@@ -29,9 +36,7 @@ export default async function GroupLayout({
         </Button>
       </div>
 
-      <h1 className="font-bold mb-4">{group.name}</h1>
-
       {children}
-    </main>
+    </>
   )
 }

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

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

src/app/groups/layout.tsx

@@ -0,0 +1,5 @@
+import { PropsWithChildren } from 'react'
+
+export default function GroupsLayout({ children }: PropsWithChildren<{}>) {
+  return <main>{children}</main>
+}

src/app/groups/loading.tsx

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