From a76be50fd34735b06fe2d749ed8602b748922d2d Mon Sep 17 00:00:00 2001
From: Bhuvan Chandra Joshi <hj67412200@gmail.com>
Date: Tue, 14 Jan 2025 08:51:35 -0800
Subject: [PATCH 1/3] added light weight skeleton loader

---
 src/App.tsx                       |  3 +-
 src/components/SkeletonLoader.tsx | 65 +++++++++++++++++++++++++++++++
 2 files changed, 67 insertions(+), 1 deletion(-)
 create mode 100644 src/components/SkeletonLoader.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 49adbf97..aae83342 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -4,6 +4,7 @@ import { Route, Switch } from "wouter"
 import "./components/CmdKMenu"
 import { ContextProviders } from "./ContextProviders"
 import React from "react"
+import { SkeletonLoader } from "@/components/SkeletonLoader"
 
 const lazyImport = (importFn: () => Promise<any>) =>
   lazy<ComponentType<any>>(async () => {
@@ -85,7 +86,7 @@ function App() {
   return (
     <ContextProviders>
       <ErrorBoundary>
-        <Suspense fallback={<div>Loading...</div>}>
+        <Suspense fallback={<SkeletonLoader/>}>
           <Switch>
             <Route path="/" component={LandingPage} />
             <Route path="/editor" component={EditorPage} />
diff --git a/src/components/SkeletonLoader.tsx b/src/components/SkeletonLoader.tsx
new file mode 100644
index 00000000..7241084d
--- /dev/null
+++ b/src/components/SkeletonLoader.tsx
@@ -0,0 +1,65 @@
+import React from 'react';
+import styled, { keyframes } from 'styled-components';
+
+// Interfaces for Props
+interface SkeletonLoaderProps {
+  width?: string;
+  height?: string;
+  borderRadius?: string;
+  count?: number;
+  className?: string;
+}
+
+// Skeleton Loader Component
+export const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({
+  width = '100%',
+  height = '100vh',
+  borderRadius = '4px',
+  count = 1,
+  className = ''
+}) => {
+  return (
+    <>
+      {[...Array(count)].map((_, index) => (
+        <SkeletonWrapper 
+          key={index}
+          width={width}
+          height={height}
+          borderRadius={borderRadius}
+          className={className}
+        />
+      ))}
+    </>
+  );
+};
+
+// Styled Components for Animation
+const shimmer = keyframes`
+  0% {
+    background-position: -1000px 0;
+  }
+  100% {
+    background-position: 1000px 0;
+  }
+`;
+
+interface SkeletonWrapperProps {
+  width: string;
+  height: string;
+  borderRadius: string;
+}
+
+const SkeletonWrapper = styled.div<SkeletonWrapperProps>`
+  width: ${props => props.width};
+  height: ${props => props.height};
+  border-radius: ${props => props.borderRadius};
+  background: linear-gradient(
+    to right, 
+    #f0f0f0 8%, 
+    #e0e0e0 18%, 
+    #f0f0f0 33%
+  );
+  background-size: 1000px 100%;
+  animation: ${shimmer} 1.5s infinite linear;
+  margin-bottom: 10px;
+`;
\ No newline at end of file

From 040c111a9aa5db8cf89190030f764b2c50df4360 Mon Sep 17 00:00:00 2001
From: Bhuvan Chandra Joshi <hj67412200@gmail.com>
Date: Tue, 14 Jan 2025 09:15:10 -0800
Subject: [PATCH 2/3] fixed loader

---
 src/components/SkeletonLoader.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/SkeletonLoader.tsx b/src/components/SkeletonLoader.tsx
index 7241084d..cdf79a5b 100644
--- a/src/components/SkeletonLoader.tsx
+++ b/src/components/SkeletonLoader.tsx
@@ -14,7 +14,7 @@ interface SkeletonLoaderProps {
 export const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({
   width = '100%',
   height = '100vh',
-  borderRadius = '4px',
+  borderRadius = '0.25rem',
   count = 1,
   className = ''
 }) => {
@@ -60,6 +60,5 @@ const SkeletonWrapper = styled.div<SkeletonWrapperProps>`
     #f0f0f0 33%
   );
   background-size: 1000px 100%;
-  animation: ${shimmer} 1.5s infinite linear;
-  margin-bottom: 10px;
+  animation: ${shimmer} 4s infinite cubic-bezier(0.645, 0.045, 0.355, 1);
 `;
\ No newline at end of file

From 7333fea5909e2fc8b805608d086353321eadf70e Mon Sep 17 00:00:00 2001
From: Bhuvan Chandra Joshi <hj67412200@gmail.com>
Date: Tue, 14 Jan 2025 09:28:55 -0800
Subject: [PATCH 3/3] fix

---
 src/components/SkeletonLoader.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/SkeletonLoader.tsx b/src/components/SkeletonLoader.tsx
index cdf79a5b..ffb7980d 100644
--- a/src/components/SkeletonLoader.tsx
+++ b/src/components/SkeletonLoader.tsx
@@ -60,5 +60,5 @@ const SkeletonWrapper = styled.div<SkeletonWrapperProps>`
     #f0f0f0 33%
   );
   background-size: 1000px 100%;
-  animation: ${shimmer} 4s infinite cubic-bezier(0.645, 0.045, 0.355, 1);
+  animation: ${shimmer} 2s infinite cubic-bezier(0.645, 0.045, 0.355, 1);
 `;
\ No newline at end of file