the flow we just created is not showing up

src/app/admin/flows/[id]/page.tsx

@@ -2,7 +2,7 @@
 'use client';
 
 import { useEffect, useState } from 'react';
-import { useFormState } from 'react-dom';
+import { useFormState, useFormStatus } from 'react-dom';
 import { getFlow, saveFlow, type Flow } from '@/lib/actions/flows';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
@@ -19,9 +19,10 @@ interface FlowFormPageProps {
 }
 
 function SubmitButton({ isNew }: { isNew: boolean }) {
+  const { pending } = useFormStatus();
   return (
-    <Button type="submit">
-      {isNew ? 'Create Flow' : 'Save Changes'}
+    <Button type="submit" disabled={pending}>
+      {pending ? (isNew ? 'Creating...' : 'Saving...') : (isNew ? 'Create Flow' : 'Save Changes')}
     </Button>
   );
 }
@@ -49,11 +50,11 @@ export default function FlowFormPage({ params }: FlowFormPageProps) {
   }, [params.id, isNew]);
   
   useEffect(() => {
-    if (state.message) {
+    if (state.message && !state.success) {
       toast({
-        title: state.success ? 'Success!' : 'Error',
+        title: 'Error',
         description: state.message,
-        variant: state.success ? 'default' : 'destructive',
+        variant: 'destructive',
       });
     }
   }, [state, toast]);
@@ -87,6 +88,10 @@ export default function FlowFormPage({ params }: FlowFormPageProps) {
     )
   }
 
+  const getError = (field: string) => {
+    return state.errors?.find(e => e.path?.[0] === field)?.message;
+  }
+
   return (
     <form action={formAction} className="space-y-8">
       <div className="flex items-center gap-4">
@@ -113,17 +118,17 @@ export default function FlowFormPage({ params }: FlowFormPageProps) {
           <div className="space-y-2">
             <Label htmlFor="name">Flow Name</Label>
             <Input id="name" name="name" defaultValue={flow?.name} required />
-            {state.errors?.name && <p className="text-sm text-destructive">{state.errors.name[0]}</p>}
+            {getError('name') && <p className="text-sm text-destructive">{getError('name')}</p>}
           </div>
           <div className="space-y-2">
             <Label htmlFor="path">Path</Label>
             <Input id="path" name="path" defaultValue={flow?.path} placeholder="/my-cool-flow" required />
-            {state.errors?.path && <p className="text-sm text-destructive">{state.errors.path[0]}</p>}
+            {getError('path') && <p className="text-sm text-destructive">{getError('path')}</p>}
           </div>
           <div className="space-y-2">
             <Label htmlFor="description">Description</Label>
             <Textarea id="description" name="description" defaultValue={flow?.description || ''} placeholder="A brief description of what this flow does." />
-             {state.errors?.description && <p className="text-sm text-destructive">{state.errors.description[0]}</p>}
+             {getError('description') && <p className="text-sm text-destructive">{getError('description')}</p>}
           </div>
         </CardContent>
       </Card>