Update page.tsx

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<Category[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
   const [newCategoryName, setNewCategoryName] = useState("");
   const [selectedParentId, setSelectedParentId] = useState<string>("");
   const [editingCategory, setEditingCategory] = useState<Category | null>(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() {
           </CardHeader>
           <CardContent>
             <div className="space-y-1">
-              {rootCategories.length === 0 ? (
+              {isLoading ? (
+                <div className="flex items-center justify-center py-8">
+                  <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+                </div>
+              ) : rootCategories.length === 0 ? (
                 <p className="text-sm text-muted-foreground text-center py-4">
                   No categories yet. Add your first category above.
                 </p>