From 05122433def1e673d987f595358e2bc28e430bc6 Mon Sep 17 00:00:00 2001
From: Steven Serrata <sserrata@paloaltonetworks.com>
Date: Mon, 7 Oct 2024 14:57:03 -0400
Subject: [PATCH] try lazy loading on all

---
 .../src/theme/ParamsDetails/index.tsx         | 36 +++++++++++++++++--
 .../src/theme/RequestSchema/index.tsx         | 36 +++++++++++++++++--
 .../src/theme/ResponseSchema/index.tsx        |  4 ++-
 3 files changed, 71 insertions(+), 5 deletions(-)

diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/ParamsDetails/index.tsx b/packages/docusaurus-theme-openapi-docs/src/theme/ParamsDetails/index.tsx
index 51228c15d..c612740b6 100644
--- a/packages/docusaurus-theme-openapi-docs/src/theme/ParamsDetails/index.tsx
+++ b/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;
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/RequestSchema/index.tsx b/packages/docusaurus-theme-openapi-docs/src/theme/RequestSchema/index.tsx
index bf3c808ac..4790a867e 100644
--- a/packages/docusaurus-theme-openapi-docs/src/theme/RequestSchema/index.tsx
+++ b/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;
diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/ResponseSchema/index.tsx b/packages/docusaurus-theme-openapi-docs/src/theme/ResponseSchema/index.tsx
index 95c38a010..cf4d2fa2c 100644
--- a/packages/docusaurus-theme-openapi-docs/src/theme/ResponseSchema/index.tsx
+++ b/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) {