Skip to content

feat: create a loading state while the hypercert data loads #506

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 10 commits into from
Closed

feat: create a loading state while the hypercert data loads #506

Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
1fb17f4
Merge pull request #456 from hypercerts-org/dev
bitbeckers Feb 18, 2025
de43ff6
Merge pull request #464 from hypercerts-org/dev
bitbeckers Feb 24, 2025
269d801
Merge pull request #487 from hypercerts-org/dev
Jipperism Mar 13, 2025
9d3bf45
feat(profile): show warning banner contract account
pheuberger Mar 15, 2025
f5ea5d4
Merge pull request #488 from pheuberger/smart-contract-warning-banner
pheuberger Mar 24, 2025
dd6ee63
Merge pull request #490 from hypercerts-org/dev
pheuberger Mar 24, 2025
8983d77
Merge pull request #494 from hypercerts-org/dev
pheuberger Mar 25, 2025
926faae
Merge pull request #500 from hypercerts-org/dev
pheuberger Apr 3, 2025
b9f5ad7
Merge pull request #503 from hypercerts-org/dev
Jipperism Apr 5, 2025
6fb7602
feat: create a loading state while the hypercert data loads
satyam-mishra-pce Apr 9, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
97 changes: 97 additions & 0 deletions app/hypercerts/[hypercertId]/loading.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
import React from "react";
import { Skeleton } from "@/components/ui/skeleton";
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "@/components/ui/accordion";

const Loading = () => {
return (
<main className="flex flex-col p-8 md:px-24 md:pt-14 pb-24 space-y-4 flex-1">
{/* Hypercert Details Loading State */}
<div className="space-y-6">
<div className="flex flex-col md:flex-row gap-6">
{/* Image skeleton */}
<Skeleton className="w-full md:w-[400px] h-[400px] rounded-lg" />

{/* Content skeleton */}
<div className="flex-1 space-y-4">
<Skeleton className="h-8 w-3/4" /> {/* Title */}
<Skeleton className="h-4 w-1/4" /> {/* ID */}
<Skeleton className="h-20 w-full" /> {/* Description */}
{/* Work scope */}
<div className="space-y-2">
<Skeleton className="h-6 w-24" />
<div className="flex gap-2">
<Skeleton className="h-8 w-20" />
<Skeleton className="h-8 w-20" />
<Skeleton className="h-8 w-20" />
</div>
</div>
</div>
</div>
</div>

{/* Accordion Sections Loading State */}
<Accordion type="multiple" className="w-full">
{/* Creator's Feed Section */}
<AccordionItem value="creator-feed">
<AccordionTrigger className="uppercase text-sm text-slate-500 font-medium tracking-wider">
CREATOR&apos;S FEED
</AccordionTrigger>
<AccordionContent>
<div className="space-y-4">
<div className="flex justify-end">
<Skeleton className="h-10 w-32" />
</div>
<div className="space-y-2">
<Skeleton className="h-24 w-full" />
<Skeleton className="h-24 w-full" />
</div>
</div>
</AccordionContent>
</AccordionItem>

{/* Evaluations Section */}
<AccordionItem value="evaluations">
<AccordionTrigger className="uppercase text-sm text-slate-500 font-medium tracking-wider">
EVALUATIONS
</AccordionTrigger>
<AccordionContent>
<div className="space-y-4">
<div className="flex justify-end">
<Skeleton className="h-10 w-32" />
</div>
<div className="space-y-2">
<Skeleton className="h-24 w-full" />
<Skeleton className="h-24 w-full" />
</div>
</div>
</AccordionContent>
</AccordionItem>

{/* Marketplace Section */}
<AccordionItem value="marketplace-listings">
<AccordionTrigger className="uppercase text-sm text-slate-500 font-medium tracking-wider">
MARKETPLACE
</AccordionTrigger>
<AccordionContent>
<div className="space-y-4">
<div className="flex justify-end gap-2">
<Skeleton className="h-10 w-24" />
<Skeleton className="h-10 w-32" />
</div>
<div className="space-y-2">
<Skeleton className="h-32 w-full" />
</div>
</div>
</AccordionContent>
</AccordionItem>
</Accordion>
</main>
);
};

export default Loading;