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