From f3dd0a3ddbb78861db23cc1a1fd0d1b271e2733c Mon Sep 17 00:00:00 2001 From: Saurabhsing21 Date: Wed, 15 Jan 2025 11:51:53 +0530 Subject: [PATCH 01/13] Signed-off-by: Saurabhsing21 SkeletonLoaderSkeletonLoader# --- landing.html | 82 +++++++++++--- src/App.tsx | 7 +- src/components/SkeletonLoader.tsx | 175 ++++++++++++++++++++++++++++++ 3 files changed, 249 insertions(+), 15 deletions(-) create mode 100644 src/components/SkeletonLoader.tsx diff --git a/landing.html b/landing.html index 4cd77954..c6d876e9 100644 --- a/landing.html +++ b/landing.html @@ -2,22 +2,76 @@ - - - tscircuit - Code Electronics with React - - - - - - - - - + AI Page - Loading + -
- + +
+
+
Loading AI Page...
+
+ + + + + diff --git a/src/App.tsx b/src/App.tsx index 49adbf97..f26eaa47 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -4,6 +4,11 @@ import { Route, Switch } from "wouter" import "./components/CmdKMenu" import { ContextProviders } from "./ContextProviders" import React from "react" +import { Skeleton } from "./components/ui/skeleton" +import SkeletonLoadingPage from "./components/SkeletonLoader" +import UniversalSkeleton from "./components/SkeletonLoader" +import FullSkeletonLoader from "./components/SkeletonLoader" +import FullPageSkeletonLoader from "./components/SkeletonLoader" const lazyImport = (importFn: () => Promise) => lazy>(async () => { @@ -85,7 +90,7 @@ function App() { return ( - Loading...}> + }> diff --git a/src/components/SkeletonLoader.tsx b/src/components/SkeletonLoader.tsx new file mode 100644 index 00000000..883f990e --- /dev/null +++ b/src/components/SkeletonLoader.tsx @@ -0,0 +1,175 @@ +import React from "react"; +import styled, { keyframes } from "styled-components"; + +const FullPageSkeletonLoader: React.FC = () => { + return ( + + {/* Navigation Skeleton */} + + + + {[...Array(4)].map((_, index) => ( + + ))} + + + + + + + + {/* Mid Content Skeleton */} + + + {/* Initial lines with different lengths */} + {[...Array(3)].map((_, index) => ( + + ))} + + {/* Two horizontal boxes */} + + + + + + {/* Additional lines with varying lengths */} + {[...Array(5)].map((_, index) => ( + + ))} + + + {[...Array(5)].map((_, index) => ( + + ))} + + + + ); +}; + +// Shimmer animation for skeleton +const shimmer = keyframes` + 0% { + background-position: -150%; + } + 100% { + background-position: 150%; + } +`; + +// Styled Skeleton Components +const SkeletonBase = styled.div` + background: linear-gradient( + 90deg, + #f0f0f0 25%, + #e0e0e0 50%, + #f0f0f0 75% + ); + background-size: 200% 100%; + animation: ${shimmer} 1.5s infinite ease-in-out; + border-radius: 8px; +`; + +const PageWrapper = styled.div` + display: flex; + flex-direction: column; + gap: 16px; + height: 100vh; /* Full screen height */ + padding: 0; + margin: 0; +`; + +const NavSkeleton = styled.div` + display: flex; + align-items: center; + justify-content: space-between; + padding: 12px 20px; + background: #ffffff; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); + border-radius: 8px; +`; + +const LogoPlaceholder = styled(SkeletonBase)` + width: 100px; + height: 40px; + border-radius: 4px; +`; + +const NavItems = styled.div` + display: flex; + gap: 16px; +`; + +const NavItem = styled(SkeletonBase)` + width: 80px; + height: 20px; + border-radius: 4px; +`; + +const ActionButtons = styled.div` + display: flex; + gap: 12px; +`; + +const ActionPlaceholder = styled(SkeletonBase)<{ width: string }>` + width: ${(props) => props.width}; + height: 40px; + border-radius: 8px; +`; + +const ContentSkeleton = styled.div` + flex: 1; /* Fills remaining space dynamically */ + display: flex; + flex-direction: row; + gap: 24px; /* Space between content and sidebar */ + padding: 20px; + background: #ffffff; + border-radius: 8px; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); + overflow-y: auto; /* Allows scrolling if content overflows */ +`; + +const MainContent = styled.div` + flex: 3; /* Takes up most of the width */ + display: flex; + flex-direction: column; + gap: 24px; /* Space between lines */ +`; + +const BoxContainer = styled.div` + display: flex; + gap: 16px; /* Space between boxes */ +`; + +const Box = styled(SkeletonBase)` + flex: 1; /* Equal width for both boxes */ + height: 120px; + border-radius: 8px; +`; + +const Sidebar = styled.div` + flex: 1; /* Smaller width for the sidebar */ + display: flex; + flex-direction: column; + gap: 16px; /* Space between blocks */ +`; + +const HorizontalLine = styled(SkeletonBase)` + width: 100%; + height: 16px; + border-radius: 8px; +`; + +const SidebarBlock = styled(SkeletonBase)` + width: 100%; + height: 80px; + border-radius: 8px; +`; + +export default FullPageSkeletonLoader; From 4f2ff58ea3774b45d1547848a3653185e07f3970 Mon Sep 17 00:00:00 2001 From: Saurabhsing21 Date: Wed, 15 Jan 2025 12:02:53 +0530 Subject: [PATCH 02/13] implemented skeletons loading page, for all navigation --- landing.html | 82 +++++++++------------------------------------------- 1 file changed, 14 insertions(+), 68 deletions(-) diff --git a/landing.html b/landing.html index c6d876e9..4cd77954 100644 --- a/landing.html +++ b/landing.html @@ -2,76 +2,22 @@ + - AI Page - Loading - + + tscircuit - Code Electronics with React + + + + + + + + + - -
-
-
Loading AI Page...
-
- - - - - +
+ From 175e85bf3ff5dbc7c86c5b0e3d0f429654163be1 Mon Sep 17 00:00:00 2001 From: Saurabhsing21 Date: Thu, 16 Jan 2025 13:57:36 +0530 Subject: [PATCH 03/13] feat: Implement fancy loading page with skeleton (#533) - Added a simple and lightweight skeleton loading page for all navigation. - Ensured no JavaScript is loaded via + + + diff --git a/src/App.tsx b/src/App.tsx index f26eaa47..50b86ded 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,96 +1,93 @@ -import { ComponentType, Suspense, lazy } from "react" -import { Toaster } from "@/components/ui/toaster" -import { Route, Switch } from "wouter" -import "./components/CmdKMenu" -import { ContextProviders } from "./ContextProviders" -import React from "react" -import { Skeleton } from "./components/ui/skeleton" -import SkeletonLoadingPage from "./components/SkeletonLoader" -import UniversalSkeleton from "./components/SkeletonLoader" -import FullSkeletonLoader from "./components/SkeletonLoader" -import FullPageSkeletonLoader from "./components/SkeletonLoader" +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) => lazy>(async () => { try { - const module = await importFn() - + const module = await importFn(); if (module.default) { - return { default: module.default } + return { default: module.default }; } - - const pageExportNames = ["Page", "Component", "View"] + const pageExportNames = ["Page", "Component", "View"]; for (const suffix of pageExportNames) { - const keys = Object.keys(module).filter((key) => key.endsWith(suffix)) + const keys = Object.keys(module).filter((key) => key.endsWith(suffix)); if (keys.length > 0) { - return { default: module[keys[0]] } + return { default: module[keys[0]] }; } } - const componentExport = Object.values(module).find( - (exp) => typeof exp === "function" && exp.prototype?.isReactComponent, - ) + (exp) => typeof exp === "function" && exp.prototype?.isReactComponent + ); if (componentExport) { - return { default: componentExport } + return { default: componentExport }; } - throw new Error( - `No valid React component found in module. Available exports: ${Object.keys(module).join(", ")}`, - ) + `No valid React component found in module. Available exports: ${Object.keys(module).join(", ")}` + ); } catch (error) { - console.error("Failed to load component:", error) - throw error + console.error("Failed to load component:", error); + throw error; } - }) + }); -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")) +// Lazy-loaded pages +const LandingPage = lazyImport(() => import("@/pages/landing")); +const EditorPage = lazyImport(() => import("@/pages/editor")); +const QuickstartPage = lazyImport(() => import("@/pages/quickstart")); +const DashboardPage = lazyImport(() => import("@/pages/dashboard")); +const AiPage = lazyImport(() => import("@/pages/ai")); +const NewestPage = lazyImport(() => import("@/pages/newest")); +const SettingsPage = lazyImport(() => import("@/pages/settings")); +const SearchPage = lazyImport(() => import("@/pages/search")); +const AuthenticatePage = lazyImport(() => import("@/pages/authorize")); +const MyOrdersPage = lazyImport(() => import("@/pages/my-orders")); +const ViewOrderPage = lazyImport(() => import("@/pages/view-order")); +const PreviewPage = lazyImport(() => import("@/pages/preview")); +const DevLoginPage = lazyImport(() => import("@/pages/dev-login")); +const UserProfilePage = lazyImport(() => import("@/pages/user-profile")); +const ViewSnippetPage = lazyImport(() => import("@/pages/view-snippet")); class ErrorBoundary extends React.Component< { children: React.ReactNode }, { hasError: boolean } > { constructor(props: { children: React.ReactNode }) { - super(props) - this.state = { hasError: false } + super(props); + this.state = { hasError: false }; } static getDerivedStateFromError() { - return { hasError: true } + return { hasError: true }; } render() { if (this.state.hasError) { - return
Something went wrong loading the page.
+ return
Something went wrong loading the page.
; } - return this.props.children + return this.props.children; } } 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"; // Hides the skeleton after the React app is ready + } + }, []); + return ( - }> + {/* Modified Suspense fallback to use the skeleton loader from index.html */} + }> @@ -112,7 +109,7 @@ function App() { - ) + ); } -export default App +export default App; diff --git a/src/components/SkeletonLoader.tsx b/src/components/SkeletonLoader.tsx deleted file mode 100644 index 883f990e..00000000 --- a/src/components/SkeletonLoader.tsx +++ /dev/null @@ -1,175 +0,0 @@ -import React from "react"; -import styled, { keyframes } from "styled-components"; - -const FullPageSkeletonLoader: React.FC = () => { - return ( - - {/* Navigation Skeleton */} - - - - {[...Array(4)].map((_, index) => ( - - ))} - - - - - - - - {/* Mid Content Skeleton */} - - - {/* Initial lines with different lengths */} - {[...Array(3)].map((_, index) => ( - - ))} - - {/* Two horizontal boxes */} - - - - - - {/* Additional lines with varying lengths */} - {[...Array(5)].map((_, index) => ( - - ))} - - - {[...Array(5)].map((_, index) => ( - - ))} - - - - ); -}; - -// Shimmer animation for skeleton -const shimmer = keyframes` - 0% { - background-position: -150%; - } - 100% { - background-position: 150%; - } -`; - -// Styled Skeleton Components -const SkeletonBase = styled.div` - background: linear-gradient( - 90deg, - #f0f0f0 25%, - #e0e0e0 50%, - #f0f0f0 75% - ); - background-size: 200% 100%; - animation: ${shimmer} 1.5s infinite ease-in-out; - border-radius: 8px; -`; - -const PageWrapper = styled.div` - display: flex; - flex-direction: column; - gap: 16px; - height: 100vh; /* Full screen height */ - padding: 0; - margin: 0; -`; - -const NavSkeleton = styled.div` - display: flex; - align-items: center; - justify-content: space-between; - padding: 12px 20px; - background: #ffffff; - box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); - border-radius: 8px; -`; - -const LogoPlaceholder = styled(SkeletonBase)` - width: 100px; - height: 40px; - border-radius: 4px; -`; - -const NavItems = styled.div` - display: flex; - gap: 16px; -`; - -const NavItem = styled(SkeletonBase)` - width: 80px; - height: 20px; - border-radius: 4px; -`; - -const ActionButtons = styled.div` - display: flex; - gap: 12px; -`; - -const ActionPlaceholder = styled(SkeletonBase)<{ width: string }>` - width: ${(props) => props.width}; - height: 40px; - border-radius: 8px; -`; - -const ContentSkeleton = styled.div` - flex: 1; /* Fills remaining space dynamically */ - display: flex; - flex-direction: row; - gap: 24px; /* Space between content and sidebar */ - padding: 20px; - background: #ffffff; - border-radius: 8px; - box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); - overflow-y: auto; /* Allows scrolling if content overflows */ -`; - -const MainContent = styled.div` - flex: 3; /* Takes up most of the width */ - display: flex; - flex-direction: column; - gap: 24px; /* Space between lines */ -`; - -const BoxContainer = styled.div` - display: flex; - gap: 16px; /* Space between boxes */ -`; - -const Box = styled(SkeletonBase)` - flex: 1; /* Equal width for both boxes */ - height: 120px; - border-radius: 8px; -`; - -const Sidebar = styled.div` - flex: 1; /* Smaller width for the sidebar */ - display: flex; - flex-direction: column; - gap: 16px; /* Space between blocks */ -`; - -const HorizontalLine = styled(SkeletonBase)` - width: 100%; - height: 16px; - border-radius: 8px; -`; - -const SidebarBlock = styled(SkeletonBase)` - width: 100%; - height: 80px; - border-radius: 8px; -`; - -export default FullPageSkeletonLoader; From d13340a9756137df700dc85de9b3cca34433cd13 Mon Sep 17 00:00:00 2001 From: Saurabhsing21 Date: Thu, 16 Jan 2025 13:58:31 +0530 Subject: [PATCH 04/13] feat: Implement fancy loading page with skeleton (#533) - Added a simple and lightweight skeleton loading page for all navigation. - Ensured no JavaScript is loaded via diff --git a/src/App.tsx b/src/App.tsx index 50b86ded..1dd3c340 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -86,7 +86,7 @@ function App() { return ( - {/* Modified Suspense fallback to use the skeleton loader from index.html */} + }> From 00f3c90e4231795cec088f326fb998f00fa2bb13 Mon Sep 17 00:00:00 2001 From: Saurabhsing21 Date: Thu, 16 Jan 2025 14:03:30 +0530 Subject: [PATCH 05/13] fixed lazyImport --- src/App.tsx | 36 +++++++++++++++++++++--------------- 1 file changed, 21 insertions(+), 15 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 1dd3c340..77b3ddd3 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -36,21 +36,27 @@ const lazyImport = (importFn: () => Promise) => }); // Lazy-loaded pages -const LandingPage = lazyImport(() => import("@/pages/landing")); -const EditorPage = lazyImport(() => import("@/pages/editor")); -const QuickstartPage = lazyImport(() => import("@/pages/quickstart")); -const DashboardPage = lazyImport(() => import("@/pages/dashboard")); -const AiPage = lazyImport(() => import("@/pages/ai")); -const NewestPage = lazyImport(() => import("@/pages/newest")); -const SettingsPage = lazyImport(() => import("@/pages/settings")); -const SearchPage = lazyImport(() => import("@/pages/search")); -const AuthenticatePage = lazyImport(() => import("@/pages/authorize")); -const MyOrdersPage = lazyImport(() => import("@/pages/my-orders")); -const ViewOrderPage = lazyImport(() => import("@/pages/view-order")); -const PreviewPage = lazyImport(() => import("@/pages/preview")); -const DevLoginPage = lazyImport(() => import("@/pages/dev-login")); -const UserProfilePage = lazyImport(() => import("@/pages/user-profile")); -const ViewSnippetPage = lazyImport(() => import("@/pages/view-snippet")); +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")) class ErrorBoundary extends React.Component< { children: React.ReactNode }, From 576bfce392a5123a5d2362774d654f505d5590c8 Mon Sep 17 00:00:00 2001 From: Saurabhsing21 Date: Thu, 16 Jan 2025 16:48:37 +0530 Subject: [PATCH 06/13] 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 --- index.html | 13 +------------ src/App.tsx | 37 ++++++++++++++++++------------------- 2 files changed, 19 insertions(+), 31 deletions(-) diff --git a/index.html b/index.html index 179e8c15..3e54a5bc 100644 --- a/index.html +++ b/index.html @@ -200,17 +200,6 @@ - - + diff --git a/src/App.tsx b/src/App.tsx index 77b3ddd3..93710361 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -36,27 +36,27 @@ const lazyImport = (importFn: () => Promise) => }); // 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 ( - - }> + }> From 9f3f45c52419a43e66f3a5b01e7d86f501fc5ce7 Mon Sep 17 00:00:00 2001 From: Saurabhsing21 Date: Thu, 16 Jan 2025 17:15:23 +0530 Subject: [PATCH 07/13] -fixed formate issue Signed-off-by: Saurabhsing21 --- src/App.tsx | 84 ++++++++++++++++++++++++++--------------------------- 1 file changed, 42 insertions(+), 42 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 93710361..e4771185 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,81 +1,81 @@ -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"; +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) => lazy>(async () => { try { - const module = await importFn(); + const module = await importFn() if (module.default) { - return { default: module.default }; + return { default: module.default } } - const pageExportNames = ["Page", "Component", "View"]; + const pageExportNames = ["Page", "Component", "View"] for (const suffix of pageExportNames) { - const keys = Object.keys(module).filter((key) => key.endsWith(suffix)); + const keys = Object.keys(module).filter((key) => key.endsWith(suffix)) if (keys.length > 0) { - return { default: module[keys[0]] }; + return { default: module[keys[0]] } } } const componentExport = Object.values(module).find( (exp) => typeof exp === "function" && exp.prototype?.isReactComponent - ); + ) if (componentExport) { - return { default: componentExport }; + return { default: componentExport } } throw new Error( `No valid React component found in module. Available exports: ${Object.keys(module).join(", ")}` - ); + ) } catch (error) { - console.error("Failed to load component:", error); - throw error; + console.error("Failed to load component:", error) + throw error } - }); + }) // 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")); +}) +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 }, { hasError: boolean } > { constructor(props: { children: React.ReactNode }) { - super(props); + super(props) this.state = { hasError: false }; } static getDerivedStateFromError() { - return { hasError: true }; + return { hasError: true } } render() { if (this.state.hasError) { - return
Something went wrong loading the page.
; + return
Something went wrong loading the page.
} - return this.props.children; + return this.props.children } } @@ -83,11 +83,11 @@ 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"); + const skeletonLoader = document.getElementById("skeleton-loader") if (skeletonLoader) { - skeletonLoader.style.display = "none"; // Hides the skeleton after the React app is ready + skeletonLoader.style.display = "none"// Hides the skeleton after the React app is ready } - }, []); + }, []) return ( @@ -114,7 +114,7 @@ function App() { - ); + ) } -export default App; +export default App From 973c3d8f881325b3f8045218d55104cca00f5513 Mon Sep 17 00:00:00 2001 From: Saurabhsing21 Date: Thu, 16 Jan 2025 17:22:36 +0530 Subject: [PATCH 08/13] fixed remaning formate issue --- src/App.tsx | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index e4771185..bb848c80 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -21,13 +21,13 @@ const lazyImport = (importFn: () => Promise) => } } const componentExport = Object.values(module).find( - (exp) => typeof exp === "function" && exp.prototype?.isReactComponent + (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(", ")}` + `No valid React component found in module. Available exports: ${Object.keys(module).join(", ")}`, ) } catch (error) { console.error("Failed to load component:", error) @@ -44,7 +44,7 @@ const EditorPage = lazyImport(async () => { import("@/pages/editor"), import("@/lib/utils/load-prettier").then((m) => m.loadPrettier()), ]) - return editorModule; + return editorModule }) const LandingPage = lazyImport(() => import("@/pages/landing")) const MyOrdersPage = lazyImport(() => import("@/pages/my-orders")) @@ -64,7 +64,7 @@ class ErrorBoundary extends React.Component< > { constructor(props: { children: React.ReactNode }) { super(props) - this.state = { hasError: false }; + this.state = { hasError: false } } static getDerivedStateFromError() { @@ -85,7 +85,8 @@ function App() { // Hide the skeleton from index.html when React mounts const skeletonLoader = document.getElementById("skeleton-loader") if (skeletonLoader) { - skeletonLoader.style.display = "none"// Hides the skeleton after the React app is ready + skeletonLoader.style.display = "none" + } }, []) From f59948e77cc1ced86dfd01fead4e97c8d8a87d19 Mon Sep 17 00:00:00 2001 From: Saurabhsing21 Date: Thu, 16 Jan 2025 17:25:51 +0530 Subject: [PATCH 09/13] fixed remaning formate issue --- src/App.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/App.tsx b/src/App.tsx index bb848c80..40d04a4d 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -86,7 +86,6 @@ function App() { const skeletonLoader = document.getElementById("skeleton-loader") if (skeletonLoader) { skeletonLoader.style.display = "none" - } }, []) From 05e7be8489521bf4ae4c497a793a79abce0d527f Mon Sep 17 00:00:00 2001 From: Saurabhsing21 Date: Thu, 16 Jan 2025 23:36:25 +0530 Subject: [PATCH 10/13] fixed skelton div rendering --- src/App.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/App.tsx b/src/App.tsx index 40d04a4d..25f70d1f 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -88,11 +88,18 @@ function App() { skeletonLoader.style.display = "none" } }, []) + const renderSkeleton = () => { + const skeletonLoader = document.getElementById("skeleton-loader"); + if (skeletonLoader) { + return
+ } + return null + } return ( - }> + From a828334814c09b72da7762699c768aade28da1dd Mon Sep 17 00:00:00 2001 From: Saurabhsing21 Date: Thu, 16 Jan 2025 23:41:36 +0530 Subject: [PATCH 11/13] fixed formate issue --- src/App.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 25f70d1f..1a45e4c1 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -89,13 +89,15 @@ function App() { } }, []) const renderSkeleton = () => { - const skeletonLoader = document.getElementById("skeleton-loader"); + const skeletonLoader = document.getElementById("skeleton-loader") if (skeletonLoader) { - return
+ return ( +
+ + ) } return null } - return ( From 05b59a7936b95817cce38994ff2f607e00ee2bab Mon Sep 17 00:00:00 2001 From: Saurabhsing21 Date: Thu, 16 Jan 2025 23:45:51 +0530 Subject: [PATCH 12/13] fixed formate issue --- src/App.tsx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 1a45e4c1..417e9709 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -91,9 +91,8 @@ function App() { const renderSkeleton = () => { const skeletonLoader = document.getElementById("skeleton-loader") if (skeletonLoader) { - return ( -
- + return( +
) } return null @@ -101,7 +100,7 @@ function App() { return ( - + From 67380b13ab2e8d2b0f530d95da902857c048a582 Mon Sep 17 00:00:00 2001 From: Saurabhsing21 Date: Thu, 16 Jan 2025 23:47:46 +0530 Subject: [PATCH 13/13] fixed formate issue --- src/App.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 417e9709..35171e27 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -91,7 +91,7 @@ function App() { const renderSkeleton = () => { const skeletonLoader = document.getElementById("skeleton-loader") if (skeletonLoader) { - return( + return (
) } @@ -100,7 +100,7 @@ function App() { return ( - +