Fix flickering on desktop modeler tab change

src/PropertiesPanel.js

@@ -2,7 +2,8 @@ import {
   useState,
   useEffect,
   useMemo,
-  useRef
+  useRef,
+  useLayoutEffect
 } from 'preact/hooks';
 
 import {
@@ -122,7 +123,7 @@ export default function PropertiesPanel(props) {
   const [ layout, setLayout ] = useState(createLayout(layoutConfig));
 
   // react to external changes in the layout config
-  useUpdateEffect(() => {
+  useUpdateLayoutEffect(() => {
     const newLayout = createLayout(layoutConfig);
 
     setLayout(newLayout);
@@ -258,15 +259,15 @@ function createDescriptionContext(overrides = {}) {
 // hooks //////////////////
 
 /**
- * This hook behaves like useEffect, but does not trigger on the first render.
+ * This hook behaves like useLayoutEffect, but does not trigger on the first render.
  *
  * @param {Function} effect
  * @param {Array} deps
  */
-function useUpdateEffect(effect, deps) {
+function useUpdateLayoutEffect(effect, deps) {
   const isMounted = useRef(false);
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (isMounted.current) {
       return effect();
     } else {

src/hooks/useStickyIntersectionObserver.js

@@ -38,6 +38,12 @@ export function useStickyIntersectionObserver(ref, scrollContainerSelector, setS
       const scrollContainer = domQuery(scrollContainerSelector);
 
       observer = new Observer((entries) => {
+
+        // The ScrollContainer is unmounted, do not update sticky state
+        if (scrollContainer.scrollHeight === 0) {
+          return;
+        }
+
         entries.forEach(entry => {
           if (entry.intersectionRatio < 1) {
             setSticky(true);

test/spec/hooks/useStickyIntersectionObserver.spec.js

@@ -2,11 +2,17 @@ import { useStickyIntersectionObserver } from 'src/hooks';
 
 import { renderHook } from '@testing-library/preact-hooks';
 
+import TestContainer from 'mocha-test-container-support';
 
 describe('hooks/userStickyIntersectionObserver', function() {
 
   const OriginalIntersectionObserver = global.IntersectionObserver;
 
+  let container;
+  beforeEach(function() {
+    container = TestContainer.get(this);
+  });
+
   afterEach(function() {
     global.IntersectionObserver = OriginalIntersectionObserver;
   });
@@ -86,6 +92,38 @@ describe('hooks/userStickyIntersectionObserver', function() {
   });
 
 
+  it('should not call when scrollContainer is unmounted', async function() {
+
+    // given
+    const callbackSpy = sinon.spy();
+
+    const triggerCallback = mockIntersectionObserver({});
+
+    const domObject = <div></div>;
+
+    const scrollContainer = document.createElement('div');
+    scrollContainer.setAttribute('id', 'scrollContainer');
+    container.appendChild(scrollContainer);
+
+    const ref = { current: domObject };
+
+    await renderHook(() => {
+      useStickyIntersectionObserver(ref, '#scrollContainer', callbackSpy);
+
+      return domObject;
+    });
+
+    // when
+    scrollContainer.remove();
+    triggerCallback([
+      { intersectionRatio: 1 }
+    ]);
+
+    // then
+    expect(callbackSpy).not.to.have.been.called;
+  });
+
+
   it('should unobserve after unmount', async function() {
 
     // given