Loading screens & layouts

1 files changed, 23 insertions, 0 deletions

diff --git a/src/components/submit-button.tsx b/src/components/submit-button.tsx
new file mode 100644
index 0000000..7489c6c
--- /dev/null
+++ b/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>
+  )
+}