Loading screens & layouts

src/components/expense-form.tsx

@@ -1,5 +1,5 @@
 'use client'
-import { Button } from '@/components/ui/button'
+import { SubmitButton } from '@/components/submit-button'
 import {
   Card,
   CardContent,
@@ -175,9 +175,7 @@ export function ExpenseForm({ group, expense, onSubmit }: Props) {
           </CardContent>
 
           <CardFooter>
-            <Button variant="secondary" type="submit">
-              Submit
-            </Button>
+            <SubmitButton loadingContent="Submitting…">Submit</SubmitButton>
           </CardFooter>
         </Card>
       </form>

src/components/group-form.tsx

@@ -1,4 +1,5 @@
 'use client'
+import { SubmitButton } from '@/components/submit-button'
 import { Button } from '@/components/ui/button'
 import {
   Card,
@@ -25,7 +26,7 @@ import { useFieldArray, useForm } from 'react-hook-form'
 
 export type Props = {
   group?: NonNullable<Awaited<ReturnType<typeof getGroup>>>
-  onSubmit: (groupFormValues: GroupFormValues) => void
+  onSubmit: (groupFormValues: GroupFormValues) => Promise<void>
 }
 
 export function GroupForm({ group, onSubmit }: Props) {
@@ -49,8 +50,8 @@ export function GroupForm({ group, onSubmit }: Props) {
   return (
     <Form {...form}>
       <form
-        onSubmit={form.handleSubmit((values) => {
-          onSubmit(values)
+        onSubmit={form.handleSubmit(async (values) => {
+          await onSubmit(values)
         })}
         className="space-y-8"
       >
@@ -129,7 +130,7 @@ export function GroupForm({ group, onSubmit }: Props) {
           </CardFooter>
         </Card>
 
-        <Button type="submit">Submit</Button>
+        <SubmitButton loadingContent="Submitting…">Submit</SubmitButton>
       </form>
     </Form>
   )

src/components/submit-button.tsx

@@ -0,0 +1,23 @@
+import { Button } from '@/components/ui/button'
+import { Loader2 } from 'lucide-react'
+import { PropsWithChildren, ReactNode } from 'react'
+import { useFormState } from 'react-hook-form'
+
+type Props = PropsWithChildren<{
+  loadingContent: ReactNode
+}>
+
+export function SubmitButton({ children, loadingContent }: Props) {
+  const { isSubmitting } = useFormState()
+  return (
+    <Button type="submit" disabled={isSubmitting}>
+      {isSubmitting ? (
+        <>
+          <Loader2 className="w-4 h-4 mr-2 animate-spin" /> {loadingContent}
+        </>
+      ) : (
+        children
+      )}
+    </Button>
+  )
+}