hmm

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 */}