try lazy loading on all

Author: sserrata

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

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  * ========================================================================== */
 
-import React from "react";
+import React, { Suspense, useEffect, useState } from "react";
 
 import Details from "@theme/Details";
 import ParamsItem from "@theme/ParamsItem";
@@ -14,7 +14,28 @@ interface Props {
   parameters: any[];
 }
 
-const ParamsDetails: React.FC<Props> = ({ parameters }) => {
+const ParamsDetailsComponent: React.FC<Props> = ({ parameters }) => {
+  const [isClient, setIsClient] = useState(false);
+
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      setIsClient(true);
+    }
+  }, []);
+
+  if (!isClient) {
+    return (
+      <div className="openapi-explorer__loading-container">
+        <div className="openapi-response__lds-ring">
+          <div></div>
+          <div></div>
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+    );
+  }
+
   const types = ["path", "query", "header", "cookie"];
 
   return (
@@ -66,4 +87,15 @@ const ParamsDetails: React.FC<Props> = ({ parameters }) => {
   );
 };
 
+const ParamsDetails: React.FC<Props> = (props) => {
+  const LazyComponent = React.lazy(() =>
+    Promise.resolve({ default: ParamsDetailsComponent })
+  );
+  return (
+    <Suspense fallback={<div>Loading...</div>}>
+      <LazyComponent {...props} />
+    </Suspense>
+  );
+};
+
 export default ParamsDetails;

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

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  * ========================================================================== */
 
-import React from "react";
+import React, { Suspense, useEffect, useState } from "react";
 
 import Details from "@theme/Details";
 import MimeTabs from "@theme/MimeTabs"; // Assume these components exist
@@ -26,7 +26,28 @@ interface Props {
   };
 }
 
-const RequestSchema: React.FC<Props> = ({ title, body, style }) => {
+const RequestSchemaComponent: React.FC<Props> = ({ title, body, style }) => {
+  const [isClient, setIsClient] = useState(false);
+
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      setIsClient(true);
+    }
+  }, []);
+
+  if (!isClient) {
+    return (
+      <div className="openapi-explorer__loading-container">
+        <div className="openapi-response__lds-ring">
+          <div></div>
+          <div></div>
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+    );
+  }
+
   if (
     body === undefined ||
     body.content === undefined ||
@@ -142,4 +163,15 @@ const RequestSchema: React.FC<Props> = ({ title, body, style }) => {
   );
 };
 
+const RequestSchema: React.FC<Props> = (props) => {
+  const LazyComponent = React.lazy(() =>
+    Promise.resolve({ default: RequestSchemaComponent })
+  );
+  return (
+    <Suspense fallback={<div>Loading...</div>}>
+      <LazyComponent {...props} />
+    </Suspense>
+  );
+};
+
 export default RequestSchema;

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

@@ -40,7 +40,9 @@ const ResponseSchemaComponent: React.FC<Props> = ({
   const [isClient, setIsClient] = useState(false);
 
   useEffect(() => {
-    setIsClient(true);
+    if (typeof window !== "undefined") {
+      setIsClient(true);
+    }
   }, []);
 
   if (!isClient) {