From 35cd2db26ed3ffee65a6e2edf38447bce7957c7f Mon Sep 17 00:00:00 2001
From: Melissa Hart <48496458+MelissaDTH@users.noreply.github.com>
Date: Mon, 6 May 2024 15:31:58 +0200
Subject: [PATCH] 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>
---
 packages/hooks-react/src/usePlaylists.ts               |  6 +++---
 .../ui-react/src/components/Shelf/Shelf.module.scss    | 10 ++++++++++
 packages/ui-react/src/components/Shelf/Shelf.tsx       |  2 +-
 .../ui-react/src/containers/ShelfList/ShelfList.tsx    |  4 ++--
 4 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/packages/hooks-react/src/usePlaylists.ts b/packages/hooks-react/src/usePlaylists.ts
index c430e816f..b67945f46 100644
--- 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
index 5a3473242..f78541588 100644
--- 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
index eb89179b4..e1d05a5c2 100644
--- 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
index ec67216bd..7fe085f82 100644
--- 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}