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

@@ -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 };
   };
 

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

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,
+              },
             });
           }
         }