Repository: excalidraw/excalidraw
File: packages/excalidraw/components/App.tsx (TypeScript)

Code before:
              created: Date.now(),
              lastRetrieved: Date.now(),
            },
          ]);

          let cachedImageData = this.imageCache.get(fileId);

          if (!cachedImageData) {
            this.addNewImagesToImageCache();

            const { updatedFiles } = await this.updateImageCache([
              imageElement,
            ]);

            if (updatedFiles.size) {
              ShapeCache.delete(latestImageElement);
            }

            cachedImageData = this.imageCache.get(fileId);
          }

          const imageHTML = await cachedImageData?.image;

          if (imageHTML && this.state.newElement?.id !== imageElement.id) {
            // again, we could have a new instance of the image element in the scene
            // thus checking and creating a new instance of the image element again
            const latestImageElement = this.scene.getElement(imageElement.id);

            if (
              latestImageElement &&
              latestImageElement.version >= imageElement.version &&
              isImageElement(latestImageElement)
            ) {
              imageElement = newElementWith(
                latestImageElement as ExcalidrawImageElement,
                {
                  fileId,
                },
              ) as NonDeleted<InitializedExcalidrawImageElement>;
            }

            const naturalDimensions = this.getImageNaturalDimensions(
              imageElement,
              imageHTML,
            );

            imageElement = newElementWith(imageElement, naturalDimensions);
          }

          resolve(imageElement);
        } catch (error: any) {

Review comment (performance):
This looks ridiculous, but I don't know what else to do. I would not just ignore it, since all the async work could be slow-ish, as it's dependent on the client machine & actual image. Thus while we are initialize the image, one could move / resize / rotate / etc. the image.

And we can't just mutate, as then our image initialization could be batched with other unrelated updates, which might end up not even being captured by the store / history.

Code after:
          resolve(initializedImageElement);
        } catch (error: any) {
          console.error(error);
          reject(new Error(t("errors.imageInsertError")));
        }
      },
    );
  };

  /**
   * use during async image initialization,
   * when the placeholder image could have been modified in the meantime,
   * and when you don't want to loose those modifications
   */
  private getLatestInitializedImageElement = (
    imagePlaceholder: ExcalidrawImageElement,
    fileId: FileId,
  ) => {
    const latestImageElement =
      this.scene.getElement(imagePlaceholder.id) ?? imagePlaceholder;

    return newElementWith(
      latestImageElement as InitializedExcalidrawImageElement,
      {
        fileId,
      },
    );
  };

  /**
   * inserts image into elements array and rerenders
   */
  private insertImageElement = async (
    placeholderImageElement: ExcalidrawImageElement,
    imageFile: File,
  ) => {
    // we should be handling all cases upstream, but in case we forget to handle
    // a future case, let's throw here
    if (!this.isToolSupported("image")) {
      this.setState({ errorMessage: t("errors.imageToolNotSupported") });
      return;
    }

    this.scene.insertElement(placeholderImageElement);

    try {
      const initializedImageElement = await this.initializeImage(
        placeholderImageElement,
        imageFile,
      );