From bf0f2511e2112210017d656750a991948978cd5b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B8rge=20N=C3=A6ss?= <bjoerge@gmail.com>
Date: Thu, 26 Sep 2024 18:08:28 +0200
Subject: [PATCH] refactor(preview): improve useVisibility

---
 .../core/preview/components/PreviewLoader.tsx | 10 ++++---
 .../sanity/src/core/preview/useVisibility.ts  | 29 ++++++++++++++-----
 2 files changed, 28 insertions(+), 11 deletions(-)

diff --git a/packages/sanity/src/core/preview/components/PreviewLoader.tsx b/packages/sanity/src/core/preview/components/PreviewLoader.tsx
index 414ab9669641..42145d6bc306 100644
--- a/packages/sanity/src/core/preview/components/PreviewLoader.tsx
+++ b/packages/sanity/src/core/preview/components/PreviewLoader.tsx
@@ -42,10 +42,12 @@ export function PreviewLoader(
   const [element, setElement] = useState<HTMLDivElement | null>(null)
 
   // Subscribe to visibility
-  const isVisible = useVisibility({
-    element: skipVisibilityCheck ? null : element,
-    hideDelay: _HIDE_DELAY,
-  })
+  const isVisible =
+    useVisibility({
+      disabled: skipVisibilityCheck,
+      element: element,
+      hideDelay: _HIDE_DELAY,
+    }) || skipVisibilityCheck
 
   // Subscribe document preview value
   const preview = useValuePreview({
diff --git a/packages/sanity/src/core/preview/useVisibility.ts b/packages/sanity/src/core/preview/useVisibility.ts
index a479b8ad5105..74d22218d3cb 100644
--- a/packages/sanity/src/core/preview/useVisibility.ts
+++ b/packages/sanity/src/core/preview/useVisibility.ts
@@ -1,19 +1,34 @@
-import {useEffect, useState} from 'react'
+import {useLayoutEffect, useState} from 'react'
 import {concat, of} from 'rxjs'
 import {delay, distinctUntilChanged, map, switchMap} from 'rxjs/operators'
 
 import {intersectionObservableFor} from './streams/intersectionObservableFor'
 import {visibilityChange$} from './streams/visibilityChange'
 
-export function useVisibility(props: {element: HTMLElement | null; hideDelay?: number}): boolean {
-  const {element, hideDelay = 0} = props
+interface Props {
+  /**
+   * Disable the check. The hook will return false if disabled
+   */
+  disabled?: boolean
+  /** DOM Node to check visibility for */
+  element: HTMLElement | null
+  /** When element is hidden, wait this delay in milliseconds before reporting it as */
+  hideDelay?: number
+}
+
+export function useVisibility(props: Props): boolean {
+  const {element, hideDelay = 0, disabled} = props
   const [visible, setVisible] = useState(false)
 
-  useEffect(() => {
-    if (!element) {
+  useLayoutEffect(() => {
+    if (!element || disabled) {
       return undefined
     }
 
+    if (element && 'checkVisibility' in element) {
+      setVisible(element.checkVisibility())
+    }
+
     const isDocumentVisible$ = concat(
       of(!document.hidden),
       visibilityChange$.pipe(
@@ -34,7 +49,7 @@ export function useVisibility(props: {element: HTMLElement | null; hideDelay?: n
     const sub = visible$.subscribe(setVisible)
 
     return () => sub.unsubscribe()
-  }, [element, hideDelay])
+  }, [element, hideDelay, disabled])
 
-  return visible
+  return disabled ? false : visible
 }