From dfab58ce33503046cbf2c5e69046bf694ff0bae9 Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Mon, 7 Oct 2024 21:05:28 +0530
Subject: [PATCH] Loading button

---
 .../photos/components/SingleInputFormV2.tsx   | 52 ++++++++++++++-----
 1 file changed, 38 insertions(+), 14 deletions(-)

diff --git a/web/packages/new/photos/components/SingleInputFormV2.tsx b/web/packages/new/photos/components/SingleInputFormV2.tsx
index 1caa137090..5e7117e03a 100644
--- a/web/packages/new/photos/components/SingleInputFormV2.tsx
+++ b/web/packages/new/photos/components/SingleInputFormV2.tsx
@@ -7,6 +7,7 @@ import {
     DialogContent,
     DialogTitle,
     TextField,
+    type ButtonProps,
     type TextFieldProps,
 } from "@mui/material";
 import { useFormik } from "formik";
@@ -109,29 +110,51 @@ export const SingleInputFormV2: React.FC<SingleInputFormProps> = ({
                 >
                     {t("cancel")}
                 </FocusVisibleButton>
-                <FocusVisibleButton
+                <LoadingButton
                     size="large"
                     color="accent"
                     type="submit"
-                    disabled={formik.isSubmitting}
-                    sx={{
-                        "&.Mui-disabled": {
-                            backgroundColor: "accent.main",
-                            color: "accent.contrastText",
-                        },
-                    }}
+                    loading={formik.isSubmitting}
                 >
-                    {formik.isSubmitting ? (
-                        <CircularProgress size={20} />
-                    ) : (
-                        submitButtonTitle
-                    )}
-                </FocusVisibleButton>
+                    {submitButtonTitle}
+                </LoadingButton>
             </Box>
         </form>
     );
 };
 
+/**
+ * A button that shows a indeterminate progress indicator if the {@link loading}
+ * prop is set.
+ *
+ * TODO: This duplicates the existing SubmitButton and EnteButton. Merge these
+ * three gradually (didn't want to break existing layouts, so will do it
+ * piecewise).
+ */
+export const LoadingButton: React.FC<ButtonProps & { loading?: boolean }> = ({
+    loading,
+    disabled,
+    color,
+    sx,
+    children,
+    ...rest
+}) => (
+    <FocusVisibleButton
+        {...{ color }}
+        disabled={loading ?? disabled}
+        sx={{
+            "&.Mui-disabled": {
+                backgroundColor: "accent.main",
+                color: "accent.contrastText",
+            },
+            ...sx,
+        }}
+        {...rest}
+    >
+        {loading ? <CircularProgress size={20} /> : children}
+    </FocusVisibleButton>
+);
+
 export const SingleInputDialogTest: React.FC<DialogVisibilityProps> = ({
     open,
     onClose,
@@ -169,6 +192,7 @@ export const SingleInputDialogTest: React.FC<DialogVisibilityProps> = ({
                     autoFocus
                     label="Add name"
                     placeholder="Enter name"
+                    initialValue="tt"
                     submitButtonTitle="Add person"
                     onCancel={onClose}
                     onSubmit={handleSubmit}