From 11d32a2c46de74a9573fc6ebf7c8a45ef21390b7 Mon Sep 17 00:00:00 2001
From: NotII <46204250+NotII@users.noreply.github.com>
Date: Mon, 24 Mar 2025 16:43:35 +0000
Subject: [PATCH] Update page.tsx

---
 app/dashboard/categories/page.tsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

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<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>