Better loading behavior

9 files changed, 22 insertions, 48 deletions

diff --git a/src/app/groups/[groupId]/edit/page.tsx b/src/app/groups/[groupId]/edit/page.tsx
index 23bd865..f902428 100644
--- a/src/app/groups/[groupId]/edit/page.tsx
+++ b/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} />
 }
diff --git a/src/app/groups/[groupId]/expenses/[expenseId]/edit/loading.tsx b/src/app/groups/[groupId]/expenses/[expenseId]/edit/loading.tsx
deleted file mode 100644
index 2b6ca56..0000000
--- a/src/app/groups/[groupId]/expenses/[expenseId]/edit/loading.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export default function Loading() {
-  return <p>Loading…</p>
-}
diff --git a/src/app/groups/[groupId]/expenses/[expenseId]/edit/page.tsx b/src/app/groups/[groupId]/expenses/[expenseId]/edit/page.tsx
index f22ac08..934d346 100644
--- a/src/app/groups/[groupId]/expenses/[expenseId]/edit/page.tsx
+++ b/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}
+    />
   )
 }
diff --git a/src/app/groups/[groupId]/layout.tsx b/src/app/groups/[groupId]/layout.tsx
index f8030c6..438afea 100644
--- a/src/app/groups/[groupId]/layout.tsx
+++ b/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>
+    </>
   )
 }
diff --git a/src/app/groups/[groupId]/loading.tsx b/src/app/groups/[groupId]/loading.tsx
deleted file mode 100644
index 2b6ca56..0000000
--- a/src/app/groups/[groupId]/loading.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export default function Loading() {
-  return <p>Loading…</p>
-}
diff --git a/src/app/groups/layout.tsx b/src/app/groups/layout.tsx
new file mode 100644
index 0000000..d8aff39
--- /dev/null
+++ b/src/app/groups/layout.tsx
@@ -0,0 +1,5 @@
+import { PropsWithChildren } from 'react'
+
+export default function GroupsLayout({ children }: PropsWithChildren<{}>) {
+  return <main>{children}</main>
+}
diff --git a/src/app/groups/loading.tsx b/src/app/groups/loading.tsx
deleted file mode 100644
index 2b6ca56..0000000
--- a/src/app/groups/loading.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export default function Loading() {
-  return <p>Loading…</p>
-}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 4a83b57..7694327 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,3 +1,4 @@
+import { ProgressBar } from '@/components/progress-bar'
 import type { Metadata } from 'next'
 import './globals.css'
 
@@ -14,6 +15,7 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body>
+        <ProgressBar />
         <div className="max-w-screen-md mx-auto p-4">{children}</div>
       </body>
     </html>
diff --git a/src/app/loading.tsx b/src/app/loading.tsx
deleted file mode 100644
index 2b6ca56..0000000
--- a/src/app/loading.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export default function Loading() {
-  return <p>Loading…</p>
-}