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,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">
@@ -695,4 +705,4 @@ export class TileEditor extends Component {
   }
 }
 
-export default injectIntl(TileEditor);
+export default injectIntl(TileEditor);

src/components/UI/InputImage/InputImage.component.js

@@ -33,10 +33,15 @@ 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) {
+    const { onLoad } = this.props;
     //if you cancel the image uploaded, the event is dispached and the file is null
     try {
       const { onChange } = this.props;
@@ -47,9 +52,12 @@ class InputImage extends Component {
     } catch (err) {
       console.error(err);
     }
+    onLoad(false);
   }
 
   onClick = async () => {
+    const { onLoad } = this.props;
+    onLoad(true);
     try {
       const imageURL = await window.cordova.plugins.safMediastore.selectFile();
       const imageName = await window.cordova.plugins.safMediastore.getFileName(
@@ -85,6 +93,8 @@ 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

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

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