Loading on Sites & Site load

app/dashboard/sites/SitesPage.tsx

@@ -6,6 +6,7 @@ import Sites from "@/components/cards/Sites";
 import Pagination from "@/components/Pagination";
 import useSites from "@/hooks/useSites";
 import SearchAndLayout from "@/components/SearchAndLayout";
+import Loading from "@/components/Loading";
 
 interface SitesPageProps {
     username: string;
@@ -22,7 +23,8 @@ export default function SitesPage({ username, name }: SitesPageProps) {
         setSearch,
         handlePageChange,
         setItemPerPage,
-        loadSites
+        loadSites,
+        loading
     } = useSites();
     return (
         <Sidebar 
@@ -56,37 +58,46 @@ export default function SitesPage({ username, name }: SitesPageProps) {
                     setItemPerPage={setItemPerPage}
                 />
 
-                {sites.length > 0 ? (
+
-                    <div className={
+                {loading ? (
-                        itemPerPage === 5 
+                    <div className="flex justify-center items-center h-48 mt-4">
-                            ? "flex flex-col gap-4 pt-4" 
+                        <Loading />
-                            : "grid grid-cols-1 md:grid-cols-2 gap-4 pt-4"
-                    }>
-                        {sites.map((site: any) => (
-                            <Sites 
-                                key={site.id} 
-                                id={site.id} 
-                                name={site.name} 
-                                description={site.description} 
-                                networks={site.networks} 
-                            />
-                        ))}
                     </div>
                 ) : (
-                    <div className="flex justify-center items-center h-48 bg-base-200 rounded-lg mt-4">
+                    <>
-                        <div className="text-center">
+                        {sites.length > 0 ? (
-                            <h3 className="text-lg font-bold">No Sites Found</h3>
+                            <div className={
-                            <p className="text-sm opacity-70">No sites match your current search criteria</p>
+                                itemPerPage === 5 
-                        </div>
+                                    ? "flex flex-col gap-4 pt-4" 
-                    </div>
+                                    : "grid grid-cols-1 md:grid-cols-2 gap-4 pt-4"
-                )}
+                            }>
+                                {sites.map((site: any) => (
+                                    <Sites 
+                                        key={site.id} 
+                                        id={site.id} 
+                                        name={site.name} 
+                                        description={site.description} 
+                                        networks={site.networks} 
+                                    />
+                                ))}
+                            </div>
+                        ) : (
+                            <div className="flex justify-center items-center h-48 bg-base-200 rounded-lg mt-4">
+                                <div className="text-center">
+                                    <h3 className="text-lg font-bold">No Sites Found</h3>
+                                    <p className="text-sm opacity-70">No sites match your current search criteria</p>
+                                </div>
+                            </div>
+                        )}
                     
-                <Pagination 
+                        <Pagination 
-                    currentPage={currentPage} 
+                            currentPage={currentPage} 
-                    totalItems={total} 
+                            totalItems={total} 
-                    itemsPerPage={itemPerPage} 
+                            itemsPerPage={itemPerPage} 
-                    onPageChange={handlePageChange}
+                            onPageChange={handlePageChange}
-                />
+                        />
+                    </>
+                )}
             </main>
         </Sidebar>
     )

app/dashboard/sites/[siteId]/SitePage.tsx

@@ -2,6 +2,7 @@
 import Sidebar from "@/components/Sidebar"
 import useSite from "@/hooks/useSite"
 import { useEffect, useState } from "react"
+import Loading from "@/components/Loading"
 import { EditModeToggle } from "@/components/EditModeToggle"
 import AddNetwork from "@/components/dialogues/AddNetwork"
 import { Plus, Pencil, Trash, Info, Building2, Network as NetworkIcon, Globe, Cpu } from "lucide-react"
@@ -17,7 +18,7 @@ interface SitesPageProps {
 }
 
 export default function SitesPage({ username, name, siteId }: SitesPageProps) {
-  const { site, loadSite, setSiteId } = useSite()
+  const { site, loadSite, setSiteId, loading } = useSite()
   const [isEditMode, setIsEditMode] = useState(false)
 
   useEffect(() => {
@@ -29,6 +30,11 @@ export default function SitesPage({ username, name, siteId }: SitesPageProps) {
   return (
     <Sidebar username={username} fullName={name} breadcrumbPath={["/", "Dashboard", "Resources", "Sites", site.name]}>
       <main className="w-full">
+        {loading ? (
+          <div className="flex justify-center items-center h-64 w-full">
+            <Loading />
+          </div>
+        ) : (
         <div className="flex flex-col gap-4 w-full">
           <div className="card bg-base-100 shadow-xl rounded-xl overflow-hidden border border-base-200 w-full">
             <div className="card-body p-6">
@@ -153,6 +159,7 @@ export default function SitesPage({ username, name, siteId }: SitesPageProps) {
           <EditSite site={site} onSiteEdited={loadSite} />
           <DeleteSite siteId={site.id} />
         </div>
+        )}
       </main>
     </Sidebar>
   )

hooks/useSite.ts

@@ -10,13 +10,16 @@ const useSite = () => {
         networks: []
     });
     const [siteId, setSiteId] = useState("");
+    const [loading, setLoading] = useState(false);
 
     const loadSite = useCallback(() => {
         if (!siteId) return;
+        setLoading(true);
         axios.get('/api/sites/get', {
             params: { siteId }
         }).then((response) => {
             setSite(response.data.site);
+            setLoading(false);
         });
     }, [siteId]);
 
@@ -58,6 +61,7 @@ const useSite = () => {
         setSiteId,
         editSite,
         deleteSite,
+        loading
     };
 };
 

hooks/useSites.ts

@@ -11,13 +11,16 @@ const useSites = () => {
     const [itemPerPage, setItemPerPage] = useState(defaultLayout);
     const [total, setTotal] = useState(0);
     const [search, setSearch] = useState("");
+    const [loading, setLoading] = useState(false);
 
     const loadSites = useCallback(() => {
+        setLoading(true);
         axios.get('/api/sites/get_all', {
             params: { currentPage, itemPerPage, search }
         }).then((response) => {
             setSites(response.data.sites);
             setTotal(response.data.total);
+            setLoading(false);
         });
     }, [currentPage, itemPerPage, search]);
 
@@ -41,7 +44,8 @@ const useSites = () => {
         setSearch,
         handlePageChange,
         setItemPerPage,
-        loadSites
+        loadSites,
+        loading
     };
 };