add loading spinner on upload image in input image component

cboard-org · Nov 28, 2023 · 4604524 · 4604524
1 parent c8d0e0e
commit 4604524
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 19 deletions.
diff --git a/src/components/Board/TileEditor/TileEditor.component.js b/src/components/Board/TileEditor/TileEditor.component.js
@@ -109,7 +109,7 @@ export class TileEditor extends Component {
       linkedBoard: '',
       imageUploadedData: [],
       isEditImageBtnActive: false,
-      loading: false
+      isLoading: false
     };
 
     this.defaultimageUploadedData = {
@@ -290,10 +290,11 @@ export class TileEditor extends Component {
     this.updateTileProperty('image', image);
   };
 
+  handleLoadingStateChange = (isLoading) => {
+    this.setState({ isLoading: isLoading })
+  };
+
   setimageUploadedData = (isUploaded, fileName, blobHQ = null, blob = null) => {
-    this.setState({
-      loading: true
-    });
     const { activeStep } = this.state;
     let imageUploadedData = this.state.imageUploadedData.map((item, indx) => {
       if (indx === activeStep) {
@@ -309,9 +310,6 @@ export class TileEditor extends Component {
       }
     });
     this.setState({ imageUploadedData: imageUploadedData });
-    this.setState({
-      loading: false
-    });
   };
 
   handleSymbolSearchChange = ({ image, labelKey, label, keyPath }) => {
@@ -531,15 +529,15 @@ export class TileEditor extends Component {
                           Boolean(tileInView.loadBoard) ? 'folder' : 'button'
                         }
                       >
-                      {
-                        this.state.loading 
-                        ? <CircularProgress/> 
-                        : <Symbol
-                          image={tileInView.image}
-                          label={currentLabel}
-                          keyPath={tileInView.keyPath}
-                        />
-                      }
+                        {
+                          this.state.isLoading
+                            ? <CircularProgress />
+                            : <Symbol
+                              image={tileInView.image}
+                              label={currentLabel}
+                              keyPath={tileInView.keyPath}
+                            />
+                        }
                       </Tile>
                     </div>
                     {this.state.isEditImageBtnActive && (
@@ -574,7 +572,7 @@ export class TileEditor extends Component {
                       {intl.formatMessage(messages.symbols)}
                     </Button>
                     <div className="TileEditor__input-image">
-                      <InputImage onChange={this.handleInputImageChange} />
+                      <InputImage onChange={this.handleInputImageChange} onLoad={this.handleLoadingStateChange} />
                     </div>
                   </div>
                   <div className="TileEditor__form-fields">
@@ -707,4 +705,4 @@ export class TileEditor extends Component {
   }
 }
 
-export default injectIntl(TileEditor);
+export default injectIntl(TileEditor);
diff --git a/src/components/UI/InputImage/InputImage.component.js b/src/components/UI/InputImage/InputImage.component.js
@@ -33,7 +33,11 @@ class InputImage extends Component {
     /**
      * Callback fired when input changes
      */
-    onChange: PropTypes.func.isRequired
+    onChange: PropTypes.func.isRequired,
+    /**
+     * Callback fired when loading state changes
+     */
+    onLoad: PropTypes.func.isRequired,
   };
 
   async resizeImage(file, imageName = null) {
@@ -85,11 +89,14 @@ class InputImage extends Component {
   };
 
   handleChange = async event => {
+    const { onLoad } = this.props;
+    onLoad(true)
     const file = event.target.files[0];
     if (file) {
       //if you cancel the image uploaded, the event is dispached and the file is null
       await this.resizeImage(file);
     }
+    onLoad(false)
   };
   render() {
     const { intl } = this.props;