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,6 +58,13 @@ export default function SitesPage({ username, name }: SitesPageProps) {
                     setItemPerPage={setItemPerPage}
                 />
 
+
+                {loading ? (
+                    <div className="flex justify-center items-center h-48 mt-4">
+                        <Loading />
+                    </div>
+                ) : (
+                    <>
                         {sites.length > 0 ? (
                             <div className={
                                 itemPerPage === 5 
@@ -87,6 +96,8 @@ export default function SitesPage({ username, name }: SitesPageProps) {
                             itemsPerPage={itemPerPage} 
                             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
     };
 };