@contentful/experiences-visual-editor-react 3.0.0 → 3.0.1-dev-20250807T0745-c928267.0

package/dist/index.js

@@ -4813,7 +4813,6 @@ const EmptyCanvasMessage = () => {
  */
 const sendCanvasGeometryUpdatedMessage = async (tree, sourceEvent) => {
     const nodeToCoordinatesMap = {};
-    await waitForAllImagesToBeLoaded();
     collectNodeCoordinates(tree.root, nodeToCoordinatesMap);
     sendMessage(OUTGOING_EVENTS.CanvasGeometryUpdated, {
         size: {
@@ -4842,30 +4841,26 @@ const collectNodeCoordinates = (node, nodeToCoordinatesMap) => {
     }
     node.children.forEach((child) => collectNodeCoordinates(child, nodeToCoordinatesMap));
 };
-const waitForAllImagesToBeLoaded = () => {
-    // If the document contains an image, wait for this image to be loaded before collecting & sending all geometry data.
-    const allImageNodes = document.querySelectorAll('img');
-    return Promise.all(Array.from(allImageNodes).map((imageNode) => {
-        if (imageNode.complete) {
-            return Promise.resolve();
-        }
-        return new Promise((resolve, reject) => {
-            const handleImageLoad = (event) => {
-                imageNode.removeEventListener('load', handleImageLoad);
-                imageNode.removeEventListener('error', handleImageLoad);
-                if (event.type === 'error') {
-                    console.warn('Image failed to load:', imageNode);
-                    reject();
-                }
-                else {
-                    resolve();
-                }
-            };
-            imageNode.addEventListener('load', handleImageLoad);
-            imageNode.addEventListener('error', handleImageLoad);
-        });
-    }));
-};
+function waitForImageToBeLoaded(imageNode) {
+    if (imageNode.complete) {
+        return Promise.resolve();
+    }
+    return new Promise((resolve, reject) => {
+        const handleImageLoad = (event) => {
+            imageNode.removeEventListener('load', handleImageLoad);
+            imageNode.removeEventListener('error', handleImageLoad);
+            if (event.type === 'error') {
+                console.warn('Image failed to load:', imageNode);
+                reject();
+            }
+            else {
+                resolve();
+            }
+        };
+        imageNode.addEventListener('load', handleImageLoad);
+        imageNode.addEventListener('error', handleImageLoad);
+    });
+}
 
 const useCanvasGeometryUpdates = ({ tree }) => {
     const debouncedUpdateGeometry = useMemo(() => debounce((tree, sourceEvent) => {
@@ -4880,6 +4875,9 @@ const useCanvasGeometryUpdates = ({ tree }) => {
         // yet show the need for this. So we might be able to drop this later to boost performance.
         trailing: true,
     }), []);
+    const debouncedCollectImages = useMemo(() => debounce(() => {
+        return Array.from(document.querySelectorAll('img'));
+    }, 300, { leading: true, trailing: true }), []);
     // Store tree in a ref to avoid the need to deactivate & reactivate the mutation observer
     // when the tree changes. This is important to avoid missing out on some mutation events.
     const treeRef = useRef(tree);
@@ -4892,9 +4890,19 @@ const useCanvasGeometryUpdates = ({ tree }) => {
         window.addEventListener('resize', resizeEventListener);
         return () => window.removeEventListener('resize', resizeEventListener);
     }, [debouncedUpdateGeometry]);
+    const [{ allImages, loadedImages }, setImages] = useState(() => {
+        const allImages = debouncedCollectImages();
+        const loadedImages = new WeakSet();
+        return { allImages, loadedImages };
+    });
     // Handling DOM mutations
     useEffect(() => {
-        const observer = new MutationObserver(() => debouncedUpdateGeometry(treeRef.current, 'mutation'));
+        const observer = new MutationObserver(() => {
+            debouncedUpdateGeometry(treeRef.current, 'mutation');
+            // find all images on any DOM change
+            const allImages = debouncedCollectImages();
+            setImages((prevState) => ({ ...prevState, allImages }));
+        });
         // send initial geometry in case the tree is empty
         debouncedUpdateGeometry(treeRef.current, 'mutation');
         observer.observe(document.documentElement, {
@@ -4903,7 +4911,26 @@ const useCanvasGeometryUpdates = ({ tree }) => {
             attributes: true,
         });
         return () => observer.disconnect();
-    }, [debouncedUpdateGeometry]);
+    }, [debouncedCollectImages, debouncedUpdateGeometry]);
+    // Handling image loading separately,
+    // as each image can load at a different time, some might be hidden or lazy loaded
+    useEffect(() => {
+        let isCurrent = true;
+        allImages.forEach(async (imageNode) => {
+            if (loadedImages.has(imageNode)) {
+                return;
+            }
+            // update the geometry after each image is loaded, as it can shift the layout
+            await waitForImageToBeLoaded(imageNode);
+            if (isCurrent) {
+                loadedImages.add(imageNode);
+                debouncedUpdateGeometry(treeRef.current, 'imageLoad');
+            }
+        });
+        return () => {
+            isCurrent = false;
+        };
+    }, [allImages, loadedImages, debouncedUpdateGeometry]);
 };
 
 const RootRenderer = ({ inMemoryEntitiesStore }) => {