Dev (#694)

* ci: add new CI job for testing

* chore: remove unused linting before commit

* ci: update testing CI

* ci: update yarn caching logic

* ci: refacor dependency caching logic in ci files

* ci: update CI trigger time

* docs: update example baseUrl

* fix: demo app can't dislay in doc site

* fix: demo app can't be displayed in doc site.

example/app/app/_layout.tsx

@@ -61,7 +61,9 @@ function RootLayoutNav() {
     if (IS_WEB && inDoc) {
       window.addEventListener("load", () => {
         const carouselComponent = document.getElementById("carousel-component");
+
         if (carouselComponent) {
+          console.log(carouselComponent.offsetHeight);
           window.parent.postMessage(
             {
               type: "carouselHeight",

example/website/components/Demo.tsx

@@ -11,6 +11,7 @@ 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);
@@ -24,13 +25,13 @@ const ResizableIframe: React.FC<ResizableIframeProps> = ({ pagePath }) => {
         style={{
           marginTop: "24px",
           width: "100%",
-          height: carouselHeight ?? 28,
+          height: carouselHeight ?? 280,
           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}
@@ -40,7 +41,7 @@ const ResizableIframe: React.FC<ResizableIframeProps> = ({ pagePath }) => {
             height: "100%",
             border: "none",
             overflow: "hidden",
-            opacity: isLoading ? 0 : 1,
+            // opacity: isLoading ? 0 : 1,
           }}
         ></iframe>
       </div>