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

feat(poc): improve loading style

Browse Source
This commit is contained in:
Björn Meyer 2023-07-13 16:46:37 +02:00
parent 245127227e
commit 85e0584782
2 changed files with 28 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
app/search/(collection)/[...collection]/page.tsx
View File

@ -1,4 +1,3 @@
import { getCollection, getCollectionProducts } from 'lib/shopware';
import { Metadata } from 'next'; import { Metadata } from 'next';
import { notFound } from 'next/navigation'; import { notFound } from 'next/navigation';
@ -7,6 +6,8 @@ import Collections from 'components/layout/search/collections';
import FilterList from 'components/layout/search/filter'; import FilterList from 'components/layout/search/filter';
import ProductGridItems from 'components/layout/product-grid-items'; import ProductGridItems from 'components/layout/product-grid-items';
import Pagination from 'components/collection/pagination'; import Pagination from 'components/collection/pagination';
import { getCollection, getCollectionProducts } from 'lib/shopware';
import { defaultSort, sorting } from 'lib/constants'; import { defaultSort, sorting } from 'lib/constants';
export const runtime = 'edge'; export const runtime = 'edge';
@ -49,7 +50,7 @@ export default async function CategoryPage({
{products.length === 0 ? ( {products.length === 0 ? (
<p className="py-3 text-lg">{`No products found in this collection`}</p> <p className="py-3 text-lg">{`No products found in this collection`}</p>
) : ( ) : (
<div className='mx-auto flex max-w-7xl flex-col bg-white py-6 text-black dark:bg-black dark:text-white md:flex-row'> <div className="mx-auto flex max-w-7xl flex-col bg-white py-6 text-black dark:bg-black dark:text-white md:flex-row">
<div className="order-first flex-none md:w-1/6"> <div className="order-first flex-none md:w-1/6">
<Collections collection={params.collection} /> <Collections collection={params.collection} />
</div> </div>
@ -57,8 +58,12 @@ export default async function CategoryPage({
<Grid className="grid-cols-2 lg:grid-cols-3"> <Grid className="grid-cols-2 lg:grid-cols-3">
<ProductGridItems products={products} /> <ProductGridItems products={products} />
</Grid> </Grid>
<nav aria-label="Collection pagination" className='block sm:flex items-center'> <nav aria-label="Collection pagination" className="block items-center sm:flex">
<Pagination itemsPerPage={limit} itemsTotal={total} currentPage={page ? parseInt(page) - 1 : 0} /> <Pagination
itemsPerPage={limit}
itemsTotal={total}
currentPage={page ? parseInt(page) - 1 : 0}
/>
</nav> </nav>
</div> </div>
<div className="order-none md:order-last md:w-1/6 md:flex-none"> <div className="order-none md:order-last md:w-1/6 md:flex-none">

26
app/search/loading.tsx
View File

@ -1,13 +1,25 @@
import Grid from 'components/grid'; import Grid from 'components/grid';
import FilterList from 'components/layout/search/filter';
import { sorting } from 'lib/constants';
export default function Loading() { export default function Loading() {
return ( return (
<Grid className="grid-cols-2 lg:grid-cols-3"> <div className="mx-auto flex max-w-7xl flex-col bg-white py-6 text-black dark:bg-black dark:text-white md:flex-row">
{Array(12) <div className="order-first flex-none md:w-1/6"></div>
.fill(0) <div className="order-last min-h-screen w-full md:order-none">
.map((_, index) => { <Grid className="grid-cols-2 lg:grid-cols-3">
return <Grid.Item key={index} className="animate-pulse bg-gray-100 dark:bg-gray-900" />; {Array(12)
})} .fill(0)
</Grid> .map((_, index) => {
return (
<Grid.Item key={index} className="animate-pulse bg-gray-100 dark:bg-gray-900" />
);
})}
</Grid>
</div>
<div className="order-none md:order-last md:w-1/6 md:flex-none">
<FilterList list={sorting} title="Sort by" />
</div>
</div>
); );
} }