Skip to content

Commit 5adfef9

Browse files
shebz2023shebz2023
committed
fix irrelevant skeletons while fetching
1 parent 1f9c2fe commit 5adfef9

File tree

6 files changed

+74
-31
lines changed

6 files changed

+74
-31
lines changed

‎package-lock.json‎

Lines changed: 18 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,7 @@
7676
"istanbul": "^0.4.5",
7777
"jsonwebtoken": "^9.0.1",
7878
"jwt-decode": "^3.1.2",
79+
"lottie-react": "^2.4.0",
7980
"moment": "^2.29.4",
8081
"pnpm": "^8.6.11",
8182
"react-apexcharts": "^1.4.1",

‎src/assets/logoAnimation.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{"v":"5.6.6","ip":0,"op":80,"fr":60,"w":157,"h":96,"layers":[{"ind":5823,"nm":"surface21583","ao":0,"ip":0,"op":80,"st":0,"ty":4,"ks":{"ty":"tr","o":{"k":100},"r":{"k":0},"p":{"a":0,"k":[0,0,0],"ix":2},"a":{"k":[0,0]},"s":{"k":[133.05,133.33]},"sk":{"k":0},"sa":{"k":0}},"shapes":[{"ty":"gr","hd":false,"nm":"surface21583","it":[{"ty":"gr","hd":false,"it":[{"ty":"sh","ks":{"k":{"i":[[0,0],[1.7,-12.3],[0.4,0.4],[1.3,5.2],[3.5,0],[1.6,-4.5],[4.3,4.4],[5,-5.1],[-4.8,-4.8],[-4.9,4.8],[-3,0],[-1.7,1.3],[-0.2,-0.2],[-1.6,-6.8],[-4.3,0],[-2.1,15.7],[-0.3,0.2],[-1,-5.6],[-3.3,-1.3],[-3.5,8.6],[-4.8,-4.7],[-4.8,4.9],[4.8,4.8],[5.2,-5.3],[2.9,0.1],[2.3,-5.3],[3.3,19],[1.7,1.4],[2.3,-2.8]],"o":[[-1.4,1.8],[-1.3,9.1],[-0.4,-0.4],[-2.2,-9.4],[-2.5,0],[-2.1,5.6],[-5.3,-5.4],[-4.8,4.8],[4.8,4.8],[2.2,-2.2],[2.5,0],[1.5,-1.2],[0.2,0.2],[3.3,13.2],[4.9,0],[1,-7.7],[0.4,-0.2],[2.3,13],[4.5,1.7],[3.7,-8.9],[4.9,4.9],[4.8,-4.8],[-5,-5],[-2.6,2.7],[-4.4,-0.1],[-2.2,4.9],[-2.1,-11.8],[-2.8,-2.4],[0,0]],"v":[[62.2,9.4],[58,28.5],[55,44.3],[52,34],[43.6,20],[36.1,28.1],[27.5,29.7],[11.1,29.1],[11.1,44.9],[27,44.9],[33.8,42],[40.4,39.9],[43.5,38.2],[46.9,51],[56.1,67],[64.5,48],[67,33.5],[69.5,43.3],[75.7,59.11],[86.4,50],[97,44.8],[112.9,44.91],[112.9,29.11],[96.6,29.61],[89.7,32.8],[81,39.5],[75.5,25.5],[70.8,8.7],[62.2,9.4]],"c":true}}},{"ty":"sh","ks":{"k":{"i":[[0,0],[0,-2.7],[5.3,0],[0,5.3],[-1.3,1.3],[-2.7,0],[-1.3,-1.3]],"o":[[1.3,1.3],[0,5.3],[-5.3,0],[0,-2.7],[1.3,-1.3],[2.7,0],[0,0]],"v":[[25,31],[27,37],[19,45],[11,37],[13,31],[19,29],[25,31]],"c":true}}},{"ty":"sh","ks":{"k":{"i":[[0,0],[0,-2.7],[5.3,0],[0,5.3],[-1.3,1.3],[-2.7,0],[-1.3,-1.3]],"o":[[1.3,1.3],[0,5.3],[-5.3,0],[0,-2.7],[1.3,-1.3],[2.7,0],[0,0]],"v":[[111,31],[113,37],[105,45],[97,37],[99,31],[105,29],[111,31]],"c":true}}},{"ty":"fl","o":{"k":100},"c":{"k":[0.5569,0.5569,1,1]}},{"ty":"tr","o":{"k":100},"r":{"k":0},"p":{"k":[0,0]},"a":{"k":[0,0]},"s":{"k":[100,100]},"sk":{"k":0},"sa":{"k":0},"hd":false}]},{"ty":"tr","o":{"k":100},"r":{"k":0},"p":{"k":[0,0]},"a":{"k":[0,0]},"s":{"k":[100,100]},"sk":{"k":0},"sa":{"k":0},"hd":false}]},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.35],"y":[1]},"o":{"x":[0.17],"y":[0.17]},"t":0,"s":[25]},{"t":55,"s":[100]}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}]}],"meta":{"g":"LF SVG to Lottie"},"assets":[]}

‎src/components/Skeleton.tsx‎

Lines changed: 5 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,11 @@
11
import React from 'react';
2+
import Lottie from 'lottie-react';
3+
import animatedLogo from '../assets/logoAnimation.json';
24

