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,95 @@
     <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" />
+
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      body {
+        font-family: Arial, sans-serif;
+        background-color: #f4f4f4;
+      }
+
+      /* Loader Styles */
+      .loading-overlay {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: rgba(255, 255, 255, 0.7);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        z-index: 9999;
+      }
+
+      .loading-container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 1em;
+      }
+
+      .loading {
+        background-color: lightgrey;
+        height: 2px;
+        overflow: hidden;
+        position: relative;
+        width: 12em;
+        border-radius: 2px;
+      }
+
+      .loading-bar {
+        animation: side2side 2s ease-in-out infinite;
+        background-color: dodgerblue;
+        height: 100%;
+        position: absolute;
+        width: 45%;
+      }
+
+      @keyframes side2side {
+        0%, 100% {
+          transform: translateX(-50%);
+        }
+        50% {
+          transform: translateX(150%);
+        }
+      }
+    </style>
+
+    <script>
+      window.onload = function() {
+        const loader = document.getElementById("loader");
+        const root = document.getElementById("root");
+
+        // Hide the loader and show the root when the page has fully loaded
+        loader.style.transition = "opacity 0.3s ease";
+        loader.style.opacity = "0"; // Fade out the loader
+        setTimeout(function() {
+          loader.style.display = "none"; // Hide loader completely
+          root.style.visibility = "visible"; // Show the root content
+        }, 300); // Match the opacity transition duration
+      };
+    </script>
   </head>
   <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
+    <div class="loaderanimation">
+      <div id="loader" class="loading-overlay">
+        <div class="loading-container">
+          <div class="loading">
+            <div class="loading-bar"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div id="root" class="loaderanimation" style="visibility: hidden;"></div> <!-- Initially hidden -->
+
+    <script type="module" src="./src/main.tsx"></script>
   </body>
 </html>
@@ -8,27 +8,24 @@ import React from "react"
 const lazyImport = (importFn: () => Promise<any>) =>
   lazy<ComponentType<any>>(async () => {
     try {
+      await new Promise((resolve) => setTimeout(resolve, 500))
       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"))
@@ -80,12 +78,11 @@ class ErrorBoundary extends React.Component<
     return this.props.children
   }
 }
-
 function App() {
   return (
     <ContextProviders>
       <ErrorBoundary>
-        <Suspense fallback={<div>Loading...</div>}>
+        <Suspense fallback={null}>
           <Switch>
             <Route path="/" component={LandingPage} />
             <Route path="/editor" component={EditorPage} />