Prevent re-render of preview overlay when there are no changes (#3096)

Co-authored-by: Johannes Obermair <[email protected]>
vivid-planet · Jan 21, 2025 · e92e6df · e92e6df
1 parent 68d58e2
commit e92e6df
Show file tree

Hide file tree

Showing 4 changed files with 102 additions and 58 deletions.
diff --git a/.changeset/metal-waves-add.md b/.changeset/metal-waves-add.md
@@ -0,0 +1,5 @@
+---
+"@comet/cms-site": patch
+---
+
+Prevent the block-preview from becoming unresponsive when rendering an `input`
diff --git a/packages/site/cms-site/package.json b/packages/site/cms-site/package.json
@@ -27,6 +27,7 @@
     },
     "dependencies": {
         "jose": "^5.2.4",
+        "lodash.isequal": "^4.5.0",
         "rimraf": "^3.0.0",
         "scroll-into-view-if-needed": "^2.0.0",
         "server-only": "^0.0.1",
@@ -38,6 +39,7 @@
         "@gitbeaker/node": "^34.0.0",
         "@types/draft-js": "^0.11.10",
         "@types/jest": "^29.5.0",
+        "@types/lodash.isequal": "^4.5.8",
         "@types/react": "^18.3.18",
         "@types/react-dom": "^18.3.5",
         "chokidar-cli": "^2.0.0",

diff --git a/packages/site/cms-site/src/iframebridge/IFrameBridge.tsx b/packages/site/cms-site/src/iframebridge/IFrameBridge.tsx
@@ -1,6 +1,7 @@
 "use client";
 
-import { createContext, PropsWithChildren, useCallback, useEffect, useRef, useState } from "react";
+import isEqual from "lodash.isequal";
+import { createContext, PropsWithChildren, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import styled from "styled-components";
 import { useDebounceCallback } from "usehooks-ts";
 
@@ -85,38 +86,47 @@ export const IFrameBridgeProvider = ({ children }: PropsWithChildren) => {
     const childrenWrapperRef = useRef<HTMLDivElement>(null);
 
     const recalculatePreviewElementsData = useCallback(() => {
-        setPreviewElementsData(
-            previewElements
-                .map((previewElement) => {
-                    const childNodes = getRecursiveChildrenOfPreviewElement(previewElement.element);
-                    const positioning = getCombinedPositioningOfElements(childNodes);
+        const newPreviewElementsData = previewElements
+            .map((previewElement) => {
+                const childNodes = getRecursiveChildrenOfPreviewElement(previewElement.element);
+                const positioning = getCombinedPositioningOfElements(childNodes);
 
-                    return {
-                        adminRoute: previewElement.adminRoute,
-                        label: previewElement.label,
-                        position: {
-                            top: positioning.top,
-                            left: positioning.left,
-                            width: positioning.width,
-                            height: positioning.height,
-                        },
-                    };
-                })
-                .sort((previousElementData, nextElementData) => {
-                    const previousSize = previousElementData.position.width * previousElementData.position.height;
-                    const nextSize = nextElementData.position.width * nextElementData.position.height;
-                    return nextSize - previousSize;
-                })
-                .map((elementData, index) => {
-                    return {
-                        ...elementData,
-                        position: {
-                            ...elementData.position,
-                            zIndex: index + 1,
-                        },
-                    };
-                }),
-        );
+                return {
+                    adminRoute: previewElement.adminRoute,
+                    label: previewElement.label,
+                    position: {
+                        top: positioning.top,
+                        left: positioning.left,
+                        width: positioning.width,
+                        height: positioning.height,
+                    },
+                };
+            })
+            .sort((previousElementData, nextElementData) => {
+                const previousSize = previousElementData.position.width * previousElementData.position.height;
+                const nextSize = nextElementData.position.width * nextElementData.position.height;
+                return nextSize - previousSize;
+            })
+            .map((elementData, index) => {
+                return {
+                    ...elementData,
+                    position: {
+                        ...elementData.position,
+                        zIndex: index + 1,
+                    },
+                };
+            });
+
+        setPreviewElementsData((previousElementsData) => {
+            const dataDidNotChange = isEqual(previousElementsData, newPreviewElementsData);
+
+            if (dataDidNotChange) {
+                // Returning the previous object (same reference) prevents the state-update from triggering a re-render
+                return previousElementsData;
+            }
+
+            return newPreviewElementsData;
+        });
     }, [previewElements]);
 
     useEffect(() => {
@@ -139,9 +149,9 @@ export const IFrameBridgeProvider = ({ children }: PropsWithChildren) => {
         }
     }, [recalculatePreviewElementsData]);
 
-    const sendMessage = (message: IFrameMessage) => {
+    const sendMessage = useCallback((message: IFrameMessage) => {
         window.parent.postMessage(JSON.stringify(message), "*");
-    };
+    }, []);
 
     const debounceDeactivateOutlines = useDebounceCallback(() => {
         setShowOutlines(false);
@@ -204,7 +214,7 @@ export const IFrameBridgeProvider = ({ children }: PropsWithChildren) => {
         return () => {
             window.removeEventListener("message", handleMessage, false);
         };
-    }, [onReceiveMessage]);
+    }, [onReceiveMessage, sendMessage]);
 
     const addPreviewElement = useCallback(
         (element: PreviewElement) => {
@@ -220,30 +230,45 @@ export const IFrameBridgeProvider = ({ children }: PropsWithChildren) => {
         [setPreviewElements],
     );
 
+    const iFrameBridgeValues = useMemo(
+        () => ({
+            showOutlines,
+            hasBridge: true,
+            block,
+            showOnlyVisible,
+            selectedAdminRoute,
+            hoveredAdminRoute,
+            sendSelectComponent: (adminRoute: string) => {
+                setSelectedAdminRoute(adminRoute);
+                sendMessage({ cometType: IFrameMessageType.SelectComponent, data: { adminRoute } });
+            },
+            sendHoverComponent: (route: string | null) => {
+                sendMessage({ cometType: IFrameMessageType.HoverComponent, data: { route } });
+            },
+            sendMessage,
+            contentScope,
+            graphQLApiUrl,
+            previewElementsData,
+            addPreviewElement,
+            removePreviewElement,
+        }),
+        [
+            showOutlines,
+            block,
+            showOnlyVisible,
+            selectedAdminRoute,
+            hoveredAdminRoute,
+            sendMessage,
+            contentScope,
+            graphQLApiUrl,
+            previewElementsData,
+            addPreviewElement,
+            removePreviewElement,
+        ],
+    );
+
     return (
-        <IFrameBridgeContext.Provider
-            value={{
-                showOutlines,
-                hasBridge: true,
-                block,
-                showOnlyVisible,
-                selectedAdminRoute,
-                hoveredAdminRoute,
-                sendSelectComponent: (adminRoute: string) => {
-                    setSelectedAdminRoute(adminRoute);
-                    sendMessage({ cometType: IFrameMessageType.SelectComponent, data: { adminRoute } });
-                },
-                sendHoverComponent: (route: string | null) => {
-                    sendMessage({ cometType: IFrameMessageType.HoverComponent, data: { route } });
-                },
-                sendMessage,
-                contentScope,
-                graphQLApiUrl,
-                previewElementsData,
-                addPreviewElement,
-                removePreviewElement,
-            }}
-        >
+        <IFrameBridgeContext.Provider value={iFrameBridgeValues}>
             <div
                 onMouseMove={() => {
                     setShowOutlines(true);

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml