Replaced spinner with skeleton on plp (#117)

* Replaced spinner with skeleton on plp

* Updated yarn.lock

* Added material UI core

* Fixed styling

* Updated skeleton components

* Removed material UI

* Improved skeleton parent

Author: long-wan-ep

src/Category.scss

@@ -44,6 +44,10 @@
     #{$block}__product {
       flex: 0 0 100%;
       text-align: center;
+
+      #{$block}__productskeleton {
+        margin-bottom: 40px;
+      }
     }
   }
 
@@ -96,4 +100,15 @@
       width: 1000px;
     }
   }
+
+  @media (max-width: $mobileWidth - 1px) {
+    #{$block}__productlist {
+      #{$block}__product {
+        #{$block}__productskeleton {
+          margin: auto;
+          width: 180px;
+        }
+      }
+    }
+  }
 }

src/Category.tsx

@@ -7,6 +7,7 @@ import { ProductThumbnail } from './ProductThumbnail';
 import { createCategoryUrl } from './routes';
 import { Pagination } from './Pagination';
 import { useResolve } from './hooks';
+import {config} from './config';
 
 import './Category.scss';
 
@@ -85,7 +86,40 @@ export const Category: React.FC = () => {
           </div>
         </>
       ) : (
-        <div className="loader" />
+        <>
+          <div className="category__breadcrumbs">
+            <div className="skeleton" style={{width: 200}}>&nbsp;</div>
+          </div>
+          
+          <div className="category__categoryname">
+            <div className="skeleton" style={{width: 150}}>&nbsp;</div>
+          </div>
+
+          <ul className="category__productlist">
+            {[...Array(config.categoryPageSize).keys()].map((index) =>
+              <li key={`skeleton_${index}`} className="category__product">
+                <div className="category__productskeleton">
+                  <div className="skeleton" style={{width: 180, height: 180}}/>
+                  <div className="skeleton" style={{width: 180, marginTop: 10}}>&nbsp;</div>
+                  <div className="skeleton" style={{width: 180, marginTop: 10}}>&nbsp;</div>
+                  <div className="skeleton" style={{width: 100, marginTop: 10}}>&nbsp;</div>
+                  <div className="skeleton" style={{width: 100, marginTop: 10}}>&nbsp;</div>
+                  <div className="skeleton" style={{width: 100, marginTop: 10}}>&nbsp;</div>
+                </div>
+              </li>
+            )}
+          </ul>
+
+          <div className="skeleton skeleton-parent">
+            <div className="category__pagination">
+              <Pagination
+                totalPages={3}
+                currentPage={1}
+                formatUrl={(page) => createCategoryUrl("", page)}
+              />
+            </div>
+          </div>
+        </>
       )}
     </div>
   );

src/ProductMainImage.tsx

@@ -29,13 +29,15 @@ export const ProductMainImage: React.FC<ProductMainImageProps> = (props) => {
 
   return (
     <>
-      {productImageUrl && (
+      {productImageUrl ? (
         <ImageContainer
         imgClassName="productmainimage"
         imgUrl={productImageUrl}
         alt={props.product.name}
         imageStyle={{ width: props.size, height: props.size, objectFit: 'fill', backgroundColor: productBackground }}
         />
+      ) : (
+        <div className="skeleton" style={{width: props.size || 180, height: props.size || 180}} />
       )}
     </>
   );

src/index.scss

@@ -507,6 +507,44 @@ $shopkitBtnOutlineText: $firstComplimentColor;
   );
 }
 
+@keyframes skeleton-animation {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+.skeleton {
+  background-color: rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+  position: relative;
+  &::after {
+    display:block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(
+      90deg, 
+      rgba(lightgrey, 0) 0, 
+      rgba(lightgrey, .8) 50%, 
+      rgba(lightgrey, 0) 100%
+    );
+    content:'';
+    animation: skeleton-animation 2s infinite;
+  }
+}
+
+.skeleton-parent {
+  width: fit-content;
+  > * {
+    visibility: hidden;
+  }
+}
+
 @media (max-width: $mobileWidth - 1px) {
   .appheader .shopkit-cart-button {
     border: none;

yarn.lock

@@ -1458,15 +1458,15 @@
     "@types/istanbul-reports" "^1.1.1"
     "@types/yargs" "^13.0.0"
 
-"@moltin/sdk@5.5.0":
-  version "5.5.0"
-  resolved "https://registry.yarnpkg.com/@moltin/sdk/-/sdk-5.5.0.tgz#55b7c33df0f437cdf76ce7bf04344bf7ba76cbd0"
-  integrity sha512-TzNBdnv/eI5Bi4FrE3zxpp6Udn7QEl4XnZZXjpwJKTSJQhxGhdpP1au4p5fVdeD3QD8T2cwyJ0H9FE8k6vC8cA==
+"@moltin/sdk@6.3.0":
+  version "6.3.0"
+  resolved "https://registry.yarnpkg.com/@moltin/sdk/-/sdk-6.3.0.tgz#9e5680cef86efa5f10d1b087c9ba9b1c9c082966"
+  integrity sha512-2ZZdb6kyZSuC9YOKo85a90oTwnsASluEhf4IdaZ0h5fkwt45wmPjuBjg7604KSNPlXo6Zuty83J/bzRlu+KbTw==
   dependencies:
     es6-promise "^4.0.5"
     fetch-everywhere "^1.0.5"
     inflected "^2.0.1"
-    node-localstorage "^1.3.0"
+    node-localstorage "^2.0.0"
 
 "@mrmlnc/readdir-enhanced@^2.2.1":
   version "2.2.1"
@@ -8355,10 +8355,10 @@ node-libs-browser@^2.2.1:
     util "^0.11.0"
     vm-browserify "^1.0.1"
 
-node-localstorage@^1.3.0:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/node-localstorage/-/node-localstorage-1.3.1.tgz#3177ef42837f398aee5dd75e319b281e40704243"
-  integrity sha512-NMWCSWWc6JbHT5PyWlNT2i8r7PgGYXVntmKawY83k/M0UJScZ5jirb61TLnqKwd815DfBQu+lR3sRw08SPzIaQ==
+node-localstorage@^2.0.0:
+  version "2.1.6"
+  resolved "https://registry.yarnpkg.com/node-localstorage/-/node-localstorage-2.1.6.tgz#7c62120beff8abbf960c858da70fddcfc336898a"
+  integrity sha512-yE7AycE5G2hU55d+F7Ona9nx97C+enJzWWx6jrsji7fuPZFJOvuW3X/LKKAcXRBcEIJPDOKt8ZiFWFmShR/irg==
   dependencies:
     write-file-atomic "^1.1.4"