From cbf64042a2cc95f1544c1c98933f3f179eaf59cc Mon Sep 17 00:00:00 2001
From: Komal Agarwal <komal.agarwal5115@gmail.com>
Date: Fri, 26 Jul 2024 21:52:41 +0530
Subject: [PATCH] skeleton loader

---
 components/new-resume.tsx  | 23 +++++++++++++++++------
 components/ui/skeleton.tsx |  8 ++++----
 2 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/components/new-resume.tsx b/components/new-resume.tsx
index 3b10b67..cfb99b8 100644
--- a/components/new-resume.tsx
+++ b/components/new-resume.tsx
@@ -38,6 +38,7 @@ import { getRankSuffix } from "@/utils/format";
 import CustomisationDrawer from "./CustomisationDrawer";
 import ProfileTracking from "./ProfileTracking";
 import ShareBtn from "./ShareBtn";
+import { Skeleton } from "./ui/skeleton";
 interface GitHubProfile {
   name: string;
   bio: string;
@@ -197,13 +198,23 @@ export function NewResume() {
   };
   if (loading) {
     return (
-      <div className="flex flex-col items-center justify-center h-screen space-y-6">
-        <div className="loader-container flex items-center justify-center">
-          <div className="ball ball1"></div>
-          <div className="ball ball2"></div>
-          <div className="ball ball3"></div>
+      <div className="loaderbody flex justify-center items-center mt-20 mb-20">
+        <div>
+          <div className="flex items-center space-x-4 mb-5">
+            <Skeleton className="h-12 w-12 rounded-full" />
+            <div className="space-y-2">
+              <Skeleton className="h-4 w-[150px]" />
+              <Skeleton className="h-4 w-[185px]" />
+            </div>
+          </div>
+          <div className="flex flex-col space-y-3 mb-4">
+            <Skeleton className="h-[125px] w-[250px] rounded-xl" />
+            <div className="space-y-2">
+              <Skeleton className="h-4 w-[250px]" />
+              <Skeleton className="h-4 w-[200px]" />
+            </div>
+          </div>
         </div>
-        <p>We are fetching your data...</p>
       </div>
     );
   }
diff --git a/components/ui/skeleton.tsx b/components/ui/skeleton.tsx
index d7e45f7..279daae 100644
--- a/components/ui/skeleton.tsx
+++ b/components/ui/skeleton.tsx
@@ -1,4 +1,4 @@
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 function Skeleton({
   className,
@@ -6,10 +6,10 @@ function Skeleton({
 }: React.HTMLAttributes<HTMLDivElement>) {
   return (
     <div
-      className={cn("animate-pulse rounded-md bg-primary/10", className)}
+      className={cn("animate-pulse rounded-md bg-primary/20", className)}
       {...props}
     />
-  )
+  );
 }
 
-export { Skeleton }
+export { Skeleton };