[web] Loading button component (#3612)

web/apps/photos/src/components/Upload/UploadTypeSelector.tsx

@@ -1,7 +1,7 @@
 import { useIsTouchscreen } from "@/base/hooks";
-import { FocusVisibleButton } from "@/new/photos/components/FocusVisibleButton";
 import { SpaceBetweenFlex } from "@/new/photos/components/mui";
 import { DialogCloseIconButton } from "@/new/photos/components/mui/Dialog";
+import { FocusVisibleButton } from "@/new/photos/components/mui/FocusVisibleButton";
 import DialogTitleWithCloseButton, {
     dialogCloseHandler,
 } from "@ente/shared/components/DialogBox/TitleWithCloseButton";

web/packages/new/photos/components/CollectionMappingChoiceDialog.tsx

@@ -1,5 +1,4 @@
 import type { CollectionMapping } from "@/base/types/ipc";
-import { FocusVisibleButton } from "@/new/photos/components/FocusVisibleButton";
 import FolderIcon from "@mui/icons-material/Folder";
 import FolderCopyIcon from "@mui/icons-material/FolderCopy";
 import {
@@ -16,6 +15,7 @@ import {
     DialogCloseIconButton,
     type DialogVisibilityProps,
 } from "./mui/Dialog";
+import { FocusVisibleButton } from "./mui/FocusVisibleButton";
 
 type CollectionMappingChoiceModalProps = DialogVisibilityProps & {
     didSelect: (mapping: CollectionMapping) => void;

web/packages/new/photos/components/DevSettings.tsx

@@ -18,7 +18,7 @@ import { useFormik } from "formik";
 import { t } from "i18next";
 import React, { useEffect, useState } from "react";
 import { z } from "zod";
-import { FocusVisibleButton } from "./FocusVisibleButton";
+import { FocusVisibleButton } from "./mui/FocusVisibleButton";
 import { SlideUpTransition } from "./mui/SlideUpTransition";
 
 interface DevSettingsProps {

web/packages/new/photos/components/SingleInputFormV2.tsx

@@ -2,7 +2,6 @@ import log from "@/base/log";
 import { wait } from "@/utils/promise";
 import {
     Box,
-    CircularProgress,
     Dialog,
     DialogContent,
     DialogTitle,
@@ -12,8 +11,9 @@ import {
 import { useFormik } from "formik";
 import { t } from "i18next";
 import React from "react";
-import { FocusVisibleButton } from "./FocusVisibleButton";
 import type { DialogVisibilityProps } from "./mui/Dialog";
+import { FocusVisibleButton } from "./mui/FocusVisibleButton";
+import { LoadingButton } from "./mui/LoadingButton";
 
 type SingleInputFormProps = Pick<
     TextFieldProps,
@@ -109,24 +109,14 @@ 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>
     );
@@ -169,6 +159,7 @@ export const SingleInputDialogTest: React.FC<DialogVisibilityProps> = ({
                     autoFocus
                     label="Add name"
                     placeholder="Enter name"
+                    initialValue="tt"
                     submitButtonTitle="Add person"
                     onCancel={onClose}
                     onSubmit={handleSubmit}

web/packages/new/photos/components/WhatsNew.tsx

@@ -14,7 +14,7 @@ import {
 } from "@mui/material";
 import React, { useEffect } from "react";
 import { didShowWhatsNew } from "../services/changelog";
-import { FocusVisibleButton } from "./FocusVisibleButton";
+import { FocusVisibleButton } from "./mui/FocusVisibleButton";
 import { SlideUpTransition } from "./mui/SlideUpTransition";
 
 interface WhatsNewProps {

web/packages/new/photos/components/mui/LoadingButton.tsx

@@ -0,0 +1,37 @@
+import { CircularProgress, type ButtonProps } from "@mui/material";
+import React from "react";
+import { FocusVisibleButton } from "./FocusVisibleButton";
+
+/**
+ * A button that shows a indeterminate progress indicator if the {@link loading}
+ * prop is set.
+ *
+ * The button is also disabled when in the loading state.
+ *
+ * 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: `${color}.main`,
+                color: `${color}.contrastText`,
+            },
+            ...sx,
+        }}
+        {...rest}
+    >
+        {loading ? <CircularProgress size={20} /> : children}
+    </FocusVisibleButton>
+);

web/packages/shared/components/DialogBox/index.tsx

@@ -1,4 +1,4 @@
-import { FocusVisibleButton } from "@/new/photos/components/FocusVisibleButton";
+import { FocusVisibleButton } from "@/new/photos/components/mui/FocusVisibleButton";
 import {
     Breakpoint,
     DialogActions,