From e9d69ff4b6f42b5293df9a0a2e2d3934c088e408 Mon Sep 17 00:00:00 2001
From: Roy Schut <roy@videodock.com>
Date: Tue, 8 Jun 2021 09:46:56 +0200
Subject: [PATCH] feat(home): make skeleton more subtle

---
 src/components/Card/Card.module.scss   |  6 +-----
 src/components/Card/Card.tsx           | 10 ++++++----
 src/components/Shelf/Shelf.module.scss |  7 +------
 src/components/Shelf/Shelf.tsx         |  2 +-
 4 files changed, 9 insertions(+), 16 deletions(-)

diff --git a/src/components/Card/Card.module.scss b/src/components/Card/Card.module.scss
index 8a9b5939a..dc2f1b70d 100644
--- a/src/components/Card/Card.module.scss
+++ b/src/components/Card/Card.module.scss
@@ -109,7 +109,7 @@ $aspects: ((1, 1), (2, 1), (2, 3), (4, 3), (5, 3), (16, 9), (9, 16));
   height: 2.3em;
 
   &.loading {
-    background-color: rgba(255, 255, 255, 0.4);
+    background-color: var(--card-slider-loading-card-bg);
     height: 16px;
     border-radius: 5px;
     width: 30%;
@@ -138,8 +138,4 @@ $aspects: ((1, 1), (2, 1), (2, 3), (4, 3), (5, 3), (16, 9), (9, 16));
   font-weight: 600;
   background-color: rgba(variables.$black, 0.6);
   border-radius: 4px;
-
-  &.loading {
-    background-color: rgba(255, 255, 255, 0.4);
-  }
 }
diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx
index b404fbbb5..bb24eb629 100644
--- a/src/components/Card/Card.tsx
+++ b/src/components/Card/Card.tsx
@@ -53,10 +53,12 @@ function Card({
       aria-label={`Play ${title}`}
     >
       <div className={posterClassNames} style={{ backgroundImage: posterSource ? `url(${posterSource})` : '' }}>
-        <div className={styles.meta}>
-          {featured && <div className={classNames(styles.title, { [styles.loading]: loading })}>{title}</div>}
-          {metaData()}
-        </div>
+        {!loading && (
+          <div className={styles.meta}>
+            {featured && <div className={classNames(styles.title, { [styles.loading]: loading })}>{title}</div>}
+            {metaData()}
+          </div>
+        )}
       </div>
       {!featured && (
         <div className={styles.titleContainer}>
diff --git a/src/components/Shelf/Shelf.module.scss b/src/components/Shelf/Shelf.module.scss
index a220d3345..53e8cae45 100644
--- a/src/components/Shelf/Shelf.module.scss
+++ b/src/components/Shelf/Shelf.module.scss
@@ -15,6 +15,7 @@
 
 .title {
   width: 100%;
+  min-height: 28px;
   margin-bottom: 12px;
   overflow: hidden;
   color: var(--card-color);
@@ -23,12 +24,6 @@
   font-size: 24px;
   white-space: nowrap;
   text-overflow: ellipsis;
-
-  &.loading {
-    width: 20%;
-    height: 28px;
-    border-radius: 5px;
-  }
 }
 
 .chevron {
diff --git a/src/components/Shelf/Shelf.tsx b/src/components/Shelf/Shelf.tsx
index 0258432ca..21a629f66 100644
--- a/src/components/Shelf/Shelf.tsx
+++ b/src/components/Shelf/Shelf.tsx
@@ -64,7 +64,7 @@ const Shelf: React.FC<ShelfProps> = ({
         items={playlist.playlist}
         tilesToShow={tilesToShow}
         cycleMode={'restart'}
-        showControls={!matchMedia('(hover: none)').matches}
+        showControls={!matchMedia('(hover: none)').matches && !loading}
         transitionTime={'0.3s'}
         spacing={8}
         renderLeftControl={(doSlide) => (