Update skeleton components in dashboard page

Author: JohanCodeForFun

app/dashboard/(overview)/page.tsx

@@ -8,6 +8,8 @@ import {
   InvoiceSkeleton,
   RevenueChartSkeleton,
   CardSkeleton,
+  InvoicesSkeleton,
+  CardsSkeleton,
 } from '@/app/ui/skeletons';
 
 export default async function Page() {
@@ -17,15 +19,15 @@ export default async function Page() {
         Dashboard
       </h1>
       <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
-        <Suspense fallback={<CardSkeleton />}>
+        <Suspense fallback={<CardsSkeleton />}>
           <CardWrapper />
         </Suspense>
       </div>
       <div className="mt-6 grid grid-cols-1 gap-6 md:grid-cols-4 lg:grid-cols-8">
         <Suspense fallback={<RevenueChartSkeleton />}>
           <RevenueChart />
         </Suspense>
-        <Suspense fallback={<InvoiceSkeleton />}>
+        <Suspense fallback={<InvoicesSkeleton />}>
           <LatestInvoices />
         </Suspense>
       </div>

app/ui/skeletons.tsx

@@ -59,6 +59,31 @@ export function InvoiceSkeleton() {
   );
 }
 
+export function InvoicesSkeleton() {
+  return (
+    <div className="flex w-full flex-col md:col-span-4">
+      <div className="mb-4 h-8 w-36 rounded-md bg-gray-100" />
+      <div
+        className={`${shimmer} relative w-full overflow-hidden md:col-span-4`}
+      >
+        <div className="flex grow flex-col justify-between rounded-xl bg-gray-50 p-4">
+          <div className="bg-white px-6">
+            <InvoiceSkeleton />
+            <InvoiceSkeleton />
+            <InvoiceSkeleton />
+            <InvoiceSkeleton />
+            <InvoiceSkeleton />
+            <div className="flex items-center bg-gray-200 pb-2 pt-6">
+              <div className="h-5 w-5 rounded-full bg-gray-200" />
+              <div className="ml-2 h-4 w-20 rounded-md bg-gray-200" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
 export function LatestInvoicesSkeleton() {
   return (
     <div
@@ -67,11 +92,6 @@ export function LatestInvoicesSkeleton() {
       <div className="mb-4 h-8 w-36 rounded-md bg-gray-100" />
       <div className="flex grow flex-col justify-between rounded-xl bg-gray-100 p-4">
         <div className="bg-white px-6">
-          <InvoiceSkeleton />
-          <InvoiceSkeleton />
-          <InvoiceSkeleton />
-          <InvoiceSkeleton />
-          <InvoiceSkeleton />
           <div className="flex items-center pb-2 pt-6">
             <div className="h-5 w-5 rounded-full bg-gray-200" />
             <div className="ml-2 h-4 w-20 rounded-md bg-gray-200" />
@@ -89,10 +109,7 @@ export default function DashboardSkeleton() {
         className={`${shimmer} relative mb-4 h-8 w-36 overflow-hidden rounded-md bg-gray-100`}
       />
       <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
-        <CardSkeleton />
-        <CardSkeleton />
-        <CardSkeleton />
-        <CardSkeleton />
+        <CardsSkeleton />
       </div>
       <div className="mt-6 grid grid-cols-1 gap-6 md:grid-cols-4 lg:grid-cols-8">
         <RevenueChartSkeleton />