refactor: add animations

src/app/(modules)/package/page.tsx

@@ -29,6 +29,7 @@ import { PoweredBy } from "@/components/powered-by"
 
 export default function PackagePage() {
     const [packages, setPackages] = useState<PackageType[]>([])
+    const [totalItems, setTotalItems] = useState(0)
     const [projects, setProjects] = useState<Project[]>([])
     const [isLoading, setIsLoading] = useState(true)
     const [isModalOpen, setIsModalOpen] = useState(false)
@@ -55,11 +56,15 @@ export default function PackagePage() {
             setIsLoading(true)
             setError(null)
             const data = await fetchAllPackages({ skip: currentSkip, limit: currentLimit })
-            setPackages(data)
+            setPackages(data.items)
+            setTotalItems(data.totalItems)
         } catch (err) {
             setError("Failed to load packages. Please check if the backend is running.")
         } finally {
-            setIsLoading(false)
+            // Add a small delay for animation stability
+            setTimeout(() => {
+                setIsLoading(false)
+            }, 800)
         }
     }
 
@@ -67,7 +72,7 @@ export default function PackagePage() {
         try {
             setLoadingProjects(true)
             const data = await fetchProjects({ skip: 0, limit: 1000 }) // Load all projects for selector
-            setProjects(data)
+            setProjects(data.items)
         } catch (err) {
             setError("Failed to load projects.")
         } finally {
@@ -271,6 +276,7 @@ export default function PackagePage() {
                             pagination={{
                                 skip,
                                 limit,
+                                totalItems,
                                 onPageChange: setSkip,
                                 onLimitChange: (newLimit) => {
                                     setLimit(newLimit);