fix(home): broken home skeleton (#523)

refactor(project): correct loading skeleton in shelf and card refactor(project): shelf title ternary readability refactor(project): revert loading state for scheduled start date Co-authored-by: Roy Schut <roy@videodock.com>
jwplayer · May 6, 2024 · 35cd2db · 35cd2db
1 parent 1ce7c5b
commit 35cd2db
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 6 deletions.
diff --git a/packages/hooks-react/src/usePlaylists.ts b/packages/hooks-react/src/usePlaylists.ts
@@ -14,9 +14,9 @@ const placeholderData = generatePlaylistPlaceholder(30);
 
 type UsePlaylistResult = {
   data: Playlist | undefined;
-  isLoading: boolean;
   isSuccess?: boolean;
   error?: unknown;
+  isPlaceholderData?: boolean;
 }[];
 
 const usePlaylists = (content: Content[], rowsToLoad: number | undefined = undefined) => {
@@ -57,13 +57,13 @@ const usePlaylists = (content: Content[], rowsToLoad: number | undefined = undef
     if (type === PersonalShelf.Favorites) return { data: favorites, isLoading: false, isSuccess: true };
     if (type === PersonalShelf.ContinueWatching) return { data: watchHistory, isLoading: false, isSuccess: true };
 
-    const { data, isLoading, isSuccess, error } = playlistQueries[index];
+    const { data, isSuccess, error, isPlaceholderData } = playlistQueries[index];
 
     return {
       data,
-      isLoading,
       isSuccess,
       error,
+      isPlaceholderData,
     };
   });
 

diff --git a/packages/ui-react/src/components/Shelf/Shelf.module.scss b/packages/ui-react/src/components/Shelf/Shelf.module.scss
@@ -1,3 +1,5 @@
+@use '@jwp/ott-ui-react/src/styles/theme';
+
 .shelf {
   margin: 0 0;
   color: var(--primary-color);
@@ -15,6 +17,14 @@
   }
 }
 
+.loadingTitle {
+  width: 35%;
+  min-height: 28px;
+  margin-bottom: 12px;
+  background-color: theme.$card-loading-bg-color;
+  border-radius: 5px;
+};
+
 .title {
   width: 100%;
   min-height: 28px;

diff --git a/packages/ui-react/src/components/Shelf/Shelf.tsx b/packages/ui-react/src/components/Shelf/Shelf.tsx
@@ -146,7 +146,7 @@ const Shelf = ({
 
   return (
     <div className={classNames(styles.shelf)}>
-      {!featured ? <h2 className={classNames(styles.title)}>{title || playlist.title}</h2> : null}
+      {featured ? null : loading ? <div className={styles.loadingTitle} /> : <h2 className={classNames(styles.title)}>{title || playlist.title}</h2>}
       <TileDock<PlaylistItem>
         items={playlist.playlist}
         tilesToShow={tilesToShow}

diff --git a/packages/ui-react/src/containers/ShelfList/ShelfList.tsx b/packages/ui-react/src/containers/ShelfList/ShelfList.tsx
@@ -61,7 +61,7 @@ const ShelfList = ({ rows }: Props) => {
         loader={<InfiniteScrollLoader key="loader" />}
       >
         {rows.slice(0, rowsToLoad).map(({ type, featured, title }, index) => {
-          const { data: playlist, isLoading, error } = playlists[index];
+          const { data: playlist, isPlaceholderData, error } = playlists[index];
 
           if (!playlist?.playlist?.length) return null;
 
@@ -76,7 +76,7 @@ const ShelfList = ({ rows }: Props) => {
               aria-label={title || playlist?.title}
             >
               <Shelf
-                loading={isLoading}
+                loading={isPlaceholderData}
                 error={error}
                 type={type}
                 playlist={playlist}