crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-05-12 12:47:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: split hero rendering

Browse Source 
Signed-off-by: Chloe <pinkcloudvnn@gmail.com>
This commit is contained in:
Chloe 2024-06-22 17:24:10 +07:00
parent 7015d1caef
commit b1782a4a28
No known key found for this signature in database
GPG Key ID: CFD53CE570D42DF5
2 changed files with 95 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/page.tsx
View File

@ -23,9 +23,7 @@ export async function generateMetadata(): Promise<Metadata> {
export default async function HomePage() { export default async function HomePage() {
return ( return (
<> <>
<Suspense>
<Hero /> <Hero />
</Suspense>
<div className="flex min-h-96 flex-col"> <div className="flex min-h-96 flex-col">
<Suspense> <Suspense>
<About /> <About />

67
components/hero.tsx
View File

@ -8,14 +8,10 @@ import ImageDisplay from './page/image-display';
const { SITE_NAME } = process.env; const { SITE_NAME } = process.env;
const Hero = async () => { const Offers = async () => {
const [offers, heroImage] = await Promise.all([ const offers = await getMetaobjects('usp_item');
getMetaobjects('usp_item'),
getMetaobject({ handle: { type: 'hero', handle: `${kebabCase(SITE_NAME)}-hero` } })
]);
return ( return (
<div className="flex flex-col border-b border-gray-200 lg:border-0">
<nav aria-label="Offers" className="order-last bg-white lg:order-first"> <nav aria-label="Offers" className="order-last bg-white lg:order-first">
<div className="max-w-8xl mx-auto lg:px-8"> <div className="max-w-8xl mx-auto lg:px-8">
<ul <ul
@ -37,12 +33,45 @@ const Hero = async () => {
</ul> </ul>
</div> </div>
</nav> </nav>
);
};
<div className="relative bg-gray-900"> const OffersPlaceholder = () => {
{/* Decorative image and overlay */} return (
<div aria-hidden="true" className="absolute inset-0 overflow-hidden"> <nav aria-label="Offers" className="order-last bg-white lg:order-first">
{heroImage ? ( <div className="max-w-8xl mx-auto lg:px-8">
<Suspense fallback={<div className="h-[626px] w-full" />}> <ul
role="list"
className="grid animate-pulse grid-cols-1 divide-y divide-gray-200 py-5 lg:grid-cols-4 lg:divide-x lg:divide-y-0"
>
<li className="flex w-full items-center justify-start gap-2 px-4 lg:justify-center">
<div className="size-7 rounded bg-gray-100" />
<div className="h-7 w-1/3 rounded bg-slate-100" />
</li>
<li className="flex w-full items-center justify-start gap-2 px-4 lg:justify-center">
<div className="size-7 rounded bg-gray-100" />
<div className="h-7 w-1/3 rounded bg-slate-100" />
</li>
<li className="flex w-full items-center justify-start gap-2 px-4 lg:justify-center">
<div className="size-7 rounded bg-gray-100" />
<div className="h-7 w-1/3 rounded bg-slate-100" />
</li>
<li className="flex w-full items-center justify-start gap-2 px-4 lg:justify-center">
<div className="size-7 rounded bg-gray-100" />
<div className="h-7 w-1/3 rounded bg-slate-100" />
</li>
</ul>
</div>
</nav>
);
};
const HeroImage = async () => {
const heroImage = await getMetaobject({
handle: { type: 'hero', handle: `${kebabCase(SITE_NAME)}-hero` }
});
return heroImage ? (
<Suspense>
<ImageDisplay <ImageDisplay
fileId={heroImage.file as string} fileId={heroImage.file as string}
title="Hero Image" title="Hero Image"
@ -63,7 +92,21 @@ const Hero = async () => {
className="h-full w-full object-cover object-center" className="h-full w-full object-cover object-center"
sizes="100vw" sizes="100vw"
/> />
)} );
};
const Hero = () => {
return (
<div className="flex flex-col border-b border-gray-200 lg:border-0">
<Suspense fallback={<OffersPlaceholder />}>
<Offers />
</Suspense>
<div className="relative">
{/* Decorative image and overlay */}
<div aria-hidden="true" className="absolute inset-0 overflow-hidden">
<Suspense fallback={<div className="h-[626px] w-full" />}>
<HeroImage />
</Suspense>
</div> </div>
<div aria-hidden="true" className="absolute inset-0 bg-dark opacity-80" /> <div aria-hidden="true" className="absolute inset-0 bg-dark opacity-80" />
<div className="flex flex-col gap-10 px-6 py-20 text-center sm:pb-56 sm:pt-32 lg:px-0"> <div className="flex flex-col gap-10 px-6 py-20 text-center sm:pb-56 sm:pt-32 lg:px-0">