fixed formate issue

removed cleanup and hiding of the skeleton from script tag inside index.html using cleanup and hiding of the skeleton with useEffect() in app.tsx Signed-off-by: Saurabhsing21 <[email protected]>
tscircuit · Jan 16, 2025 · 576bfce · 576bfce
1 parent 00f3c90
commit 576bfce
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 31 deletions.
diff --git a/index.html b/index.html
@@ -200,17 +200,6 @@
 
     <script type="module" src="/src/main.tsx"></script>
 
-    <!-- Script to Hide Skeleton -->
-    <script>
-      document.addEventListener("DOMContentLoaded", () => {
-        const skeletonLoader = document.getElementById("skeleton-loader");
-        if (skeletonLoader) {
-          console.log("Skeleton Loader is displayed.");
-          setTimeout(() => {
-            skeletonLoader.style.display = "none";
-          }, 300); // Hide skeleton after React initializes
-        }
-      });
-    </script>
+
   </body>
 </html>
diff --git a/src/App.tsx b/src/App.tsx
@@ -36,27 +36,27 @@ 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"))
+const AiPage = lazyImport(() => import("@/pages/ai"));
+const AuthenticatePage = lazyImport(() => import("@/pages/authorize"));
+const DashboardPage = lazyImport(() => import("@/pages/dashboard"));
 const EditorPage = lazyImport(async () => {
   const [editorModule] = await Promise.all([
     import("@/pages/editor"),
     import("@/lib/utils/load-prettier").then((m) => m.loadPrettier()),
-  ])
-  return editorModule
-})
-const LandingPage = lazyImport(() => import("@/pages/landing"))
-const MyOrdersPage = lazyImport(() => import("@/pages/my-orders"))
-const NewestPage = lazyImport(() => import("@/pages/newest"))
-const PreviewPage = lazyImport(() => import("@/pages/preview"))
-const QuickstartPage = lazyImport(() => import("@/pages/quickstart"))
-const SearchPage = lazyImport(() => import("@/pages/search"))
-const SettingsPage = lazyImport(() => import("@/pages/settings"))
-const UserProfilePage = lazyImport(() => import("@/pages/user-profile"))
-const ViewOrderPage = lazyImport(() => import("@/pages/view-order"))
-const ViewSnippetPage = lazyImport(() => import("@/pages/view-snippet"))
-const DevLoginPage = lazyImport(() => import("@/pages/dev-login"))
+  ]);
+  return editorModule;
+});
+const LandingPage = lazyImport(() => import("@/pages/landing"));
+const MyOrdersPage = lazyImport(() => import("@/pages/my-orders"));
+const NewestPage = lazyImport(() => import("@/pages/newest"));
+const PreviewPage = lazyImport(() => import("@/pages/preview"));
+const QuickstartPage = lazyImport(() => import("@/pages/quickstart"));
+const SearchPage = lazyImport(() => import("@/pages/search"));
+const SettingsPage = lazyImport(() => import("@/pages/settings"));
+const UserProfilePage = lazyImport(() => import("@/pages/user-profile"));
+const ViewOrderPage = lazyImport(() => import("@/pages/view-order"));
+const ViewSnippetPage = lazyImport(() => import("@/pages/view-snippet"));
+const DevLoginPage = lazyImport(() => import("@/pages/dev-login"));
 
 class ErrorBoundary extends React.Component<
   { children: React.ReactNode },
@@ -92,8 +92,7 @@ function App() {
   return (
     <ContextProviders>
       <ErrorBoundary>
-
-        <Suspense fallback={<h5 id="skeleton-loader"/>}>
+        <Suspense fallback={<h5 id="skeleton-loader" />}>
           <Switch>
             <Route path="/" component={LandingPage} />
             <Route path="/editor" component={EditorPage} />