fix irrelevant skeletons while fetching

Author: shebz2023

package-lock.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",

package.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":[]}

src/assets/logoAnimation.json

@@ -1,28 +1,11 @@
 import React from 'react';
+import Lottie from 'lottie-react';
+import animatedLogo from '../assets/logoAnimation.json';
 
 export default function Skeleton() {
   return (
-    <main className="page-main font-serif">
-      <div className="border-2 p-2 md:p-4 min-h-screen min-w-full flex flex-col bg-white">
-        <div className="flex flex-row justify-between">
-          <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" />
-          <div className="bg-gray-300 dark:bg-gray-600 h-12 animate-pulse rounded-md w-[50%] md:mx-2" />
-          <div className="w-12 bg-gray-300 dark:bg-gray-600 animate-pulse h-12 rounded-full ml-auto mr-2 md:mx-2" />
-          <div className="bg-gray-300 dark:bg-gray-600 h-12 animate-pulse rounded-md w-[10%]" />
-
-          <div className="bg-gray-300 dark:bg-gray-600 h-12 animate-pulse hidden md:block rounded-md w-[20%] ml-2" />
-        </div>
-        <div className="flex grow my-3 h-full flex-row justify-center">
-          <div className="flex flex-grow bg-gray-300 dark:bg-gray-600 rounded-xl animate-pulse md:mr-2" />
-          <div className="md:flex flex-grow hidden bg-gray-300 dark:bg-gray-600 rounded-xl animate-pulse ml-2" />
-        </div>
-        <div className="h-[7vh] my-4 bg-gray-300 dark:bg-gray-600 animate-pulse w-[50%] rounded-md mx-auto" />
-        <div className="mt-auto w-full animate-pulse  h-[8vh] flex justify-between">
-          <div className="w-full md:w-[33%]  bg-gray-300 dark:bg-gray-600 rounded-md" />
-          <div className="hidden md:flex w-[33%]  bg-gray-300 dark:bg-gray-600 rounded-md" />
-          <div className="hidden md:flex w-[33%]  bg-gray-300 dark:bg-gray-600 rounded-md" />
-        </div>
-      </div>
-    </main>
+    <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">
+      <Lottie className="h-24" animationData={animatedLogo} />
+    </div>
   );
 }

src/components/Skeleton.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 (
+    <div className="h-screen w-screen flex justify-center items-center">
+      <Lottie className="h-24" animationData={animatedLogo} />
+    </div>
+  );
+}