From 87ee347a9e145e7a9e88be5673a19a8143009a51 Mon Sep 17 00:00:00 2001
From: isra el <vernu1997@gmail.com>
Date: Sun, 22 Dec 2024 02:33:47 +0300
Subject: [PATCH] ui(web): improve dashboard ui

---
 .../(app)/dashboard/(components)/api-keys.tsx | 28 ++++++++++++++++---
 .../dashboard/(components)/device-list.tsx    | 26 ++++++++++++++---
 .../(app)/dashboard/(components)/overview.tsx |  3 +-
 .../(components)/hero-section.tsx             |  4 +--
 4 files changed, 50 insertions(+), 11 deletions(-)

diff --git a/web/app/(app)/dashboard/(components)/api-keys.tsx b/web/app/(app)/dashboard/(components)/api-keys.tsx
index 6d3709e..c46ffc4 100644
--- a/web/app/(app)/dashboard/(components)/api-keys.tsx
+++ b/web/app/(app)/dashboard/(components)/api-keys.tsx
@@ -25,7 +25,7 @@ import { useToast } from '@/hooks/use-toast'
 import { useMutation, useQuery } from '@tanstack/react-query'
 import httpBrowserClient from '@/lib/httpBrowserClient'
 import { ApiEndpoints } from '@/config/api'
-import { Spinner } from '@/components/ui/spinner'
+import { Skeleton } from '@/components/ui/skeleton'
 
 export default function ApiKeys() {
   const {
@@ -132,9 +132,29 @@ export default function ApiKeys() {
         <ScrollArea className='h-[400px] pr-4'>
           <div className='space-y-2'>
             {isPending && (
-              <div className='flex justify-center items-center h-full'>
-                <Spinner size='sm' />
-              </div>
+              <>
+                {[1, 2, 3].map((i) => (
+                  <Card key={i} className='border-0 shadow-none'>
+                    <CardContent className='flex items-center p-3'>
+                      <Skeleton className='h-6 w-6 mr-3' />
+                      <div className='flex-1'>
+                        <div className='flex items-center justify-between'>
+                          <Skeleton className='h-4 w-24' />
+                          <Skeleton className='h-4 w-16' />
+                        </div>
+                        <div className='flex items-center space-x-2 mt-1'>
+                          <Skeleton className='h-4 w-64' />
+                        </div>
+                        <div className='flex items-center mt-1 space-x-3'>
+                          <Skeleton className='h-3 w-32' />
+                          <Skeleton className='h-3 w-32' />
+                        </div>
+                      </div>
+                      <Skeleton className='h-6 w-6' />
+                    </CardContent>
+                  </Card>
+                ))}
+              </>
             )}
 
             {error && (
diff --git a/web/app/(app)/dashboard/(components)/device-list.tsx b/web/app/(app)/dashboard/(components)/device-list.tsx
index 6ed695b..23d77e2 100644
--- a/web/app/(app)/dashboard/(components)/device-list.tsx
+++ b/web/app/(app)/dashboard/(components)/device-list.tsx
@@ -9,7 +9,7 @@ import { useToast } from '@/hooks/use-toast'
 import httpBrowserClient from '@/lib/httpBrowserClient'
 import { ApiEndpoints } from '@/config/api'
 import { useQuery } from '@tanstack/react-query'
-import { Spinner } from '@/components/ui/spinner'
+import { Skeleton } from '@/components/ui/skeleton'
 
 export default function DeviceList() {
   const { toast } = useToast()
@@ -42,9 +42,27 @@ export default function DeviceList() {
         <ScrollArea className='h-[400px] pr-4'>
           <div className='space-y-2'>
             {isPending && (
-              <div className='flex justify-center items-center h-full'>
-                <Spinner size='sm' />
-              </div>
+              <>
+                {[1, 2, 3].map((i) => (
+                  <Card key={i} className='border-0 shadow-none'>
+                    <CardContent className='flex items-center p-3'>
+                      <Skeleton className='h-6 w-6 rounded-full mr-3' />
+                      <div className='flex-1'>
+                        <div className='flex items-center justify-between'>
+                          <Skeleton className='h-4 w-[120px]' />
+                          <Skeleton className='h-4 w-[60px]' />
+                        </div>
+                        <div className='flex items-center space-x-2 mt-1'>
+                          <Skeleton className='h-4 w-[180px]' />
+                        </div>
+                        <div className='flex items-center mt-1 space-x-3'>
+                          <Skeleton className='h-3 w-[200px]' />
+                        </div>
+                      </div>
+                    </CardContent>
+                  </Card>
+                ))}
+              </>
             )}
 
             {error && (
diff --git a/web/app/(app)/dashboard/(components)/overview.tsx b/web/app/(app)/dashboard/(components)/overview.tsx
index ac42166..7aafed3 100644
--- a/web/app/(app)/dashboard/(components)/overview.tsx
+++ b/web/app/(app)/dashboard/(components)/overview.tsx
@@ -6,6 +6,7 @@ import GetStartedCard from './get-started'
 import { ApiEndpoints } from '@/config/api'
 import httpBrowserClient from '@/lib/httpBrowserClient'
 import { useQuery } from '@tanstack/react-query'
+import { Skeleton } from '@/components/ui/skeleton'
 // import GetStartedCard from "@/components/get-started-card";
 
 export const StatCard = ({ title, value, icon: Icon, description }) => {
@@ -16,7 +17,7 @@ export const StatCard = ({ title, value, icon: Icon, description }) => {
         <Icon className='h-4 w-4 text-muted-foreground' />
       </CardHeader>
       <CardContent>
-        <div className='text-2xl font-bold'>{value}</div>
+        <div className='text-2xl font-bold'>{value ?? <Skeleton className='h-4 w-8 mb-2' />}</div>
         <p className='text-xs text-muted-foreground'>{description}</p>
       </CardContent>
     </Card>
diff --git a/web/app/(landing-page)/(components)/hero-section.tsx b/web/app/(landing-page)/(components)/hero-section.tsx
index 6fb7294..91ae275 100644
--- a/web/app/(landing-page)/(components)/hero-section.tsx
+++ b/web/app/(landing-page)/(components)/hero-section.tsx
@@ -30,11 +30,11 @@ export default function HeroSection() {
                   Get Started
                 </Button>
               </Link>
-              <Link href='#how-it-works' prefetch={false}>
+              <a href='#how-it-works'>
                 <Button variant='outline' size='lg'>
                   How It Works
                 </Button>
-              </Link>
+              </a>
             </div>
             <div className='flex items-center space-x-4 text-sm'>
               <div className='flex items-center'>