diff --git a/app/dashboard/products/page.tsx b/app/dashboard/products/page.tsx
index 6fbec7c..310e116 100644
--- 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: () =>
+});
+
+const ProductModal = dynamic(() => import("@/components/modals/product-modal").then(mod => ({ default: mod.ProductModal })), {
+ loading: () =>
Loading...
+});
+
+const ImportProductsModal = dynamic(() => import("@/components/modals/import-products-modal"), {
+ loading: () =>
Loading...
+});
+
+// Loading skeleton for the product table
+function ProductTableSkeleton() {
+ return (
+
+
+
+
+
+
+
+
+ {['Product', 'Category', 'Price', 'Stock', 'Status', 'Actions'].map((header, i) => (
+
+ ))}
+
+
+
+ {[...Array(8)].map((_, i) => (
+
+ ))}
+
+
+
+ );
+}
export default function ProductsPage() {
const router = useRouter();
diff --git a/app/dashboard/shipping/page.tsx b/app/dashboard/shipping/page.tsx
index 94b2b03..e2541e7 100644
--- 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: () =>
Loading...
+});
+
+const ShippingTable = dynamic(() => import("@/components/tables/shipping-table").then(mod => ({ default: mod.ShippingTable })), {
+ loading: () =>
+});
+
+// Loading skeleton for shipping table
+function ShippingTableSkeleton() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+ {['Method Name', 'Price', 'Actions'].map((header, i) => (
+
+ ))}
+
+
+
+ {[...Array(4)].map((_, i) => (
+
+ ))}
+
+
+
+ );
+}
export default function ShippingPage() {
const [shippingMethods, setShippingMethods] = useState
([]);
@@ -191,12 +237,14 @@ export default function ShippingPage() {