Add ignoring resize observer problems

HumanSignal · Jul 31, 2023 · 678413a · 678413a
1 parent d0374df
commit 678413a
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 4 deletions.
diff --git a/src/components/SidePanels/OutlinerPanel/OutlinerTree.tsx b/src/components/SidePanels/OutlinerPanel/OutlinerTree.tsx
@@ -27,7 +27,6 @@ import { LockButton } from '../Components/LockButton';
 import { RegionControlButton } from '../Components/RegionControlButton';
 import './TreeView.styl';
 import ResizeObserver from '../../../utils/resize-observer';
-import { debounce } from 'lodash';
 import { EventDataNode, Key } from 'rc-tree/es/interface';
 
 const { localStorage } = window;
@@ -82,9 +81,15 @@ const OutlinerInnerTreeComponent: FC<OutlinerInnerTreeProps> = observer(({ regio
   const blockRef = useRef<HTMLElement>();
   const [height, setHeight] = useState(0);
   let resizeObserver:ResizeObserver|null = useMemo(() => {
-    return new ResizeObserver(debounce(() => {
-      setHeight(blockRef.current?.clientHeight || 1);
-    }, 16));
+    let lastHeight = 0;
+
+    return new ResizeObserver((entities) => {
+      if (!entities?.[0]?.contentRect || entities?.[0]?.contentRect?.height === lastHeight) {
+        return;
+      }
+      lastHeight = entities?.[0]?.contentRect?.height || 1;
+      setHeight(lastHeight);
+    });
   }, []);
 
   useEffect(() => {

diff --git a/tests/functional/cypress/support/e2e.ts b/tests/functional/cypress/support/e2e.ts
@@ -2,6 +2,9 @@ import { CURRENT_FLAGS } from '../../feature-flags';
 import '@heartexlabs/ls-test/cypress/support/e2e';
 
 beforeEach(() => {
+  cy.on('uncaught:exception', err => {
+    return !err.message.includes('ResizeObserver loop completed with undelivered notifications.');
+  });
   cy.on('window:before:load', (win) => {
     console.log('Setting feature flags', CURRENT_FLAGS);
     Object.assign(win, {