Loading on Sites & Site load

This commit is contained in:
headlesdev
2025-05-19 15:05:35 +02:00
parent 62d8c1c1b2
commit 59a32e0407
4 changed files with 57 additions and 31 deletions

View File

@@ -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={
itemPerPage === 5
? "flex flex-col gap-4 pt-4"
: "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}
/>
))}
{loading ? (
<div className="flex justify-center items-center h-48 mt-4">
<Loading />
</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>
<>
{sites.length > 0 ? (
<div className={
itemPerPage === 5
? "flex flex-col gap-4 pt-4"
: "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
currentPage={currentPage}
totalItems={total}
itemsPerPage={itemPerPage}
onPageChange={handlePageChange}
/>
</>
)}
<Pagination
currentPage={currentPage}
totalItems={total}
itemsPerPage={itemPerPage}
onPageChange={handlePageChange}
/>
</main>
</Sidebar>
)