From 3d156a99f334edea6f0db240cc9bb20cd9d10b19 Mon Sep 17 00:00:00 2001
From: Caspian Zhao <caspian.zhao@outlook.com>
Date: Sat, 5 Oct 2024 10:50:18 +0800
Subject: [PATCH] fix: demo app can't be displayed in doc site. (#697)

---
 example/app/app/+html.tsx           | 8 +-------
 example/website/components/Demo.tsx | 7 +++----
 2 files changed, 4 insertions(+), 11 deletions(-)

diff --git a/example/app/app/+html.tsx b/example/app/app/+html.tsx
index 03becf4c..cb8750cf 100644
--- a/example/app/app/+html.tsx
+++ b/example/app/app/+html.tsx
@@ -35,20 +35,14 @@ export default function Root({ children }: { children: React.ReactNode }) {
         dangerouslySetInnerHTML={{
           __html: `
             window.addEventListener("load", () => {
-              console.log("load called!");
-              console.log(window.location.search);
-              // get in_doc search param and condition if it's set to true
               const inDoc = window.location.search.includes("in_doc=true");
-              console.log("inDoc", inDoc);
+
               if (!inDoc) {
                 return;
               }
 
               const carouselComponent = document.getElementById("carousel-component");
-              console.log("carouselComponent exists!");
-              console.log(carouselComponent);
               if (carouselComponent) {
-                console.log(carouselComponent.offsetHeight);
                 window.parent.postMessage(
                   {
                     type: "carouselHeight",
diff --git a/example/website/components/Demo.tsx b/example/website/components/Demo.tsx
index 594f447c..bffccdaf 100644
--- a/example/website/components/Demo.tsx
+++ b/example/website/components/Demo.tsx
@@ -11,7 +11,6 @@ const ResizableIframe: React.FC<ResizableIframeProps> = ({ pagePath }) => {
   const handleIframeLoad = () => {
     // get carousel-component height by postmessage
     window.addEventListener("message", (event) => {
-      console.log(event);
       if (event.data.type === "carouselHeight") {
         setCarouselHeight(event.data.height);
         setIsLoading(false);
@@ -25,13 +24,13 @@ const ResizableIframe: React.FC<ResizableIframeProps> = ({ pagePath }) => {
         style={{
           marginTop: "24px",
           width: "100%",
-          height: carouselHeight ?? 280,
+          height: carouselHeight ?? 28,
           position: "relative",
           overflow: "hidden",
           transition: "height 0.3s ease-in-out",
         }}
       >
-        {/* {isLoading && <div style={{ textAlign: "center" }}>Loading...</div>} */}
+        {isLoading && <div style={{ textAlign: "center" }}>Loading...</div>}
         <iframe
           id="carousel-iframe"
           onLoad={handleIframeLoad}
@@ -41,7 +40,7 @@ const ResizableIframe: React.FC<ResizableIframeProps> = ({ pagePath }) => {
             height: "100%",
             border: "none",
             overflow: "hidden",
-            // opacity: isLoading ? 0 : 1,
+            opacity: isLoading ? 0 : 1,
           }}
         ></iframe>
       </div>