Load Scalar only when the button is pressed (#2790)

.changeset/selfish-badgers-smile.md

@@ -0,0 +1,5 @@
+---
+'@gitbook/react-openapi': patch
+---
+
+Improve performances by loading Scalar API Client only when the button is clicked

packages/react-openapi/src/OpenAPICodeSample.tsx

@@ -123,7 +123,11 @@ export function OpenAPICodeSample(props: {
             tabs={samples}
             overlay={
                 data['x-hideTryItPanel'] || data.operation['x-hideTryItPanel'] ? null : (
-                    <ScalarApiButton method={data.method} path={data.path} />
+                    <ScalarApiButton
+                        method={data.method}
+                        path={data.path}
+                        specUrl={context.specUrl}
+                    />
                 )
             }
         />

packages/react-openapi/src/OpenAPIOperation.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import classNames from 'classnames';
-import { ApiClientModalProvider } from '@scalar/api-client-react';
 
 import { OpenAPIOperationData } from './fetchOpenAPIOperation';
 import { Markdown } from './Markdown';
@@ -28,10 +27,6 @@ export function OpenAPIOperation(props: {
     };
 
     return (
-        <ApiClientModalProvider
-            configuration={{ spec: { url: context.specUrl } }}
-            initialRequest={{ path: data.path, method: data.method }}
-        >
         <div className={classNames('openapi-operation', className)}>
             <div className="openapi-intro">
                 <h2 className="openapi-summary" id={context.id}>
@@ -67,6 +62,5 @@ export function OpenAPIOperation(props: {
                 </div>
             </div>
         </div>
-        </ApiClientModalProvider>
     );
 }

packages/react-openapi/src/ScalarApiButton.tsx

@@ -1,23 +1,33 @@
 'use client';
 
-import { useApiClientModal } from '@scalar/api-client-react';
+import { ApiClientModalProvider, useApiClientModal } from '@scalar/api-client-react';
-import React from 'react';
+import React, { useImperativeHandle, useRef } from 'react';
+import { createPortal } from 'react-dom';
 
 import { useOpenAPIOperationContext } from './OpenAPIOperationContext';
+import { useEventCallback } from 'usehooks-ts';
 
 /**
  * Button which launches the Scalar API Client
  */
-export function ScalarApiButton({ method, path }: { method: string; path: string }) {
+export function ScalarApiButton({
-    const client = useApiClientModal();
+    method,
-    const { onOpenClient } = useOpenAPIOperationContext();
+    path,
+    specUrl,
+}: {
+    method: string;
+    path: string;
+    specUrl: string;
+}) {
+    const [isOpen, setIsOpen] = React.useState(false);
+    const controllerRef = useRef<ScalarModalControllerRef>(null);
     return (
         <div className="scalar scalar-activate">
             <button
                 className="scalar-activate-button"
                 onClick={() => {
-                    client?.open({ method, path });
+                    controllerRef.current?.openClient?.();
-                    onOpenClient({ method, path });
+                    setIsOpen(true);
                 }}
             >
                 <svg xmlns="http://www.w3.org/2000/svg" width="10" height="12" fill="none">
@@ -29,6 +39,68 @@ export function ScalarApiButton({ method, path }: { method: string; path: string
                 </svg>
                 Test it
             </button>
+
+            {isOpen &&
+                createPortal(
+                    <ScalarModal
+                        controllerRef={controllerRef}
+                        method={method}
+                        path={path}
+                        specUrl={specUrl}
+                    />,
+                    document.body,
+                )}
         </div>
     );
 }
+
+function ScalarModal(props: {
+    method: string;
+    path: string;
+    specUrl: string;
+    controllerRef: React.Ref<ScalarModalControllerRef>;
+}) {
+    return (
+        <ApiClientModalProvider
+            configuration={{ spec: { url: props.specUrl } }}
+            initialRequest={{ path: props.path, method: props.method }}
+        >
+            <ScalarModalController
+                method={props.method}
+                path={props.path}
+                controllerRef={props.controllerRef}
+            />
+        </ApiClientModalProvider>
+    );
+}
+
+type ScalarModalControllerRef = {
+    openClient: (() => void) | undefined;
+};
+
+function ScalarModalController(props: {
+    method: string;
+    path: string;
+    controllerRef: React.Ref<ScalarModalControllerRef>;
+}) {
+    const client = useApiClientModal();
+    const openClient = client?.open;
+    useImperativeHandle(
+        props.controllerRef,
+        () => ({ openClient: openClient ? () => openClient() : undefined }),
+        [openClient],
+    );
+
+    // Open the client when the component is mounted.
+    const { onOpenClient } = useOpenAPIOperationContext();
+    const trackOpening = useEventCallback(() => {
+        onOpenClient({ method: props.method, path: props.path });
+    });
+    React.useEffect(() => {
+        if (openClient) {
+            openClient();
+            trackOpening();
+        }
+    }, [openClient]);
+    return null;
+}