feat: implement Suspense-based loading states across application pages

app/blocks/dashboard/dashboard-skeleton.tsx

@@ -0,0 +1,34 @@
+import { Skeleton } from "~/blocks/__global/skeleton";
+
+export function DashboardSkeleton() {
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "var(--space-6)" }}>
+
+      {/* Stats cards row — 4 cards */}
+      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr 1fr", gap: "var(--space-6)" }}>
+        {Array.from({ length: 4 }).map((_, i) => (
+          <div key={i} style={{ display: "flex", flexDirection: "column", gap: "var(--space-3)" }}>
+            <Skeleton width="100%" height="100px" />
+          </div>
+        ))}
+      </div>
+
+      {/* Cash flow chart */}
+      <Skeleton width="100%" height="280px" />
+
+      {/* 3 charts row */}
+      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: "var(--space-6)" }}>
+        <Skeleton width="100%" height="220px" />
+        <Skeleton width="100%" height="220px" />
+        <Skeleton width="100%" height="220px" />
+      </div>
+
+      {/* Top selling items table */}
+      <Skeleton width="100%" height="200px" />
+
+      {/* Recent sales */}
+      <Skeleton width="100%" height="200px" />
+
+    </div>
+  );
+}

app/blocks/inventory-management/inventory-table-skeleton.tsx

