diff --git a/src/components/Board/TileEditor/TileEditor.component.js b/src/components/Board/TileEditor/TileEditor.component.js index 1678af743..7d8bce603 100644 --- a/src/components/Board/TileEditor/TileEditor.component.js +++ b/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' } > - + {this.state.isLoading ? ( + + ) : ( + + )} {this.state.isEditImageBtnActive && ( @@ -562,7 +572,10 @@ export class TileEditor extends Component { {intl.formatMessage(messages.symbols)}
- +
diff --git a/src/components/UI/InputImage/InputImage.component.js b/src/components/UI/InputImage/InputImage.component.js index ea8149cbc..770491f72 100644 --- 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, + /** + * 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; diff --git a/src/components/UI/InputImage/InputImage.test.js b/src/components/UI/InputImage/InputImage.test.js index 5720749cb..b683f7030 100644 --- a/src/components/UI/InputImage/InputImage.test.js +++ b/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(); + const setIsLoadingImage = jest.fn(); + const wrapper = mount( + + ); 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);