try switching to resize observer

Author: just-boris

src/app-layout/visual-refresh-toolbar/state/use-app-layout-visible.ts

@@ -0,0 +1,21 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { useCallback, useRef, useState } from 'react';
+
+export function useAppLayoutVisible() {
+  const observerRef = useRef<ResizeObserver | null>(null);
+  const [isVisible, setVisible] = useState(true);
+  const ref = useCallback((node: HTMLElement | null) => {
+    if (observerRef.current) {
+      observerRef.current.disconnect();
+    }
+    if (node && node.ownerDocument.defaultView && node.ownerDocument.defaultView.ResizeObserver) {
+      observerRef.current = new node.ownerDocument.defaultView!.ResizeObserver(([entry]) => {
+        setVisible(entry.borderBoxSize[0].inlineSize > 0 && entry.borderBoxSize[0].blockSize > 0);
+      });
+      observerRef.current.observe(node);
+    }
+  }, []);
+
+  return { ref, isVisible };
+}

src/app-layout/visual-refresh-toolbar/state/use-app-layout.tsx

@@ -7,7 +7,6 @@ import { useMergeRefs, useStableCallback, useUniqueId } from '@cloudscape-design
 import { SplitPanelSideToggleProps } from '../../../internal/context/split-panel-context';
 import { fireNonCancelableEvent } from '../../../internal/events';
 import { useControllable } from '../../../internal/hooks/use-controllable';
-import { useIntersectionObserver } from '../../../internal/hooks/use-intersection-observer';
 import { useMobile } from '../../../internal/hooks/use-mobile';
 import { useGetGlobalBreadcrumbs } from '../../../internal/plugins/helpers/use-global-breadcrumbs';
 import globalVars from '../../../internal/styles/global-vars';
@@ -26,6 +25,7 @@ import {
 } from '../compute-layout';
 import { AppLayoutState } from '../interfaces';
 import { AppLayoutInternalProps, AppLayoutInternals } from '../interfaces';
+import { useAppLayoutVisible } from './use-app-layout-visible';
 
 export const useAppLayout = (
   hasToolbar: boolean,
@@ -259,9 +259,8 @@ export const useAppLayout = (
     stickyNotifications: resolvedStickyNotifications,
   });
 
-  const { ref: intersectionObserverRef, isIntersecting } = useIntersectionObserver({ initialState: true });
-
-  const rootRef = useMergeRefs(rootRefInternal, intersectionObserverRef, onMountRootRef);
+  const { ref: visibilityObserverRef, isVisible } = useAppLayoutVisible();
+  const rootRef = useMergeRefs(rootRefInternal, visibilityObserverRef, onMountRootRef);
 
   const discoveredBreadcrumbs = useGetGlobalBreadcrumbs(hasToolbar && !breadcrumbs);
 
@@ -431,7 +430,7 @@ export const useAppLayout = (
 
   return {
     rootRef,
-    isIntersecting,
+    isIntersecting: isVisible,
     appLayoutInternals,
     splitPanelInternals,
     widgetizedState: {