feat(home): add skeletons while loading

jwplayer · Jun 7, 2021 · c010592 · c010592
1 parent d9898d4
commit c010592
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 10 deletions.
diff --git a/src/components/Card/Card.module.scss b/src/components/Card/Card.module.scss
@@ -28,6 +28,10 @@
     .title {
       font-size: 34px;
       font-family: var(--body-font-family);
+      line-height: 36px;
+      height: 1em;
+      text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.14), 0px 4px 5px rgba(0, 0, 0, 0.12), 0px 1px 10px rgba(0, 0, 0, 0.2);
+
       @include responsive.mobile-only {
         font-size: 24px;
       }
@@ -42,6 +46,7 @@
     .meta {
       padding: 16px;
       background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
+      justify-content: space-between;
     }
   }
 
@@ -88,34 +93,38 @@ $aspects: ((1, 1), (2, 1), (2, 3), (4, 3), (5, 3), (16, 9), (9, 16));
   @include responsive.mobile-only {
     font-size: 14px;
   }
-  flex: 1;
   color: var(--card-color);
   font-family: var(--body-alt-font-family);
   font-weight: 700;
   font-size: 16px;
   text-align: left;
   overflow: hidden;
+  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.14), 0px 3px 4px rgba(0, 0, 0, 0.12), 0px 1px 5px rgba(0, 0, 0, 0.2);
   @supports (-webkit-line-clamp: 2) {
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
   }
 
   height: 2.3em;
+
+  &.loading {
+    background-color: rgba(255, 255, 255, 0.4);
+    height: 16px;
+    border-radius: 5px;
+    width: 30%;
+  }
 }
 
 .meta {
   position: absolute;
   bottom: 0;
   display: flex;
+  justify-content: flex-end;
   align-items: center;
   width: 100%;
   padding: 8px;
   color: var(--card-color);
-
-  .title {
-    flex: 1;
-  }
 }
 
 .tag {
@@ -129,4 +138,8 @@ $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
@@ -15,6 +15,7 @@ type CardProps = {
   posterAspect?: '1:1' | '2:1' | '2:3' | '4:3' | '5:3' | '16:9' | '9:16';
   featured?: boolean;
   disabled?: boolean;
+  loading?: boolean;
 };
 
 function Card({
@@ -27,6 +28,7 @@ function Card({
   posterAspect = '16:9',
   featured = false,
   disabled = false,
+  loading = false,
 }: CardProps): JSX.Element {
   const cardClassName = classNames(styles.card, { [styles.featured]: featured, [styles.disabled]: disabled });
   const posterClassNames = classNames(styles.poster, styles[`aspect${posterAspect.replace(':', '')}`]);
@@ -52,13 +54,13 @@ function Card({
     >
       <div className={posterClassNames} style={{ backgroundImage: posterSource ? `url(${posterSource})` : '' }}>
         <div className={styles.meta}>
-          <div className={styles.title}>{featured ? title : ''}</div>
+          {featured && <div className={classNames(styles.title, { [styles.loading]: loading })}>{title}</div>}
           {metaData()}
         </div>
       </div>
       {!featured && (
         <div className={styles.titleContainer}>
-          <div className={styles.title}>{title}</div>
+          <div className={classNames(styles.title, { [styles.loading]: loading })}>{title}</div>
         </div>
       )}
     </div>

diff --git a/src/components/Shelf/Shelf.module.scss b/src/components/Shelf/Shelf.module.scss
@@ -23,6 +23,12 @@
   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
@@ -59,13 +59,15 @@ const Shelf: React.FC<ShelfProps> = ({
 
   return (
     <div className={classNames(styles.shelf, { [styles.featured]: featured })}>
-      {!featured && <h2 className={styles['title']}>{loading ? '...' : playlist.title}</h2>}
+      {!featured && (
+        <h2 className={classNames(styles.title, { [styles.loading]: loading })}>{loading ? ' ' : playlist.title}</h2>
+      )}
       <TileDock<PlaylistItem | number>
         items={loading ? placeholderItems : playlist.playlist}
         tilesToShow={tilesToShow}
         cycleMode={'restart'}
         showControls={!matchMedia('(hover: none)').matches}
-        transitionTime={loading ? '0s' : '0.3s'}
+        transitionTime={loading ? '0.3s' : '0.3s'}
         spacing={8}
         renderLeftControl={(doSlide) => (
           <div
@@ -99,7 +101,7 @@ const Shelf: React.FC<ShelfProps> = ({
         )}
         renderTile={(item, isInView) => {
           if (loading || typeof item === 'number') {
-            return <Card title={'...'} duration={0} featured={featured} />;
+            return <Card title={' '} duration={0} featured={featured} loading />;
           }
 
           return (