crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-23 04:36:49 +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
Download Patch File Download Diff File Expand all files Collapse all files

26
app/search/loading.tsx
View File

@@ -1,13 +1,25 @@
import Grid from 'components/grid';
import FilterList from 'components/layout/search/filter';
import { sorting } from 'lib/constants';
export default function Loading() {
return (
<Grid className="grid-cols-2 lg:grid-cols-3">
{Array(12)
.fill(0)
.map((_, index) => {
return <Grid.Item key={index} className="animate-pulse bg-gray-100 dark:bg-gray-900" />;
})}
</Grid>
<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>
<div className="order-last min-h-screen w-full md:order-none">
<Grid className="grid-cols-2 lg:grid-cols-3">
{Array(12)
.fill(0)
.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>
);
}