Use content-visibility on open api operations (#2451)

.changeset/beige-snails-count.md

@@ -0,0 +1,6 @@
+---
+'@gitbook/react-openapi': patch
+'gitbook': patch
+---
+
+Adds content-visibility css property to OpenAPI Operation for better render performance

packages/gitbook/src/components/DocumentView/OpenAPI/OpenAPI.tsx

@@ -20,11 +20,6 @@ export async function OpenAPI(props: BlockProps<DocumentBlockSwagger>) {
     const { block, style } = props;
     return (
         <div className={tcls('w-full', 'flex', 'flex-row', style, 'max-w-full')}>
-            {/*
-                Invisible span with the ID to correctly identify the active section in the aside navigation.
-                We don't use the full <div> because it can be longer than the viewport and will not work well with IntersectionObserver.
-            */}
-            <span id={block.meta?.id} />
             <React.Suspense fallback={<OpenAPIFallback />}>
                 <OpenAPIBody {...props} />
             </React.Suspense>
@@ -61,6 +56,7 @@ async function OpenAPIBody(props: BlockProps<DocumentBlockSwagger>) {
                 CodeBlock: PlainCodeBlock,
                 defaultInteractiveOpened: context.mode === 'print',
                 specUrl,
+                id: block.meta?.id,
             }}
             className="openapi-block"
         />

packages/gitbook/src/components/DocumentView/OpenAPI/style.css

@@ -1,4 +1,6 @@
 .openapi-operation {
+    content-visibility: auto;
+    contain-intrinsic-height: 600px;
     @apply flex-1 flex flex-col gap-6;
 }
 

packages/react-openapi/src/OpenAPIOperation.tsx

@@ -34,7 +34,9 @@ export function OpenAPIOperation(props: {
         >
             <div className={classNames('openapi-operation', className)}>
                 <div className="openapi-intro">
-                    <h2 className="openapi-summary">{operation.summary}</h2>
+                    <h2 className="openapi-summary" id={context.id}>
+                        {operation.summary}
+                    </h2>
                     {operation.description ? (
                         <Markdown className="openapi-description" source={operation.description} />
                     ) : null}

packages/react-openapi/src/types.ts

@@ -18,6 +18,9 @@ export interface OpenAPIClientContext {
      * @default false
      */
     defaultInteractiveOpened?: boolean;
+
+    /** Optional id attached to the OpenAPI Operation heading and used as an anchor */
+    id?: string;
 }
 
 export interface OpenAPIFetcher {