hmm

2025-07-17 16:07:07 +01:00
parent e65d6d3fee
commit 0fa33df2ad
9 changed files with 607 additions and 730 deletions
--- a/app/dashboard/chats/page.tsx
+++ b/app/dashboard/chats/page.tsx
@@ -1,10 +1,63 @@
 "use client";

-import { useEffect } from "react";
+import { useEffect, Suspense } from "react";
 import { useRouter } from "next/navigation";
-import ChatTable from "@/components/dashboard/ChatTable";
 import Dashboard from "@/components/dashboard/dashboard";
 import { MessageCircle } from "lucide-react";
+import dynamic from "next/dynamic";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+
+// Lazy load the ChatTable component
+const ChatTable = dynamic(() => import("@/components/dashboard/ChatTable"), {
+  loading: () => <ChatTableSkeleton />
+});
+
+// Loading skeleton for the chat table
+function ChatTableSkeleton() {
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex items-center justify-between">
+          <Skeleton className="h-6 w-32" />
+          <Skeleton className="h-9 w-24" />
+        </div>
+      </CardHeader>
+      <CardContent>
+        <div className="border rounded-lg">
+          <div className="border-b p-4">
+            <div className="flex items-center gap-4">
+              {['Customer', 'Last Message', 'Date', 'Status', 'Actions'].map((header, i) => (
+                <Skeleton key={i} className="h-4 w-20 flex-1" />
+              ))}
+            </div>
+          </div>
+          
+          {[...Array(6)].map((_, i) => (
+            <div key={i} className="border-b last:border-b-0 p-4">
+              <div className="flex items-center gap-4">
+                <div className="flex items-center gap-3 flex-1">
+                  <Skeleton className="h-10 w-10 rounded-full" />
+                  <div className="space-y-1">
+                    <Skeleton className="h-4 w-32" />
+                    <Skeleton className="h-3 w-24" />
+                  </div>
+                </div>
+                <Skeleton className="h-4 w-40 flex-1" />
+                <Skeleton className="h-4 w-20 flex-1" />
+                <Skeleton className="h-6 w-16 flex-1" />
+                <div className="flex gap-2 flex-1">
+                  <Skeleton className="h-8 w-16" />
+                  <Skeleton className="h-8 w-16" />
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

 export default function ChatsPage() {
  const router = useRouter();
@@ -30,7 +83,9 @@ export default function ChatsPage() {
          </h1>
        </div>
        
-        <ChatTable />
+        <Suspense fallback={<ChatTableSkeleton />}>
+          <ChatTable />
+        </Suspense>
      </div>
    </Dashboard>
  );
--- a/app/dashboard/orders/page.tsx
+++ b/app/dashboard/orders/page.tsx
@@ -1,10 +1,63 @@
 "use client";

-import { useEffect } from "react";
+import { useEffect, Suspense } from "react";
 import { useRouter } from "next/navigation";
 import Dashboard from "@/components/dashboard/dashboard";
 import { Package } from "lucide-react";
-import OrderTable from "@/components/tables/order-table";
+import dynamic from "next/dynamic";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+
+// Lazy load the OrderTable component
+const OrderTable = dynamic(() => import("@/components/tables/order-table"), {
+  loading: () => <OrderTableSkeleton />
+});
+
+// Loading skeleton for the order table
+function OrderTableSkeleton() {
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex items-center justify-between">
+          <Skeleton className="h-6 w-32" />
+          <div className="flex gap-2">
+            <Skeleton className="h-9 w-24" />
+            <Skeleton className="h-9 w-32" />
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent>
+        {/* Table header skeleton */}
+        <div className="border rounded-lg">
+          <div className="border-b p-4">
+            <div className="flex items-center gap-4">
+              {['Order ID', 'Customer', 'Status', 'Total', 'Date', 'Actions'].map((header, i) => (
+                <Skeleton key={i} className="h-4 w-20 flex-1" />
+              ))}
+            </div>
+          </div>
+          
+          {/* Table rows skeleton */}
+          {[...Array(8)].map((_, i) => (
+            <div key={i} className="border-b last:border-b-0 p-4">
+              <div className="flex items-center gap-4">
+                <Skeleton className="h-4 w-24 flex-1" />
+                <Skeleton className="h-4 w-32 flex-1" />
+                <Skeleton className="h-6 w-20 flex-1" />
+                <Skeleton className="h-4 w-16 flex-1" />
+                <Skeleton className="h-4 w-20 flex-1" />
+                <div className="flex gap-2 flex-1">
+                  <Skeleton className="h-8 w-16" />
+                  <Skeleton className="h-8 w-16" />
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

 export default function OrdersPage() {
  const router = useRouter();
@@ -30,7 +83,9 @@ export default function OrdersPage() {
          </h1>
        </div>

-        <OrderTable />
+        <Suspense fallback={<OrderTableSkeleton />}>
+          <OrderTable />
+        </Suspense>
      </div>
    </Dashboard>
  );
--- a/app/dashboard/page.tsx
+++ b/app/dashboard/page.tsx
@@ -1,10 +1,72 @@
 import Dashboard from "@/components/dashboard/dashboard";
-import Content from "@/components/dashboard/content";
 import { fetchServer } from '@/lib/api';
 import { performance } from 'perf_hooks';
 import { Info, GitCommit, User, Zap } from 'lucide-react';
 import packageJson from '../../package.json';
 import { getGitInfo, getShortGitHash } from '@/lib/utils/git';
+import { Suspense } from 'react';
+import dynamic from 'next/dynamic';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+
+// Lazy load the Content component
+const Content = dynamic(() => import("@/components/dashboard/content"), {
+  loading: () => <DashboardContentSkeleton />
+});
+
+// Loading skeleton for the dashboard content
+function DashboardContentSkeleton() {
+  return (
+    <div className="space-y-6">
+      {/* Header skeleton */}
+      <div>
+        <Skeleton className="h-8 w-64 mb-2" />
+        <Skeleton className="h-4 w-96" />
+      </div>
+
+      {/* Stats cards skeleton */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+        {[...Array(4)].map((_, i) => (
+          <Card key={i}>
+            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+              <Skeleton className="h-4 w-20" />
+              <Skeleton className="h-5 w-5 rounded" />
+            </CardHeader>
+            <CardContent>
+              <Skeleton className="h-7 w-16 mb-1" />
+              <Skeleton className="h-3 w-24" />
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+
+      {/* Best selling products skeleton */}
+      <Card>
+        <CardHeader>
+          <Skeleton className="h-6 w-48" />
+          <Skeleton className="h-4 w-72" />
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-4">
+            {[...Array(5)].map((_, i) => (
+              <div key={i} className="flex items-center gap-4">
+                <Skeleton className="h-12 w-12 rounded-md" />
+                <div className="space-y-2">
+                  <Skeleton className="h-4 w-40" />
+                  <Skeleton className="h-4 w-20" />
+                </div>
+                <div className="ml-auto text-right">
+                  <Skeleton className="h-4 w-16 ml-auto" />
+                  <Skeleton className="h-4 w-16 ml-auto mt-2" />
+                </div>
+              </div>
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

 // ✅ Corrected Vendor Type
 interface Vendor {
@@ -46,7 +108,9 @@ export default async function DashboardPage() {

  return (
    <Dashboard>
-      <Content username={vendor.username} orderStats={orderStats} />
+      <Suspense fallback={<DashboardContentSkeleton />}>
+        <Content username={vendor.username} orderStats={orderStats} />
+      </Suspense>
      <div className="fixed bottom-2 right-2 text-xs text-muted-foreground bg-background/80 backdrop-blur-sm px-2 py-1 rounded border border-border/50 z-50 flex items-center space-x-2">
        <div className="flex items-center gap-1">
          <Info size={12} className="text-muted-foreground/80" /> 
--- a/app/dashboard/products/page.tsx
+++ b/app/dashboard/products/page.tsx
@@ -1,6 +1,6 @@
 "use client";

-import { useState, useEffect, ChangeEvent } from "react";
+import { useState, useEffect, ChangeEvent, Suspense } from "react";
 import { useRouter } from "next/navigation";
 import Layout from "@/components/layout/layout";
 import { Button } from "@/components/ui/button";
@@ -8,11 +8,74 @@ import { Input } from "@/components/ui/input";
 import { Product } from "@/models/products";
 import { Plus, Upload, Search, RefreshCw, Package2 } from "lucide-react";
 import { clientFetch } from "@/lib/api";
-import { ProductModal } from "@/components/modals/product-modal";
-import ProductTable from "@/components/tables/product-table";
 import { Category } from "@/models/categories";
-import ImportProductsModal from "@/components/modals/import-products-modal";
 import { toast } from "sonner";
+import dynamic from "next/dynamic";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+
+// Lazy load heavy components
+const ProductTable = dynamic(() => import("@/components/tables/product-table"), {
+  loading: () => <ProductTableSkeleton />
+});
+
+const ProductModal = dynamic(() => import("@/components/modals/product-modal").then(mod => ({ default: mod.ProductModal })), {
+  loading: () => <div>Loading...</div>
+});
+
+const ImportProductsModal = dynamic(() => import("@/components/modals/import-products-modal"), {
+  loading: () => <div>Loading...</div>
+});
+
+// Loading skeleton for the product table
+function ProductTableSkeleton() {
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex items-center justify-between">
+          <Skeleton className="h-6 w-32" />
+          <div className="flex gap-2">
+            <Skeleton className="h-9 w-24" />
+            <Skeleton className="h-9 w-32" />
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent>
+        <div className="border rounded-lg">
+          <div className="border-b p-4">
+            <div className="flex items-center gap-4">
+              {['Product', 'Category', 'Price', 'Stock', 'Status', 'Actions'].map((header, i) => (
+                <Skeleton key={i} className="h-4 w-20 flex-1" />
+              ))}
+            </div>
+          </div>
+          
+          {[...Array(8)].map((_, i) => (
+            <div key={i} className="border-b last:border-b-0 p-4">
+              <div className="flex items-center gap-4">
+                <div className="flex items-center gap-3 flex-1">
+                  <Skeleton className="h-12 w-12 rounded-md" />
+                  <div className="space-y-1">
+                    <Skeleton className="h-4 w-32" />
+                    <Skeleton className="h-3 w-24" />
+                  </div>
+                </div>
+                <Skeleton className="h-4 w-24 flex-1" />
+                <Skeleton className="h-4 w-16 flex-1" />
+                <Skeleton className="h-4 w-16 flex-1" />
+                <Skeleton className="h-6 w-20 flex-1" />
+                <div className="flex gap-2 flex-1">
+                  <Skeleton className="h-8 w-16" />
+                  <Skeleton className="h-8 w-16" />
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

 export default function ProductsPage() {
  const router = useRouter();
--- a/app/dashboard/shipping/page.tsx
+++ b/app/dashboard/shipping/page.tsx
@@ -1,11 +1,10 @@
 "use client";

-import { useState, useEffect, ChangeEvent } from "react";
+import { useState, useEffect, ChangeEvent, Suspense } from "react";
 import { useRouter } from "next/navigation";
 import Layout from "@/components/layout/layout";
 import { Edit, Plus, Trash, Truck } from "lucide-react";
 import { Button } from "@/components/ui/button";
-import { ShippingModal } from "@/components/modals/shipping-modal";
 import { Skeleton } from "@/components/ui/skeleton";
 import {
  fetchShippingMethods,
@@ -15,8 +14,55 @@ import {
  ShippingMethod,
  ShippingData
 } from "@/lib/services/shipping-service";
+import dynamic from "next/dynamic";
+import { Card, CardContent, CardHeader } from "@/components/ui/card";

-import { ShippingTable } from "@/components/tables/shipping-table";
+// Lazy load components
+const ShippingModal = dynamic(() => import("@/components/modals/shipping-modal").then(mod => ({ default: mod.ShippingModal })), {
+  loading: () => <div>Loading...</div>
+});
+
+const ShippingTable = dynamic(() => import("@/components/tables/shipping-table").then(mod => ({ default: mod.ShippingTable })), {
+  loading: () => <ShippingTableSkeleton />
+});
+
+// Loading skeleton for shipping table
+function ShippingTableSkeleton() {
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex items-center justify-between">
+          <Skeleton className="h-6 w-32" />
+          <Skeleton className="h-9 w-24" />
+        </div>
+      </CardHeader>
+      <CardContent>
+        <div className="border rounded-lg">
+          <div className="border-b p-4">
+            <div className="flex items-center gap-4">
+              {['Method Name', 'Price', 'Actions'].map((header, i) => (
+                <Skeleton key={i} className="h-4 w-20 flex-1" />
+              ))}
+            </div>
+          </div>
+          
+          {[...Array(4)].map((_, i) => (
+            <div key={i} className="border-b last:border-b-0 p-4">
+              <div className="flex items-center gap-4">
+                <Skeleton className="h-4 w-32 flex-1" />
+                <Skeleton className="h-4 w-16 flex-1" />
+                <div className="flex gap-2 flex-1">
+                  <Skeleton className="h-8 w-16" />
+                  <Skeleton className="h-8 w-16" />
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

 export default function ShippingPage() {
  const [shippingMethods, setShippingMethods] = useState<ShippingMethod[]>([]);
@@ -191,12 +237,14 @@ export default function ShippingPage() {
        </div>

        {/* Shipping Methods Table */}
-        <ShippingTable
-          shippingMethods={shippingMethods}
-          loading={loading}
-          onEditShipping={handleEditShipping}
-          onDeleteShipping={handleDeleteShipping}
-        />
+        <Suspense fallback={<ShippingTableSkeleton />}>
+          <ShippingTable
+            shippingMethods={shippingMethods}
+            loading={loading}
+            onEditShipping={handleEditShipping}
+            onDeleteShipping={handleDeleteShipping}
+          />
+        </Suspense>
      </div>

      {/* Shipping Modal */}