update loading status display

app/(protected)/admin/records/loading.tsx

@@ -5,7 +5,8 @@ export default function DashboardRecordsLoading() {
   return (
     <>
       <DashboardHeader heading="DNS Records" text="" />
-      <Skeleton className="h-full w-full rounded-lg" />
+      <Skeleton className="h-32 w-full rounded-lg" />
+      <Skeleton className="h-[400px] w-full rounded-lg" />
     </>
   );
 }

app/(protected)/admin/urls/loading.tsx

@@ -5,7 +5,8 @@ export default function DashboardUrlsLoading() {
   return (
     <>
       <DashboardHeader heading="Short Urls" text="" />
-      <Skeleton className="h-full w-full rounded-lg" />
+      <Skeleton className="h-32 w-full rounded-lg" />
+      <Skeleton className="h-[400px] w-full rounded-lg" />
     </>
   );
 }

app/(protected)/admin/users/loading.tsx

@@ -8,7 +8,8 @@ export default function OrdersLoading() {
         heading="User Management"
         text="List and manage all users."
       />
-      <Skeleton className="h-full w-full rounded-lg" />
+      <Skeleton className="h-32 w-full rounded-lg" />
+      <Skeleton className="h-[400px] w-full rounded-lg" />
     </>
   );
 }

app/(protected)/dashboard/records/loading.tsx

@@ -4,8 +4,12 @@ import { DashboardHeader } from "@/components/dashboard/header";
 export default function DashboardRecordsLoading() {
   return (
     <>
-      <DashboardHeader heading="DNS Records" text="" />
-      <Skeleton className="h-full w-full rounded-lg" />
+      <DashboardHeader
+        heading="Manage&nbsp;&nbsp;DNS&nbsp;&nbsp;Records"
+        text="List and manage records."
+      />
+      <Skeleton className="h-32 w-full rounded-lg" />
+      <Skeleton className="h-[400px] w-full rounded-lg" />
     </>
   );
 }

app/(protected)/dashboard/scrape/loading.tsx

@@ -4,8 +4,22 @@ import { DashboardHeader } from "@/components/dashboard/header";
 export default function DashboardRecordsLoading() {
   return (
     <>
-      <DashboardHeader heading="Scraping API" text="" />
-      <Skeleton className="h-full w-full rounded-lg" />
+      <DashboardHeader
+        heading="Scraping&nbsp;&nbsp;API&nbsp;&nbsp;Overview"
+        text="Quickly extract valuable structured website data. It's free and unlimited to use!"
+      />
+      <div className="flex flex-col gap-5">
+        <div className="grid grid-cols-1 gap-4 sm:grid-cols-3 lg:grid-cols-3">
+          <Skeleton className="h-32 w-full rounded-lg" />
+          <Skeleton className="h-32 w-full rounded-lg" />
+          <Skeleton className="h-32 w-full rounded-lg" />
+        </div>
+        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+          <Skeleton className="h-32 w-full rounded-lg" />
+          <Skeleton className="h-32 w-full rounded-lg" />
+        </div>
+        <Skeleton className="h-[400px] w-full rounded-lg" />
+      </div>
     </>
   );
 }

app/(protected)/dashboard/scrape/logs.tsx

@@ -200,6 +200,7 @@ const LogsTable = ({ userId, target }) => {
               total={Math.ceil(data.total / 20)}
               currentPage={page}
               setCurrentPage={setPage}
+              layout="right"
             />
           )}
         </div>

app/(protected)/dashboard/scrape/markdown/loading.tsx

@@ -5,7 +5,8 @@ export default function DashboardRecordsLoading() {
   return (
     <>
       <DashboardHeader heading="Scraping API" text="" />
-      <Skeleton className="h-full w-full rounded-lg" />
+      <Skeleton className="h-32 w-full rounded-lg" />
+      <Skeleton className="h-[400px] w-full rounded-lg" />
     </>
   );
 }

app/(protected)/dashboard/scrape/meta-info/loading.tsx

@@ -5,7 +5,8 @@ export default function DashboardRecordsLoading() {
   return (
     <>
       <DashboardHeader heading="Scraping API" text="" />
-      <Skeleton className="h-full w-full rounded-lg" />
+      <Skeleton className="h-32 w-full rounded-lg" />
+      <Skeleton className="h-[400px] w-full rounded-lg" />
     </>
   );
 }

app/(protected)/dashboard/scrape/qrcode/loading.tsx

@@ -5,7 +5,8 @@ export default function DashboardRecordsLoading() {
   return (
     <>
       <DashboardHeader heading="Scraping API" text="" />
-      <Skeleton className="h-full w-full rounded-lg" />
+      <Skeleton className="h-32 w-full rounded-lg" />
+      <Skeleton className="h-[400px] w-full rounded-lg" />
     </>
   );
 }

app/(protected)/dashboard/scrape/screenshot/loading.tsx

@@ -5,7 +5,8 @@ export default function DashboardRecordsLoading() {
   return (
     <>
       <DashboardHeader heading="Scraping API" text="" />
-      <Skeleton className="h-full w-full rounded-lg" />
+      <Skeleton className="h-32 w-full rounded-lg" />
+      <Skeleton className="h-[400px] w-full rounded-lg" />
     </>
   );
 }

app/(protected)/dashboard/urls/loading.tsx

@@ -4,8 +4,12 @@ import { DashboardHeader } from "@/components/dashboard/header";
 export default function DashboardUrlsLoading() {
   return (
     <>
-      <DashboardHeader heading="Short Urls" text="" />
-      <Skeleton className="h-full w-full rounded-lg" />
+      <DashboardHeader
+        heading="Manage&nbsp;Short&nbsp;URLs"
+        text="List and manage short urls."
+      />
+      <Skeleton className="h-32 w-full rounded-lg" />
+      <Skeleton className="h-[400px] w-full rounded-lg" />
     </>
   );
 }