g/ember-market-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

hmm

Browse Source
This commit is contained in:
NotII
2025-07-17 16:07:07 +01:00
parent e65d6d3fee
commit 0fa33df2ad
9 changed files with 607 additions and 730 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
app/dashboard/products/page.tsx
View File

@@ -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();