From 790e6da50059ec643ba938c03dd4c3dfd380142d Mon Sep 17 00:00:00 2001
From: David Luzar <luzar.david@gmail.com>
Date: Mon, 1 Nov 2021 10:44:57 +0100
Subject: [PATCH] fix: images not initialized correctly (#4157)

* fix: image not initialized correctly due to not renewing `state.pendingImageElement`

* ensure we replace elements on update

* set file as errored on >= 400 status respones
---
 src/components/App.tsx              | 20 ++++++++++++++++----
 src/excalidraw-app/data/firebase.ts |  2 ++
 src/excalidraw-app/index.tsx        | 10 +++++++++-
 3 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/src/components/App.tsx b/src/components/App.tsx
index 468f067f..aeb65290 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -4270,12 +4270,24 @@ class App extends React.Component<AppProps, AppState> {
         if (updatedFiles.has(element.fileId)) {
           invalidateShapeForElement(element);
         }
-
-        if (erroredFiles.has(element.fileId)) {
-          newElementWith(element, { status: "error" });
-        }
       }
     }
+    if (erroredFiles.size) {
+      this.scene.replaceAllElements(
+        this.scene.getElementsIncludingDeleted().map((element) => {
+          if (
+            isInitializedImageElement(element) &&
+            erroredFiles.has(element.fileId)
+          ) {
+            return newElementWith(element, {
+              status: "error",
+            });
+          }
+          return element;
+        }),
+      );
+    }
+
     return { updatedFiles, erroredFiles };
   };
 
diff --git a/src/excalidraw-app/data/firebase.ts b/src/excalidraw-app/data/firebase.ts
index a6657f48..d683d3e6 100644
--- a/src/excalidraw-app/data/firebase.ts
+++ b/src/excalidraw-app/data/firebase.ts
@@ -294,6 +294,8 @@ export const loadFilesFromFirebase = async (
             dataURL,
             created: metadata?.created || Date.now(),
           });
+        } else {
+          erroredFiles.set(id, true);
         }
       } catch (error) {
         erroredFiles.set(id, true);
diff --git a/src/excalidraw-app/index.tsx b/src/excalidraw-app/index.tsx
index d4bbff0a..ee2ffdc8 100644
--- a/src/excalidraw-app/index.tsx
+++ b/src/excalidraw-app/index.tsx
@@ -460,12 +460,17 @@ const ExcalidrawWrapper = () => {
         if (excalidrawAPI) {
           let didChange = false;
 
+          let pendingImageElement = appState.pendingImageElement;
           const elements = excalidrawAPI
             .getSceneElementsIncludingDeleted()
             .map((element) => {
               if (localFileStorage.shouldUpdateImageElementStatus(element)) {
                 didChange = true;
-                return newElementWith(element, { status: "saved" });
+                const newEl = newElementWith(element, { status: "saved" });
+                if (pendingImageElement === element) {
+                  pendingImageElement = newEl;
+                }
+                return newEl;
               }
               return element;
             });
@@ -473,6 +478,9 @@ const ExcalidrawWrapper = () => {
           if (didChange) {
             excalidrawAPI.updateScene({
               elements,
+              appState: {
+                pendingImageElement,
+              },
             });
           }
         }