Show loading state on Dialog accept button and avoid close it on saving

cboard-org · Jul 25, 2024 · 084181a · 084181a
1 parent b36d319
commit 084181a
Showing 1 changed file with 14 additions and 3 deletions.
diff --git a/src/components/Communicator/CommunicatorDialog/CommunicatorDialogBoardItem.component.js b/src/components/Communicator/CommunicatorDialog/CommunicatorDialogBoardItem.component.js
@@ -30,6 +30,7 @@ import TextField from '@material-ui/core/TextField';
 import CircularProgress from '@material-ui/core/CircularProgress';
 import Slide from '@material-ui/core/Slide';
 import DialogContentText from '@material-ui/core/DialogContentText';
+import LoadingIcon from '../../UI/LoadingIcon';
 
 import IconButton from '../../UI/IconButton';
 import { TAB_INDEXES } from './CommunicatorDialog.constants';
@@ -73,6 +74,8 @@ class CommunicatorDialogBoardItem extends React.Component {
         ? props.board.description
         : ''
     };
+
+    this.handleDialogClose = this.handleDialogClose.bind(this);
   }
 
   openMenu(e) {
@@ -149,14 +152,14 @@ class CommunicatorDialogBoardItem extends React.Component {
 
   async handleBoardCopy(board) {
     this.setState({
-      openCopyBoard: false,
       loading: true
     });
     try {
       await this.props.copyBoard(board);
     } catch (err) {
     } finally {
       this.setState({
+        openCopyBoard: false,
         loading: false
       });
     }
@@ -839,7 +842,9 @@ class CommunicatorDialogBoardItem extends React.Component {
                   </Dialog>
 
                   <Dialog
-                    onClose={this.handleDialogClose.bind(this)}
+                    onClose={() => {
+                      if (!this.state.loading) this.handleDialogClose();
+                    }}
                     aria-labelledby="board-copy-dialog"
                     open={this.state.openCopyBoard}
                   >
@@ -858,6 +863,7 @@ class CommunicatorDialogBoardItem extends React.Component {
                       <Button
                         onClick={this.handleDialogClose.bind(this)}
                         color="primary"
+                        disabled={this.state.loading}
                       >
                         {intl.formatMessage(messages.close)}
                       </Button>
@@ -868,8 +874,13 @@ class CommunicatorDialogBoardItem extends React.Component {
                           }}
                           variant="contained"
                           color="primary"
+                          disabled={this.state.loading}
                         >
-                          {intl.formatMessage(messages.accept)}
+                          {this.state.loading ? (
+                            <LoadingIcon />
+                          ) : (
+                            intl.formatMessage(messages.accept)
+                          )}
                         </Button>
                       </PremiumFeature>
                     </DialogActions>