Allow for skipping visibility in preview element (fix flickering issu…

…e) (#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

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>

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',
           })}

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
 }
 

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,
   })