experiment with lazy render

Author: sserrata

packages/docusaurus-theme-openapi-docs/src/theme/ResponseSchema/index.tsx

@@ -5,8 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  * ========================================================================== */
 
-import React from "react";
+import React, { Suspense } from "react";
 
+import BrowserOnly from "@docusaurus/BrowserOnly";
 import Details from "@theme/Details";
 import MimeTabs from "@theme/MimeTabs"; // Assume these components exist
 import {
@@ -32,7 +33,11 @@ interface Props {
   };
 }
 
-const ResponseSchema: React.FC<Props> = ({ title, body, style }): any => {
+const ResponseSchemaComponent: React.FC<Props> = ({
+  title,
+  body,
+  style,
+}): any => {
   if (
     body === undefined ||
     body.content === undefined ||
@@ -125,4 +130,32 @@ const ResponseSchema: React.FC<Props> = ({ title, body, style }): any => {
   return undefined;
 };
 
+const ResponseSchema: React.FC<Props> = (props) => {
+  return (
+    <BrowserOnly
+      fallback={
+        <div className="openapi-explorer__loading-container">
+          <div className="openapi-response__lds-ring">
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+          </div>
+        </div>
+      }
+    >
+      {() => {
+        const LazyComponent = React.lazy(() =>
+          Promise.resolve({ default: ResponseSchemaComponent })
+        );
+        return (
+          <Suspense fallback={<div>Loading...</div>}>
+            <LazyComponent {...props} />
+          </Suspense>
+        );
+      }}
+    </BrowserOnly>
+  );
+};
+
 export default ResponseSchema;