Refactor loading components for profile and edit pages

alvinsjoy · Sep 4, 2024 · f1090d8 · f1090d8
1 parent d8895ba
commit f1090d8
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 11 deletions.
diff --git a/app/(root)/profile/edit/loading.tsx b/app/(root)/profile/edit/loading.tsx
@@ -2,31 +2,30 @@ import { Skeleton } from '@/components/ui/skeleton';
 
 function Loading() {
   return (
-    <main className="mx-auto flex max-w-3xl flex-col justify-start px-10 py-20">
+    <main className="mx-auto max-w-3xl px-10 py-20">
       <Skeleton className="h-8 w-40" />
       <Skeleton className="mt-3 h-5 w-72" />
 
       <section className="mt-9 bg-dark-2 p-10">
-        <div className="flex flex-col justify-start gap-10">
+        <div className="flex flex-col gap-10">
           <div className="flex items-center gap-4">
             <Skeleton className="h-24 w-24 rounded-full" />
             <div className="flex-1">
-              <Skeleton className="h-6 w-40" />
-              <Skeleton className="mt-2 h-4 w-20" />
+              <Skeleton className="h-6 w-40 max-sm:w-28" />
             </div>
           </div>
 
-          <div className="flex w-full flex-col gap-3">
+          <div className="flex flex-col gap-3">
             <Skeleton className="h-5 w-20" />
             <Skeleton className="h-10 w-full" />
           </div>
 
-          <div className="flex w-full flex-col gap-3">
+          <div className="flex flex-col gap-3">
             <Skeleton className="h-5 w-20" />
             <Skeleton className="h-10 w-full" />
           </div>
 
-          <div className="flex w-full flex-col gap-3">
+          <div className="flex flex-col gap-3">
             <Skeleton className="h-5 w-20" />
             <Skeleton className="h-32 w-full" />
           </div>

diff --git a/app/(root)/profile/loading.tsx b/app/(root)/profile/loading.tsx
@@ -6,15 +6,15 @@ function Loading() {
       <div className="flex w-full flex-col justify-start">
         <div className="flex items-center justify-between">
           <div className="flex items-center gap-3">
-            <Skeleton className="relative h-20 w-20 rounded-full" />
+            <Skeleton className="h-20 w-20 rounded-full" />
             <div className="flex-1">
               <Skeleton className="h-6 w-40" />
               <Skeleton className="h-4 w-20 mt-3" />
             </div>
           </div>
-          <Skeleton className="h-10 w-20 rounded-lg" />
+          <Skeleton className="h-8 w-10 rounded-lg" />
         </div>
-        <Skeleton className="mt-6 h-4 w-1/2" />
+        <Skeleton className="mt-6 h-4 w-3/4" />
         <div className="mt-12 h-0.5 w-full bg-dark-3" />
       </div>
 
@@ -35,7 +35,7 @@ function Loading() {
             <div className="flex items-start justify-between">
               <div className="flex w-full flex-1 flex-row gap-4">
                 <div className="flex flex-col items-center">
-                  <Skeleton className="relative h-11 w-11 rounded-full" />
+                  <Skeleton className="h-11 w-11 rounded-full" />
                   <div className="thread-card_bar" />
                 </div>
                 <div className="flex w-full flex-col space-y-3">