diff --git a/app/dashboard/categories/page.tsx b/app/dashboard/categories/page.tsx index aba6ab1..3383f9f 100644 --- a/app/dashboard/categories/page.tsx +++ b/app/dashboard/categories/page.tsx @@ -4,7 +4,7 @@ import { useState, useEffect } from "react"; import Layout from "@/components/layout/layout"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; -import { Plus, Pencil, Trash2, ChevronRight, ChevronDown } from "lucide-react"; +import { Plus, Pencil, Trash2, ChevronRight, ChevronDown, Loader2 } from "lucide-react"; import { toast } from "sonner"; import { Select, @@ -29,6 +29,7 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; export default function CategoriesPage() { const [categories, setCategories] = useState([]); + const [isLoading, setIsLoading] = useState(true); const [newCategoryName, setNewCategoryName] = useState(""); const [selectedParentId, setSelectedParentId] = useState(""); const [editingCategory, setEditingCategory] = useState(null); @@ -45,10 +46,13 @@ export default function CategoriesPage() { const fetchCategories = async () => { try { + setIsLoading(true); const fetchedCategories = await apiRequest("/categories", "GET"); setCategories(fetchedCategories); } catch (error) { toast.error("Failed to fetch categories"); + } finally { + setIsLoading(false); } }; @@ -243,7 +247,11 @@ export default function CategoriesPage() {
- {rootCategories.length === 0 ? ( + {isLoading ? ( +
+ +
+ ) : rootCategories.length === 0 ? (

No categories yet. Add your first category above.