feat: OPTIC-1479: Improve memory usage of Image tag (#6930)

HumanSignal · Jan 27, 2025 · a626c0a · a626c0a
1 parent cc26109
commit a626c0a
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 2 deletions.
diff --git a/web/libs/editor/src/tags/object/Image/ImageEntity.js b/web/libs/editor/src/tags/object/Image/ImageEntity.js
@@ -1,6 +1,7 @@
-import { types } from "mobx-state-tree";
+import { types, getParent } from "mobx-state-tree";
 import { FileLoader } from "../../../utils/FileLoader";
 import { clamp } from "../../../utils/utilities";
+import { FF_IMAGE_MEMORY_USAGE, isFF } from "../../../utils/feature-flags";
 
 const fileLoader = new FileLoader();
 
@@ -65,12 +66,45 @@ export const ImageEntity = types
     /** Is image loaded using `<img/>` tag and cached by the browser */
     imageLoaded: false,
   }))
+  .views((self) => ({
+    get parent() {
+      // Get the ImageEntityMixin
+      return getParent(self, 2);
+    },
+    get imageCrossOrigin() {
+      return self.parent?.imageCrossOrigin ?? "anonymous";
+    },
+  }))
   .actions((self) => ({
     preload() {
       if (self.ensurePreloaded() || !self.src) return;
 
-      self.setDownloading(true);
+      if (isFF(FF_IMAGE_MEMORY_USAGE)) {
+        self.setDownloading(true);
+        new Promise((resolve) => {
+          const img = new Image();
+          // Get from the image tag
+          const crossOrigin = self.imageCrossOrigin;
+          if (crossOrigin) img.crossOrigin = crossOrigin;
+          img.onload = () => {
+            self.setCurrentSrc(self.src);
+            self.setDownloaded(true);
+            self.setProgress(1);
+            self.setDownloading(false);
+            self.setImageLoaded(true);
+            resolve();
+          };
+          img.onerror = () => {
+            self.setError(true);
+            self.setDownloading(false);
+            resolve();
+          };
+          img.src = self.src;
+        });
+        return;
+      }
 
+      self.setDownloading(true);
       fileLoader
         .download(self.src, (_t, _l, progress) => {
           self.setProgress(progress);
@@ -87,6 +121,8 @@ export const ImageEntity = types
     },
 
     ensurePreloaded() {
+      if (isFF(FF_IMAGE_MEMORY_USAGE)) return self.currentSrc !== undefined;
+
       if (fileLoader.isError(self.src)) {
         self.setDownloading(false);
         self.setError(true);

diff --git a/web/libs/editor/src/utils/feature-flags.ts b/web/libs/editor/src/utils/feature-flags.ts
@@ -224,6 +224,8 @@ export const FF_LEAP_1173 = "fflag_feat_front_leap_1173_disable_postpone_skip_sh
 
 export const FF_PER_FIELD_COMMENTS = "fflag_feat_all_leap_1430_per_field_comments_100924_short";
 
+export const FF_IMAGE_MEMORY_USAGE = "fflag_feat_front_optic_1479_improve_image_tag_memory_usage_short";
+
 Object.assign(window, {
   APP_SETTINGS: {
     ...(window.APP_SETTINGS ?? {}),