Feature - add loading spinner on upload image

src/components/Board/TileEditor/TileEditor.component.js

@@ -17,6 +17,7 @@ import KeyboardArrowLeftIcon from '@material-ui/icons/KeyboardArrowLeft';
 import Select from '@material-ui/core/Select';
 import MenuItem from '@material-ui/core/MenuItem';
 import InputLabel from '@material-ui/core/InputLabel';
+import CircularProgress from '@material-ui/core/CircularProgress';
 
 import messages from './TileEditor.messages';
 import SymbolSearch from '../SymbolSearch';
@@ -107,7 +108,8 @@ export class TileEditor extends Component {
       tile: this.defaultTile,
       linkedBoard: '',
       imageUploadedData: [],
-      isEditImageBtnActive: false
+      isEditImageBtnActive: false,
+      isLoading: false
     };
 
     this.defaultimageUploadedData = {
@@ -288,6 +290,10 @@ export class TileEditor extends Component {
     this.updateTileProperty('image', image);
   };
 
+  handleLoadingStateChange = isLoading => {
+    this.setState({ isLoading: isLoading });
+  };
+
   setimageUploadedData = (isUploaded, fileName, blobHQ = null, blob = null) => {
     const { activeStep } = this.state;
     let imageUploadedData = this.state.imageUploadedData.map((item, indx) => {
@@ -523,11 +529,15 @@ export class TileEditor extends Component {
                           Boolean(tileInView.loadBoard) ? 'folder' : 'button'
                         }
                       >
-                        <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 && (
@@ -562,7 +572,10 @@ export class TileEditor extends Component {
                       {intl.formatMessage(messages.symbols)}
                     </Button>
                     <div className="TileEditor__input-image">
-                      <InputImage onChange={this.handleInputImageChange} />
+                      <InputImage
+                        onChange={this.handleInputImageChange}
+                        setIsLoadingImage={this.handleLoadingStateChange}
+                      />
                     </div>
                   </div>
                   <div className="TileEditor__form-fields">

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,
+    /**
+     * Set image loading state
+     */
+    setIsLoadingImage: PropTypes.func.isRequired
   };
 
   async resizeImage(file, imageName = null) {
@@ -50,11 +54,13 @@ class InputImage extends Component {
   }
 
   onClick = async () => {
+    const { setIsLoadingImage } = this.props;
     try {
       const imageURL = await window.cordova.plugins.safMediastore.selectFile();
       const imageName = await window.cordova.plugins.safMediastore.getFileName(
         imageURL
       );
+      setIsLoadingImage(true);
       const file = await new Promise((resolve, reject) => {
         window.resolveLocalFileSystemURL(
           imageURL,
@@ -82,14 +88,18 @@ class InputImage extends Component {
     } catch (err) {
       console.error(err);
     }
+    setIsLoadingImage(false);
   };
 
   handleChange = async event => {
+    const { setIsLoadingImage } = this.props;
+    setIsLoadingImage(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);
     }
+    setIsLoadingImage(false);
   };
   render() {
     const { intl } = this.props;

src/components/UI/InputImage/InputImage.test.js

@@ -17,11 +17,19 @@ jest.mock('./InputImage.messages', () => {
 describe('InputImage tests', () => {
   test('default render ', () => {
     const onChange = jest.fn();
-    const wrapper = mount(<InputImage disabled={false} onChange={onChange} />);
+    const setIsLoadingImage = jest.fn();
+    const wrapper = mount(
+      <InputImage
+        disabled={false}
+        onChange={onChange}
+        setIsLoadingImage={setIsLoadingImage}
+      />
+    );
     expect(wrapper).toMatchSnapshot();
   });
   test('on buttton click', () => {
     const onChange = jest.fn();
+    const setIsLoadingImage = jest.fn();
     const event = {
       target: {
         files: [new File(['foo'], 'foo.txt')]
@@ -32,6 +40,7 @@ describe('InputImage tests', () => {
         user={{ email: 'test' }}
         disabled={false}
         onChange={onChange}
+        setIsLoadingImage={setIsLoadingImage}
       />
     );
     wrapper.find('input').prop('onChange')(event);