feat(home): make skeleton more subtle

jwplayer · Jun 8, 2021 · e9d69ff · e9d69ff
1 parent b6c8e7a
commit e9d69ff
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 16 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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) => (