From 05d813ca90d9a19d58f01fac661fbc202dc5b5d5 Mon Sep 17 00:00:00 2001
From: RitaDias <rita@sanity.io>
Date: Tue, 25 Apr 2023 09:52:59 +0200
Subject: [PATCH] Allow for skipping visibility in preview element (fix
 flickering issue) (#4408)

* temp: DROP AFTER APPROVAL, sets up case

* chore(core): change naming on visibility in PreviewLoader

* chore(core): add __internal_skip_visibility_check prop to previewLoader

* chore(core): rename isPTE to match name

* style(core): rename prop

* fix(core): remove skipVisibility based layout in PreviewLoader & add condition within PTE
---
 .../inputs/PortableText/object/BlockObject.tsx |  1 +
 .../PortableText/object/InlineObject.tsx       |  1 +
 .../src/core/form/types/renderCallback.ts      |  1 +
 .../core/preview/components/PreviewLoader.tsx  | 18 ++++++++++++------
 4 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/packages/sanity/src/core/form/inputs/PortableText/object/BlockObject.tsx b/packages/sanity/src/core/form/inputs/PortableText/object/BlockObject.tsx
index 4ecb674ea537..a14f7823967a 100644
--- a/packages/sanity/src/core/form/inputs/PortableText/object/BlockObject.tsx
+++ b/packages/sanity/src/core/form/inputs/PortableText/object/BlockObject.tsx
@@ -329,6 +329,7 @@ export const DefaultBlockObjectComponent = (props: BlockProps) => {
           ),
           layout: isImagePreview ? 'blockImage' : 'block',
           schemaType,
+          skipVisibilityCheck: true,
           value,
         })}
       </Root>
diff --git a/packages/sanity/src/core/form/inputs/PortableText/object/InlineObject.tsx b/packages/sanity/src/core/form/inputs/PortableText/object/InlineObject.tsx
index 987b0821dca2..1b54f7677d5d 100644
--- a/packages/sanity/src/core/form/inputs/PortableText/object/InlineObject.tsx
+++ b/packages/sanity/src/core/form/inputs/PortableText/object/InlineObject.tsx
@@ -246,6 +246,7 @@ export const DefaultInlineObjectComponent = (props: BlockProps) => {
           {renderPreview({
             layout: 'inline',
             schemaType,
+            skipVisibilityCheck: true,
             value,
             fallbackTitle: 'Click to edit',
           })}
diff --git a/packages/sanity/src/core/form/types/renderCallback.ts b/packages/sanity/src/core/form/types/renderCallback.ts
index b81d63c9acca..0d88097c2273 100644
--- a/packages/sanity/src/core/form/types/renderCallback.ts
+++ b/packages/sanity/src/core/form/types/renderCallback.ts
@@ -48,6 +48,7 @@ export interface RenderPreviewCallbackProps<TLayoutKey = PreviewLayoutKey> {
   withRadius?: boolean
   withShadow?: boolean
   schemaType: SchemaType
+  skipVisibilityCheck?: boolean
   style?: CSSProperties
 }
 
diff --git a/packages/sanity/src/core/preview/components/PreviewLoader.tsx b/packages/sanity/src/core/preview/components/PreviewLoader.tsx
index 72a6d5150690..7551a6e8b57e 100644
--- a/packages/sanity/src/core/preview/components/PreviewLoader.tsx
+++ b/packages/sanity/src/core/preview/components/PreviewLoader.tsx
@@ -27,21 +27,27 @@ export function PreviewLoader(
     component: ComponentType<Omit<PreviewProps, 'renderDefault'>>
   }
 ): ReactElement {
-  const {layout, value, component, style: styleProp, schemaType, ...restProps} = props
+  const {
+    layout,
+    value,
+    component,
+    style: styleProp,
+    schemaType,
+    skipVisibilityCheck,
+    ...restProps
+  } = props
 
   const [element, setElement] = useState<HTMLDivElement | null>(null)
-  const isPTE = layout && ['inline', 'block', 'blockImage'].includes(layout)
 
   // Subscribe to visibility
-  const visibility = useVisibility({
-    // NOTE: disable when PTE preview
-    element: isPTE ? null : element,
+  const isVisible = useVisibility({
+    element: skipVisibilityCheck ? null : element,
     hideDelay: _HIDE_DELAY,
   })
 
   // Subscribe document preview value
   const preview = useValuePreview({
-    enabled: isPTE || visibility,
+    enabled: skipVisibilityCheck || isVisible,
     schemaType,
     value,
   })