add skeleton until the iframe is loaded

src/components/TscircuitIframe.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from "react"
+import { useEffect, useRef, useState } from "react"
 
 export interface TscircuitIframeProps {
   fsMap?: Record<string, string>
@@ -8,6 +8,7 @@ export interface TscircuitIframeProps {
 
 export const TscircuitIframe = (runFrameProps: TscircuitIframeProps) => {
   const iframeRef = useRef<HTMLIFrameElement>(null)
+  const [isLoading, setIsLoading] = useState(true)
 
   let additionalProps = {}
 
@@ -29,6 +30,7 @@ export const TscircuitIframe = (runFrameProps: TscircuitIframeProps) => {
           },
           "*",
         )
+        setIsLoading(false)
       }
     }
 
@@ -38,6 +40,14 @@ export const TscircuitIframe = (runFrameProps: TscircuitIframeProps) => {
 
   return (
     <div>
+      {isLoading && (
+        <div className="skeleton-container">
+          <div>
+            <div className="skeleton-header" />
+            <div className="skeleton-body" />
+          </div>
+        </div>
+      )}
       <iframe
         ref={iframeRef}
         src="https://runframe.tscircuit.com/iframe.html"
@@ -52,6 +62,11 @@ export const TscircuitIframe = (runFrameProps: TscircuitIframeProps) => {
           padding: 0,
           margin: 0,
           boxSizing: "border-box",
+          display: isLoading ? "none" : "block",
+        }}
+        onLoad={() => {
+          // The iframe is loaded, but we'll only hide the skeleton 
+          // when we receive the "runframe_ready_to_receive" message
         }}
       />
     </div>

src/css/custom.css

@@ -134,3 +134,43 @@ html,
 body {
   overflow-x: hidden !important;
 }
+
+.skeleton-container {
+  width: 100%;
+  height: 600px;
+  background: #ededf1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid #d0d8e8; 
+  border-radius: 4px;
+  position: relative;
+  overflow: hidden;
+}
+
+.skeleton-container::after {
+  content: "";
+  position: absolute;
+  top: -50%;
+  left: -50%;
+  right: -50%;
+  bottom: -50%;
+  background: linear-gradient(
+    90deg, 
+    rgba(255,255,255,0) 0%,
+    rgba(197, 197, 198, 0.4) 50%,
+    rgba(255,255,255,0) 100%
+  );
+  animation: shimmer 2.5s infinite;
+  transform: rotate(30deg);
+  z-index: 1;
+}
+
+@keyframes shimmer {
+  0% {
+    transform: translate(-100%, -100%) rotate(30deg);
+  }
+  100% {
+    transform: translate(100%, 100%) rotate(30deg);
+  }
+}