From 85e05847823058bfb4083ec9b59292819d2f8d92 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20Meyer?= <b.meyer@shopware.com>
Date: Thu, 13 Jul 2023 16:46:37 +0200
Subject: [PATCH] feat(poc): improve loading style

---
 .../(collection)/[...collection]/page.tsx     | 13 +++++++---
 app/search/loading.tsx                        | 26 ++++++++++++++-----
 2 files changed, 28 insertions(+), 11 deletions(-)

diff --git a/app/search/(collection)/[...collection]/page.tsx b/app/search/(collection)/[...collection]/page.tsx
index 0bce5ab50..7de68dae9 100644
--- a/app/search/(collection)/[...collection]/page.tsx
+++ b/app/search/(collection)/[...collection]/page.tsx
@@ -1,4 +1,3 @@
-import { getCollection, getCollectionProducts } from 'lib/shopware';
 import { Metadata } from 'next';
 import { notFound } from 'next/navigation';
 
@@ -7,6 +6,8 @@ import Collections from 'components/layout/search/collections';
 import FilterList from 'components/layout/search/filter';
 import ProductGridItems from 'components/layout/product-grid-items';
 import Pagination from 'components/collection/pagination';
+
+import { getCollection, getCollectionProducts } from 'lib/shopware';
 import { defaultSort, sorting } from 'lib/constants';
 
 export const runtime = 'edge';
@@ -49,7 +50,7 @@ export default async function CategoryPage({
       {products.length === 0 ? (
         <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">
             <Collections collection={params.collection} />
           </div>
@@ -57,8 +58,12 @@ export default async function CategoryPage({
             <Grid className="grid-cols-2 lg:grid-cols-3">
               <ProductGridItems products={products} />
             </Grid>
-            <nav aria-label="Collection pagination" className='block sm:flex items-center'>
-              <Pagination itemsPerPage={limit} itemsTotal={total} currentPage={page ? parseInt(page) - 1 : 0} />
+            <nav aria-label="Collection pagination" className="block items-center sm:flex">
+              <Pagination
+                itemsPerPage={limit}
+                itemsTotal={total}
+                currentPage={page ? parseInt(page) - 1 : 0}
+              />
             </nav>
           </div>
           <div className="order-none md:order-last md:w-1/6 md:flex-none">
diff --git a/app/search/loading.tsx b/app/search/loading.tsx
index 3b4bd399f..730c40184 100644
--- a/app/search/loading.tsx
+++ b/app/search/loading.tsx
@@ -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>
   );
 }