Skip to content

Commit

Permalink
Better loading page for projects
Browse files Browse the repository at this point in the history
  • Loading branch information
@itexpert120
itexpert120 committed Aug 10, 2024
1 parent d7aa0c4 commit e0b347d
Show file tree
Hide file tree
Showing 3 changed files with 99 additions and 60 deletions.
10 changes: 2 additions & 8 deletions app/project/[pid]/_components/discover-more.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import ErrorImage from "@/public/assets/images/error.webp";

interface DiscoverMoreProps {
pid: string;
gridSize: number;
}

function ProjectCard({ project }: { project: any }) {
Expand All @@ -29,10 +28,7 @@ function ProjectCard({ project }: { project: any }) {
);
}

export default async function DiscoverMore({
pid,
gridSize,
}: DiscoverMoreProps) {
export default async function DiscoverMore({ pid }: DiscoverMoreProps) {
const relatedProjects = await fetchRelatedProjects(pid);

if (!relatedProjects) {
Expand All @@ -53,9 +49,7 @@ export default async function DiscoverMore({
return (
<div className="flex flex-col gap-4">
<h2 className="text-2xl font-bold">Discover More</h2>
<div
className={`discover-more grid grid-cols-1 gap-4 ${gridSize >= 3 ? "md:grid-cols-2" : "md:grid-cols-3"}`}
>
<div className={`discover-more grid grid-cols-1 gap-4 lg:grid-cols-2`}>
{Object.keys(relatedProjects).map((key) => (
<ProjectCard key={key} project={relatedProjects[key]} />
))}
Expand Down
142 changes: 96 additions & 46 deletions app/project/[pid]/loading.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,68 +1,118 @@
export default function LoadingPage() {
function CardSkeleton() {
return (
<div className="container mx-auto my-4 flex animate-pulse flex-col gap-4 px-4 text-[#ECEBE9] md:my-12 md:gap-0">
<div className="flex items-center gap-4">
<div className="h-[5rem] w-[5rem] rounded-full bg-gray-700 md:h-[7.5rem] md:w-[7.5rem]"></div>
<div className="flex flex-col gap-2">
<div className="h-8 w-48 rounded-md bg-gray-700 md:h-10 md:w-60"></div>
<div className="h-4 w-32 rounded-md bg-gray-700"></div>
<div className="flex flex-wrap gap-2">
<div className="h-6 w-16 rounded-full bg-gray-700"></div>
<div className="h-6 w-16 rounded-full bg-gray-700"></div>
<div className="h-6 w-16 rounded-full bg-gray-700"></div>
</div>
</div>
<div className="flex animate-pulse flex-col gap-2 rounded-lg bg-[#1b1d2a] p-4 lg:flex-row">
<div className="h-16 w-16 rounded-full bg-gray-700"></div>
<div className="flex flex-col gap-1">
<div className="h-4 w-32 rounded-md bg-gray-700"></div>
<div className="h-3 w-24 rounded-md bg-gray-700"></div>
</div>
</div>
);
}

<div className="flex flex-col gap-4 md:ml-[8.375rem]">
<div className="flex flex-wrap items-center gap-2 md:hidden">
<div className="h-8 w-24 rounded-full bg-gray-700"></div>
<div className="h-8 w-24 rounded-full bg-gray-700"></div>
export default function LoadingPage() {
return (
<div className="container mx-auto my-4 flex animate-pulse flex-col gap-4 px-4 lg:my-12">
<div className="flex flex-col justify-between gap-4 lg:flex-row">
<div className="flex flex-col gap-4 lg:flex-row lg:items-center">
<div className="h-[7.5rem] w-[7.5rem] rounded-full bg-gray-700"></div>
<div className="flex flex-col gap-2">
<div className="h-8 w-48 rounded-md bg-gray-700 lg:h-10 lg:w-60"></div>
<div className="h-4 w-32 rounded-md bg-gray-700"></div>
<div className="flex flex-wrap gap-2">
<div className="h-6 w-16 rounded-full bg-gray-700"></div>
<div className="h-6 w-16 rounded-full bg-gray-700"></div>
<div className="h-6 w-16 rounded-full bg-gray-700"></div>
</div>
</div>
</div>
<div className="flex flex-col gap-2 md:hidden">
<div className="flex flex-col gap-2">
<div className="flex flex-wrap items-center gap-2">
<div className="h-8 w-24 rounded-full bg-gray-700"></div>
<div className="h-8 w-24 rounded-full bg-gray-700"></div>
</div>
<div className="h-4 w-48 rounded-md bg-gray-700"></div>
<div className="flex flex-wrap items-center gap-2">
<div className="h-8 w-8 rounded-full bg-gray-700"></div>
<div className="h-8 w-8 rounded-full bg-gray-700"></div>
<div className="h-8 w-8 rounded-full bg-gray-700"></div>
<div className="h-8 w-8 rounded-full bg-gray-700"></div>
<div className="h-8 w-8 rounded-full bg-gray-700"></div>
<div className="h-8 w-8 rounded-full bg-gray-700"></div>
</div>
</div>
<div className="prose prose-invert lg:prose-lg">
<div className="space-y-4">
<div className="h-4 w-full rounded-md bg-gray-700"></div>
<div className="h-4 w-full rounded-md bg-gray-700"></div>
<div className="h-4 w-full rounded-md bg-gray-700"></div>
<div className="h-4 w-full rounded-md bg-gray-700"></div>
<div className="h-4 w-full rounded-md bg-gray-700"></div>
</div>
</div>
</div>
<div className="mt-4 flex flex-col gap-4">
<h3 className="text-2xl font-bold">Discover More</h3>
<div className={`grid grid-cols-1 gap-4 md:grid-cols-3`}>
<div className="flex animate-pulse flex-col gap-2 rounded-lg bg-[#1b1d2a] p-4 md:flex-row">
<div className="h-16 w-16 rounded-full bg-gray-700"></div>
<div className="flex flex-col gap-1">
<div className="h-4 w-32 rounded-md bg-gray-700"></div>
<div className="h-3 w-24 rounded-md bg-gray-700"></div>
<div className="grid grid-cols-1 gap-6 lg:grid-cols-12">
<div className="col-span-1 gap-4 lg:col-span-8">
<div className="prose prose-invert max-w-none rounded-lg bg-[#1b1d2a] p-4 lg:prose-lg">
<div className="space-y-4">
<div className="h-4 w-full rounded-md bg-gray-700"></div>
<div className="h-4 w-full rounded-md bg-gray-700"></div>
<div className="h-4 w-full rounded-md bg-gray-700"></div>
<div className="h-4 w-full rounded-md bg-gray-700"></div>
<div className="h-4 w-full rounded-md bg-gray-700"></div>
<div className="h-4 w-full rounded-md bg-gray-700"></div>
<div className="h-4 w-full rounded-md bg-gray-700"></div>
<div className="h-4 w-full rounded-md bg-gray-700"></div>
</div>
</div>
<div className="flex animate-pulse flex-col gap-2 rounded-lg bg-[#1b1d2a] p-4 md:flex-row">
<div className="h-16 w-16 rounded-full bg-gray-700"></div>
<div className="flex flex-col gap-1">
<div className="h-4 w-32 rounded-md bg-gray-700"></div>
<div className="h-3 w-24 rounded-md bg-gray-700"></div>
<div className="mt-4 flex flex-col gap-4">
<h3 className="text-2xl font-bold">Discover More</h3>
<div className={`grid grid-cols-1 gap-4 lg:grid-cols-2`}>
<CardSkeleton />
<CardSkeleton />
<CardSkeleton />
<CardSkeleton />
<CardSkeleton />
<CardSkeleton />
</div>
</div>
<div className="flex animate-pulse flex-col gap-2 rounded-lg bg-[#1b1d2a] p-4 md:flex-row">
<div className="h-16 w-16 rounded-full bg-gray-700"></div>
<div className="flex flex-col gap-1">
<div className="h-4 w-32 rounded-md bg-gray-700"></div>
<div className="h-3 w-24 rounded-md bg-gray-700"></div>
</div>
<div className="col-span-1 flex flex-col gap-4 lg:col-span-4">
<div className="w-full animate-pulse rounded-lg bg-[#1b1d2a] p-4">
<div className="mb-4 h-6 w-1/3 rounded bg-gray-700"></div>
<div className="flex flex-col gap-2 p-2">
<div className="flex items-center gap-2">
<div className="h-6 w-6 rounded-full bg-gray-700"></div>
<div className="h-4 w-20 rounded bg-gray-700"></div>
</div>
<div className="mb-4 h-8 w-1/2 rounded bg-gray-700"></div>
<div className="flex flex-col flex-wrap gap-4 lg:flex-row">
{[
"ATH",
"24h high",
"Volume 24h",
"24h low",
"Market Cap",
"Circulating Supply",
].map((label) => (
<div className="flex flex-col p-1" key={label}>
<div className="mb-2 h-4 w-24 rounded bg-gray-700"></div>
<div className="h-4 w-16 rounded bg-gray-700"></div>
</div>
))}
</div>
</div>
<div className="mt-2 h-6 w-1/3 rounded bg-gray-700"></div>
</div>
<div className="flex animate-pulse flex-col gap-2 rounded-lg bg-[#1b1d2a] p-4">
<div className="flex flex-col gap-4">
<div className="mb-4 h-6 w-1/3 rounded bg-gray-700"></div>
{["NEAR Chain (NEP-141)", "Aurora", "Ethereum"].map(
(chainName) => (
<div key={chainName} className="flex flex-col gap-2">
<div className="h-4 w-1/2 rounded bg-gray-700"></div>
<div className="h-8 w-full rounded bg-gray-700"></div>
</div>
),
)}
</div>
</div>
<div className="flex animate-pulse flex-col gap-4 rounded-lg bg-[#1b1d2a] p-4">
<div className="mb-4 h-6 w-1/2 rounded bg-gray-700"></div>
<div
className="overflow-y-auto rounded-xl bg-gray-700"
style={{ maxHeight: "500px", minHeight: "500px" }}
></div>
</div>
</div>
</div>
Expand Down
7 changes: 1 addition & 6 deletions app/project/[pid]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,12 +58,7 @@ export default async function ProjectPage({ params }: ProjectPageProps) {
</Markdown>
</div>
</div>
<DiscoverMore
pid={pid}
gridSize={
Object.keys(tokenInfo).length || profile.linktree?.twitter ? 3 : 1
}
/>
<DiscoverMore pid={pid} />
</div>
<div className="flex flex-col gap-4 lg:col-span-4">
<PriceInfo tokenInfo={tokenInfo} name={profile.name} />
Expand Down

0 comments on commit e0b347d

Please sign in to comment.