[MergeStep] Convert Save&Continue Button to LoadingButton

Prevent clicking button twice
sillsdev · Aug 4, 2022 · d8bc7ce · d8bc7ce
1 parent ea05947
commit d8bc7ce
Showing 1 changed file with 27 additions and 9 deletions.
diff --git a/src/goals/MergeDupGoal/MergeDupStep/MergeDupStepComponent.tsx b/src/goals/MergeDupGoal/MergeDupStep/MergeDupStepComponent.tsx
@@ -2,6 +2,7 @@ import { Button, Grid, ImageList, Typography } from "@material-ui/core";
 import React, { ReactElement } from "react";
 import { WithTranslation, withTranslation } from "react-i18next";
 
+import LoadingButton from "components/Buttons/LoadingButton";
 import MergeDragDrop from "goals/MergeDupGoal/MergeDupStep/DragDropComponents/MergeDragDrop";
 import theme from "types/theme";
 
@@ -12,13 +13,27 @@ interface MergeDupStepProps extends WithTranslation {
   mergeAll: () => Promise<void>;
 }
 
-class MergeDupStep extends React.Component<MergeDupStepProps> {
+interface MergeDupStepState {
+  isSaving: boolean;
+}
+
+class MergeDupStep extends React.Component<
+  MergeDupStepProps,
+  MergeDupStepState
+> {
+  constructor(props: MergeDupStepProps) {
+    super(props);
+    this.state = { isSaving: false };
+  }
+
   next(): void {
     this.props.clearSidebar();
+    this.setState({ isSaving: false });
     this.props.advanceStep();
   }
 
   saveContinue(): void {
+    this.setState({ isSaving: true });
     this.props.clearSidebar();
     this.props.mergeAll().then(() => this.next());
   }
@@ -43,16 +58,19 @@ class MergeDupStep extends React.Component<MergeDupStepProps> {
         {/* Merge/skip buttons */}
         <Grid container justifyContent="flex-start">
           <Grid item>
-            <Button
-              color="primary"
-              variant="contained"
-              style={{ marginRight: theme.spacing(3) }}
-              onClick={() => this.saveContinue()}
-              title={this.props.t("mergeDups.helpText.saveAndContinue")}
-              id="merge-save"
+            <LoadingButton
+              loading={this.state.isSaving}
+              buttonProps={{
+                color: "primary",
+                variant: "contained",
+                style: { marginRight: theme.spacing(3) },
+                onClick: () => this.saveContinue(),
+                title: this.props.t("mergeDups.helpText.saveAndContinue"),
+                id: "merge-save",
+              }}
             >
               {this.props.t("buttons.saveAndContinue")}
-            </Button>
+            </LoadingButton>
             <Button
               color="secondary"
               variant="contained"