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);