@@ -0,0 +1,41 @@
+import { Skeleton } from "~/blocks/__global/skeleton";
+import styles from "./inventory-table.module.css";
+
+export function InventoryTableSkeleton() {
+  return (
+    <div className={styles.wrap}>
+      <div className={styles.tableWrap}>
+        <table className={styles.table}>
+          <thead>
+            <tr>
+              <th className={styles.th}><input type="checkbox" className={styles.checkbox} disabled /></th>
+              <th className={styles.th}>Item</th>
+              <th className={styles.th}>SKU</th>
+              <th className={styles.th}>Size</th>
+              <th className={styles.th}>Buy Price</th>
+              <th className={styles.th}>Market Value</th>
+              <th className={styles.th}>P/L</th>
+              <th className={styles.th}>Status</th>
+              <th className={styles.th}>Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            {Array.from({ length: 8 }).map((_, i) => (
+              <tr key={i} className={styles.tr}>
+                <td className={styles.td}><input type="checkbox" className={styles.checkbox} disabled /></td>
+                <td className={styles.td}><Skeleton width="140px" height="14px" /></td>
+                <td className={styles.td}><Skeleton width="80px" height="14px" /></td>
+                <td className={styles.td}><Skeleton width="40px" height="14px" /></td>
+                <td className={styles.td}><Skeleton width="60px" height="14px" /></td>
+                <td className={styles.td}><Skeleton width="60px" height="14px" /></td>
+                <td className={styles.td}><Skeleton width="50px" height="14px" /></td>
+                <td className={styles.td}><Skeleton width="60px" height="22px" /></td>
+                <td className={styles.td}><Skeleton width="80px" height="28px" /></td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}

app/blocks/sales-log/sales-log-skeleton.tsx

@@ -0,0 +1,35 @@
+import { Skeleton } from "~/blocks/__global/skeleton";
+import styles from "./sales-table.module.css";
+
+export function SalesTableSkeleton() {
+  return (
+    <div className={styles.wrap}>
+      <div className={styles.tableWrap}>
+        <table className={styles.table}>ß
+          <thead>
+            <tr>
+              <th className={styles.th}>Item</th>
+              <th className={styles.th}>Marketplace</th>
+              <th className={styles.th}>Sale Price</th>
+              <th className={styles.th}>Date</th>
+              <th className={styles.th}>Margin</th>
+              <th className={styles.th}>Profit</th>
+            </tr>
+          </thead>
+          <tbody>
+            {Array.from({ length: 6 }).map((_, i) => (
+              <tr key={i} className={styles.tr}>
+                <td className={styles.td}><Skeleton width="120px" height="14px" /></td>
+                <td className={styles.td}><Skeleton width="80px" height="14px" /></td>
+                <td className={styles.td}><Skeleton width="60px" height="14px" /></td>
+                <td className={styles.td}><Skeleton width="70px" height="14px" /></td>
+                <td className={styles.td}><Skeleton width="40px" height="14px" /></td>
+                <td className={styles.td}><Skeleton width="60px" height="14px" /></td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}

app/routes/dashboard.tsx

@@ -1,4 +1,5 @@
-import { useLoaderData } from "react-router";
+import { Suspense } from "react";
+import { useLoaderData, Await } from "react-router";
 import type { Route } from "./+types/dashboard";
 import { getSupabaseServerClient } from "~/utils/supabase.server";
 import { PrismaClient, Prisma } from "@prisma/client";
@@ -11,7 +12,6 @@
 import { TopSellingItemsTable } from "~/blocks/dashboard/top-selling-items-table";
 import { RecentSales } from "~/blocks/dashboard/recent-sales";
 import { ExpenseCategoriesChart } from "~/blocks/dashboard/expense-categories-chart";
-
 import { AIInsightsPanel } from "~/blocks/dashboard/ai-insights-panel";
 import { CACHE_PRIVATE_NO_STORE } from "~/utils/cache-headers";
 
@@ -30,7 +30,7 @@
   } = await supabase.auth.getUser();
 
   if (!user) {
-    return { inventoryStats: null, salesData: [], expensesData: [] };
+    return { dashboardData: Promise.resolve({ inventoryStats: null, salesData: [], expensesData: [] }) };
   }
 
   const url = new URL(request.url);
@@ -129,13 +129,14 @@
 }
 
 export default function DashboardPage() {
-  const { inventoryStats, salesData, expensesData } = useLoaderData<typeof loader>();
+  const { dashboardData } = useLoaderData<typeof loader>();
+
   return (
     <div className={styles.page}>
       <DashboardHeader />
       <AIInsightsPanel />
       <StatsCardsRow stats={inventoryStats} sales={salesData} expenses={expensesData} />
       <CashFlowChart sales={salesData} expenses={expensesData} />
       <div
         style={{
           display: "grid",
@@ -144,12 +145,12 @@
           marginBottom: "var(--space-6)",
         }}
       >
         <TopBrandsChart sales={salesData} />
         <SalesByMarketplacePie sales={salesData} />
         <ExpenseCategoriesChart expenses={expensesData} />
       </div>
       <TopSellingItemsTable sales={salesData} />
       <RecentSales sales={salesData} />
     </div>
   );
-}
+}

app/routes/inventory-management.tsx

@@ -7,6 +7,7 @@ import { PrismaClient } from "@prisma/client";
 import styles from "./inventory-management.module.css";
 import { InventoryHeader } from "~/blocks/inventory-management/inventory-header";
 import { InventoryTable } from "~/blocks/inventory-management/inventory-table";
+import { InventoryTableSkeleton } from "~/blocks/inventory-management/inventory-table-skeleton";
 import { BulkActionsBar } from "~/blocks/inventory-management/bulk-actions-bar";
 import { AddItemModal } from "~/blocks/inventory-management/add-item-modal";
 import { ImportExcelModal } from "~/blocks/inventory-management/import-excel-modal";
@@ -87,15 +88,10 @@ export async function action({ request }: Route.ActionArgs) {
     const brand = formData.get("brand") as string;
     const size = formData.get("size") as string;
     const purchasePrice = Number(formData.get("purchasePrice"));
-
     await prisma.inventoryItem.create({
       data: {
         userId: user.id,
-        sku,
-        name,
-        brand,
-        size,
-        purchasePrice,
+        sku, name, brand, size, purchasePrice,
         purchaseDate: new Date(),
         condition: "DEADSTOCK",
         status: "IN_STOCK",
@@ -201,4 +197,4 @@ export default function InventoryManagementPage() {
       {showImport && <ImportExcelModal onClose={() => setShowImport(false)} />}
     </div>
   );
-}
+}

app/routes/sales-log.tsx

@@ -1,5 +1,5 @@
-import { useState, useEffect } from "react";
-import { useLoaderData, useActionData } from "react-router";
+import { Suspense, useState, useEffect } from "react";
+import { useLoaderData, useActionData, Await } from "react-router";
 import type { Route } from "./+types/sales-log";
 import { toast } from "sonner";
 import { getSupabaseServerClient } from "~/utils/supabase.server";
@@ -8,6 +8,7 @@ import styles from "./sales-log.module.css";
 import { SalesHeader } from "~/blocks/sales-log/sales-header";
 import { SalesSummaryCards } from "~/blocks/sales-log/sales-summary-cards";
 import { SalesTable } from "~/blocks/sales-log/sales-table";
+import { SalesTableSkeleton } from "~/blocks/sales-log/sales-log-skeleton";
 import { LogSaleModal } from "~/blocks/sales-log/log-sale-modal";
 import { Pagination } from "~/blocks/__global/pagination";
 import { CACHE_PRIVATE_NO_STORE } from "~/utils/cache-headers";
@@ -144,4 +145,4 @@ export default function SalesLogPage() {
       {showLogSale && <LogSaleModal inventory={inventory} onClose={() => setShowLogSale(false)} />}
     </div>
   );
-}
+}