Loading on Sites & Site load

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