35
export default function Skeleton() {
46
return (
5-
<main className="page-main font-serif">
6-
<div className="border-2 p-2 md:p-4 min-h-screen min-w-full flex flex-col bg-white">
7-
<div className="flex flex-row justify-between">
8-
<div className="bg-gray-300 dark:bg-gray-600 h-12 animate-pulse rounded-md hidden md:block w-[50%] md:w-[10%] md:mr-2" />
9-
<div className="bg-gray-300 dark:bg-gray-600 h-12 animate-pulse rounded-md w-[50%] md:mx-2" />
10-
<div className="w-12 bg-gray-300 dark:bg-gray-600 animate-pulse h-12 rounded-full ml-auto mr-2 md:mx-2" />
11-
<div className="bg-gray-300 dark:bg-gray-600 h-12 animate-pulse rounded-md w-[10%]" />
12-
13-
<div className="bg-gray-300 dark:bg-gray-600 h-12 animate-pulse hidden md:block rounded-md w-[20%] ml-2" />
14-
</div>
15-
<div className="flex grow my-3 h-full flex-row justify-center">
16-
<div className="flex flex-grow bg-gray-300 dark:bg-gray-600 rounded-xl animate-pulse md:mr-2" />
17-
<div className="md:flex flex-grow hidden bg-gray-300 dark:bg-gray-600 rounded-xl animate-pulse ml-2" />
18-
</div>
19-
<div className="h-[7vh] my-4 bg-gray-300 dark:bg-gray-600 animate-pulse w-[50%] rounded-md mx-auto" />
20-
<div className="mt-auto w-full animate-pulse h-[8vh] flex justify-between">
21-
<div className="w-full md:w-[33%] bg-gray-300 dark:bg-gray-600 rounded-md" />
22-
<div className="hidden md:flex w-[33%] bg-gray-300 dark:bg-gray-600 rounded-md" />
23-
<div className="hidden md:flex w-[33%] bg-gray-300 dark:bg-gray-600 rounded-md" />
24-
</div>
25-
</div>
26-
</main>
7+
<div className="h-screen w-screen flex justify-center items-center bg-gradient-radial from-gray-800 to-white dark:from-black dark:to-gray-900">
8+
<Lottie className="h-24" animationData={animatedLogo} />
9+
</div>
2710
);
2811
}

‎src/components/loaders/logoLoader.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import React from 'react';
2+
import Lottie from 'lottie-react';
3+
import animatedLogo from '../../assets/logoAnimation.json';
4+
5+
export default function LogoLoader() {
6+
return (
7+
<div className="h-screen w-screen flex justify-center items-center">
8+
<Lottie className="h-24" animationData={animatedLogo} />
9+
</div>
10+
);
11+
}

‎src/containers/Routes.tsx‎

Lines changed: 38 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ const SignupOrgDocs = React.lazy(
3232
const SigninOrgDocs = React.lazy(
3333
() => import('../components/Docs/SigninOrgDocs'),
3434
);
35-
const UsersDocs = React.lazy( () => import ('../components/Docs/users'),)
35+
const UsersDocs = React.lazy(() => import('../components/Docs/users'));
3636
/* istanbul ignore next */
3737
import Noredirect from '../pages/Noredirect';
3838
import ProtectedRoutes from '../ProtectedRoute';
@@ -42,9 +42,9 @@ import DashRoutes from '../containers/DashRoutes';
4242
function MainRoutes() {
4343
return (
4444
<div className="min-h-screen page-layout">
45-
<Suspense fallback={<Skeleton />}>
45+
<Suspense>
4646
<Routes>
47-
<Route path="/*" element={<DashRoutes />} />
47+
<Route path="/*" element={<DashRoutes />} />
4848
<Route
4949
path="/"
5050
element={
@@ -71,27 +71,56 @@ function MainRoutes() {
7171
path="/login/org"
7272
element={
7373
<ProtectedRoutes>
74-
<Orglogin />
74+
<Suspense fallback={<Skeleton />}>
75+
<Orglogin />
76+
</Suspense>
7577
</ProtectedRoutes>
7678
}
7779
/>
7880
<Route
7981
path="/users/login"
8082
element={
8183
<ProtectedRoutes>
82-
<Adminlogin />
84+
<Suspense fallback={<Skeleton />}>
85+
<Adminlogin />
86+
</Suspense>
8387
</ProtectedRoutes>
8488
}
8589
/>
86-
<Route path="/pricing" element={<Pricing />} />
87-
<Route path="/about" element={<About title={'About Page'} />} />
90+
<Route
91+
path="/pricing"
92+
element={
93+
<Suspense fallback={<Skeleton />}>
94+
<Pricing />{' '}
95+
</Suspense>
96+
}
97+
/>
98+
<Route
99+
path="/about"
100+
element={
101+
<Suspense fallback={<Skeleton />}>
102+
<About title={'About Page'} />
103+
</Suspense>
104+
}
105+
/>
88106
<Route
89107
path="/product"
90-
element={<Product title={'Productpage'} />}
108+
element={
109+
<Suspense fallback={<Skeleton />}>
110+
<Product title={'Productpage'} />
111+
</Suspense>
112+
}
91113
/>
92114
<Route path="/docs/org-signup" element={<SignupOrgDocs />} />
93115
<Route path="/docs/org-signin" element={<SigninOrgDocs />} />
94-
<Route path='/docs/getting-started' element={< UsersDocs />} />
116+
<Route
117+
path="/docs/getting-started"
118+
element={
119+
<Suspense fallback={<Skeleton />}>
120+
<UsersDocs />
121+
</Suspense>
122+
}
123+
/>
95124
<Route path="/noredirect" element={<Noredirect />} />
96125
</Route>
97126
<Route path="*" element={<Error />} />

0 commit comments

Comments
 (0)