2 files changed, 33 insertions, 20 deletions

diff --git a/webapp/components/file_attachment.jsx b/webapp/components/file_attachment.jsx
index 3d7f936c8..5642d33c5 100644
--- a/webapp/components/file_attachment.jsx
+++ b/webapp/components/file_attachment.jsx
@@ -48,14 +48,16 @@ export default class FileAttachment extends React.Component {
         if (fileType === 'image') {
             const thumbnailUrl = getFileThumbnailUrl(fileInfo.id);
 
-            const img = new Image();
-            img.onload = () => {
-                this.setState({loaded: true});
-            };
-            img.load(thumbnailUrl);
+            Utils.loadImage(thumbnailUrl, this.handleImageLoaded);
         }
     }
 
+    handleImageLoaded = () => {
+        this.setState({
+            loaded: true
+        });
+    }
+
     onAttachmentClick(e) {
         e.preventDefault();
         this.props.handleImageClick(this.props.index);
diff --git a/webapp/components/view_image.jsx b/webapp/components/view_image.jsx
index 7872867f3..cc0bcee9d 100644
--- a/webapp/components/view_image.jsx
+++ b/webapp/components/view_image.jsx
@@ -134,28 +134,39 @@ export default class ViewImageModal extends React.Component {
                 previewUrl = getFileUrl(fileInfo.id);
             }
 
-            const img = new Image();
-            img.load(
+            Utils.loadImage(
                 previewUrl,
-                () => {
-                    const progress = this.state.progress;
-                    progress[index] = img.completedPercentage;
-                    this.setState({progress});
-                }
+                () => this.handleImageLoaded(index),
+                (completedPercentage) => this.handleImageProgress(index, completedPercentage)
             );
-            img.onload = () => {
-                const loaded = this.state.loaded;
-                loaded[index] = true;
-                this.setState({loaded});
-            };
         } else {
             // there's nothing to load for non-image files
-            var loaded = this.state.loaded;
-            loaded[index] = true;
-            this.setState({loaded});
+            this.handleImageLoaded(index);
         }
     }
 
+    handleImageLoaded = (index) => {
+        this.setState((prevState) => {
+            return {
+                loaded: {
+                    ...prevState.loaded,
+                    [index]: true
+                }
+            };
+        });
+    }
+
+    handleImageProgress = (index, completedPercentage) => {
+        this.setState((prevState) => {
+            return {
+                progress: {
+                    ...prevState.progress,
+                    [index]: completedPercentage
+                }
+            };
+        });
+    }
+
     handleGetPublicLink() {
         this.props.onModalDismissed();