Loading screens & layouts

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>
+  )
+}