tscircuit · Saurabhsing21 · Jan 15, 2025 · Jan 15, 2025 · Jan 16, 2025 · Jan 16, 2025
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="robots" content="index, follow, NOODP" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="icon" href="/favicon.ico" type="image/x-icon" sizes="16x16">
+    <link rel="icon" href="/favicon.ico" type="image/x-icon" sizes="16x16" />
     <title>tscircuit - Code Electronics with React</title>
     <meta name="description" content="tscircuit is an open-source electronics design tool that lets you create circuits using React components. Design schematics, generate PCB layouts, export and manufacture PCBs online!" />
     <meta name="keywords" content="electronic design, PCB design, schematic capture, React components, circuit design, electronics CAD, open source EDA" />
@@ -15,9 +15,87 @@
     <meta name="twitter:title" content="tscircuit - Design Electronics with React Components" />
     <meta name="twitter:description" content="Create electronic circuits using React components. Free open-source electronics design tool." />
     <link rel="canonical" href="https://tscircuit.com" />
+    <!-- Inline CSS for Skeleton Loader -->
+    <style>
+      /* Reset styles */
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      body {
+        font-family: Arial, sans-serif;
+        background-color: #f4f4f4;
+      }
+
+      /* Loader Overlay */
+      .loading-overlay {
+        position: fixed; /* Fixed position to overlay on top */
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: rgba(255, 255, 255, 0.7); /* Semi-transparent background */
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        z-index: 9999; /* Make sure it's on top of other elements */
+      }
+
+      .loading-container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 1em;
+      }
+
+      /* Loading bar container */
+      .loading {
+        background-color: lightgrey;
+        height: 5px;
+        overflow: hidden;
+        position: relative;
+        width: 12em;
+        border-radius: 2px;
+      }
+
+      /* Animated loading bar */
+      .loading-bar {
+        animation: side2side 2s ease-in-out infinite;
+        background-color: dodgerblue;
+        height: 100%;
+        position: absolute;
+        width: 50%;
+      }
+
+      /* Keyframes for loading bar movement */
+      @keyframes side2side {
+        0%, 100% {
+          transform: translateX(-50%);
+        }
+        50% {
+          transform: translateX(150%);
+        }
+      }
+
+    </style>
   </head>
   <body>
+    <div id="skeleton-loader" class="loading-container"> <!-- Loading Overlay (appears over all content) -->
+    <div id="loading-overlay" class="loading-overlay">
+      <div class="loading-container">
+        <!-- Loading bar -->
+        <div class="loading">
+          <div class="loading-bar"></div>
+        </div>
+      </div>
+    </div>
+  </div> 
+
+    <!-- Main Content (other sections) -->
     <div id="root"></div>
+
     <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>
@@ -1,34 +1,31 @@
-import { ComponentType, Suspense, lazy } from "react"
+import { ComponentType, Suspense, lazy, useEffect } from "react" // Added `useEffect` for handling skeleton cleanup
 import { Toaster } from "@/components/ui/toaster"
 import { Route, Switch } from "wouter"
 import "./components/CmdKMenu"
 import { ContextProviders } from "./ContextProviders"
 import React from "react"
 
+// Lazy loading helper
 const lazyImport = (importFn: () => Promise<any>) =>
   lazy<ComponentType<any>>(async () => {
     try {
       const module = await importFn()
-
       if (module.default) {
         return { default: module.default }
       }
-
       const pageExportNames = ["Page", "Component", "View"]
       for (const suffix of pageExportNames) {
         const keys = Object.keys(module).filter((key) => key.endsWith(suffix))
         if (keys.length > 0) {
           return { default: module[keys[0]] }
         }
       }
-
       const componentExport = Object.values(module).find(
         (exp) => typeof exp === "function" && exp.prototype?.isReactComponent,
       )
       if (componentExport) {
         return { default: componentExport }
       }
-
       throw new Error(
         `No valid React component found in module. Available exports: ${Object.keys(module).join(", ")}`,
       )
@@ -38,6 +35,7 @@ const lazyImport = (importFn: () => Promise<any>) =>
     }
   })
 
+// Lazy-loaded pages
 const AiPage = lazyImport(() => import("@/pages/ai"))
 const AuthenticatePage = lazyImport(() => import("@/pages/authorize"))
 const DashboardPage = lazyImport(() => import("@/pages/dashboard"))
@@ -82,10 +80,27 @@ class ErrorBoundary extends React.Component<
 }
 
 function App() {
+  // Added useEffect to handle cleanup of the skeleton loader
+  useEffect(() => {
+    // Hide the skeleton from index.html when React mounts
+    const skeletonLoader = document.getElementById("skeleton-loader")
+    if (skeletonLoader) {
+      skeletonLoader.style.display = "none"
+    }
+  }, [])
+  const renderSkeleton = () => {
+    const skeletonLoader = document.getElementById("skeleton-loader")
+    if (skeletonLoader) {
+      return (
+        <div dangerouslySetInnerHTML={{ __html: skeletonLoader.outerHTML }} />
+      )
+    }
+    return null
+  }
   return (
     <ContextProviders>
       <ErrorBoundary>
-        <Suspense fallback={<div>Loading...</div>}>
+        <Suspense fallback={renderSkeleton()}>
           <Switch>
             <Route path="/" component={LandingPage} />
             <Route path="/editor" component={EditorPage} />