From 51fa3ab2c8326c98aa03a8c49dc9c07b027cbe8f Mon Sep 17 00:00:00 2001
From: Brett Jephson <brett@gitbook.io>
Date: Thu, 5 Sep 2024 17:21:42 +0100
Subject: [PATCH] Use content-visibility on open api operations (#2451)

---
 .changeset/beige-snails-count.md                            | 6 ++++++
 .../gitbook/src/components/DocumentView/OpenAPI/OpenAPI.tsx | 6 +-----
 .../gitbook/src/components/DocumentView/OpenAPI/style.css   | 2 ++
 packages/react-openapi/src/OpenAPIOperation.tsx             | 4 +++-
 packages/react-openapi/src/types.ts                         | 3 +++
 5 files changed, 15 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/beige-snails-count.md

diff --git a/.changeset/beige-snails-count.md b/.changeset/beige-snails-count.md
new file mode 100644
index 000000000..dfd9b13b6
--- /dev/null
+++ b/.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
diff --git a/packages/gitbook/src/components/DocumentView/OpenAPI/OpenAPI.tsx b/packages/gitbook/src/components/DocumentView/OpenAPI/OpenAPI.tsx
index a08b7b936..c05cac1a8 100644
--- a/packages/gitbook/src/components/DocumentView/OpenAPI/OpenAPI.tsx
+++ b/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"
         />
diff --git a/packages/gitbook/src/components/DocumentView/OpenAPI/style.css b/packages/gitbook/src/components/DocumentView/OpenAPI/style.css
index fc90be37a..a3c1a6ff9 100644
--- a/packages/gitbook/src/components/DocumentView/OpenAPI/style.css
+++ b/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;
 }
 
diff --git a/packages/react-openapi/src/OpenAPIOperation.tsx b/packages/react-openapi/src/OpenAPIOperation.tsx
index a197fe110..505f9922f 100644
--- a/packages/react-openapi/src/OpenAPIOperation.tsx
+++ b/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}
diff --git a/packages/react-openapi/src/types.ts b/packages/react-openapi/src/types.ts
index 8de1cd8fd..a4195ba99 100644
--- a/packages/react-openapi/src/types.ts
+++ b/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 {