diff --git a/package-lock.json b/package-lock.json
index 93eb538af..eb61bc399 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -55,6 +55,7 @@
"istanbul": "^0.4.5",
"jsonwebtoken": "^9.0.1",
"jwt-decode": "^3.1.2",
+ "lottie-react": "^2.4.0",
"moment": "^2.29.4",
"pnpm": "^8.6.11",
"react-apexcharts": "^1.4.1",
@@ -15295,6 +15296,23 @@
"loose-envify": "cli.js"
}
},
+ "node_modules/lottie-react": {
+ "version": "2.4.0",
+ "resolved": "https://registry.npmjs.org/lottie-react/-/lottie-react-2.4.0.tgz",
+ "integrity": "sha512-pDJGj+AQlnlyHvOHFK7vLdsDcvbuqvwPZdMlJ360wrzGFurXeKPr8SiRCjLf3LrNYKANQtSsh5dz9UYQHuqx4w==",
+ "dependencies": {
+ "lottie-web": "^5.10.2"
+ },
+ "peerDependencies": {
+ "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+ "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+ }
+ },
+ "node_modules/lottie-web": {
+ "version": "5.12.2",
+ "resolved": "https://registry.npmjs.org/lottie-web/-/lottie-web-5.12.2.tgz",
+ "integrity": "sha512-uvhvYPC8kGPjXT3MyKMrL3JitEAmDMp30lVkuq/590Mw9ok6pWcFCwXJveo0t5uqYw1UREQHofD+jVpdjBv8wg=="
+ },
"node_modules/lower-case": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
diff --git a/package.json b/package.json
index 3b8b8a8da..b61840fa7 100644
--- a/package.json
+++ b/package.json
@@ -76,6 +76,7 @@
"istanbul": "^0.4.5",
"jsonwebtoken": "^9.0.1",
"jwt-decode": "^3.1.2",
+ "lottie-react": "^2.4.0",
"moment": "^2.29.4",
"pnpm": "^8.6.11",
"react-apexcharts": "^1.4.1",
diff --git a/src/assets/logoAnimation.json b/src/assets/logoAnimation.json
new file mode 100644
index 000000000..74952f471
--- /dev/null
+++ b/src/assets/logoAnimation.json
@@ -0,0 +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":[]}
\ No newline at end of file
diff --git a/src/components/Skeleton.tsx b/src/components/Skeleton.tsx
index dc38a8aa9..ef017d006 100644
--- a/src/components/Skeleton.tsx
+++ b/src/components/Skeleton.tsx
@@ -1,28 +1,11 @@
import React from 'react';
+import Lottie from 'lottie-react';
+import animatedLogo from '../assets/logoAnimation.json';
export default function Skeleton() {
return (
-
-
-
+
+
+
);
}
diff --git a/src/components/loaders/logoLoader.tsx b/src/components/loaders/logoLoader.tsx
new file mode 100644
index 000000000..6a6887ff8
--- /dev/null
+++ b/src/components/loaders/logoLoader.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import Lottie from 'lottie-react';
+import animatedLogo from '../../assets/logoAnimation.json';
+
+export default function LogoLoader() {
+ return (
+
+
+
+ );
+}