Fixed ViewImage modal to clear its loaded state when its file list changes

web/react/components/view_image.jsx

@@ -31,19 +31,12 @@ export default class ViewImageModal extends React.Component {
         this.onMouseEnterImage = this.onMouseEnterImage.bind(this);
         this.onMouseLeaveImage = this.onMouseLeaveImage.bind(this);
 
-        const loaded = [];
-        const progress = [];
-        for (var i = 0; i < this.props.filenames.length; i++) {
-            loaded.push(false);
-            progress.push(0);
-        }
-
         this.state = {
             imgId: this.props.startId,
             fileInfo: null,
             imgHeight: '100%',
-            loaded,
-            progress,
+            loaded: Utils.fillArray(false, this.props.filenames.length),
+            progress: Utils.fillArray(0, this.props.filenames.length),
             showFooter: false
         };
     }
@@ -104,6 +97,13 @@ export default class ViewImageModal extends React.Component {
         } else if (nextProps.show === false && this.props.show === true) {
             this.onModalHidden();
         }
+
+        if (!Utils.areObjectsEqual(this.props.filenames, nextProps.filenames)) {
+            this.setState({
+                loaded: Utils.fillArray(false, nextProps.filenames.length),
+                progress: Utils.fillArray(0, nextProps.filenames.length)
+            });
+        }
     }
 
     onFileStoreChange(filename) {

web/react/utils/utils.jsx

@@ -1261,3 +1261,13 @@ export function isFeatureEnabled(feature) {
 export function isSystemMessage(post) {
     return post.type && (post.type.lastIndexOf(Constants.SYSTEM_MESSAGE_PREFIX) === 0);
 }
+
+export function fillArray(value, length) {
+    const arr = [];
+
+    for (let i = 0; i < length; i++) {
+        arr.push(value);
+    }
+
+    return arr;
+}