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