[PAY-2786] Clean up skeletons for collection page (#8427)

AudiusProject · May 10, 2024 · 7e25f1d · 7e25f1d
1 parent abc2def
commit 7e25f1d
Show file tree

Hide file tree

Showing 3 changed files with 101 additions and 96 deletions.
diff --git a/packages/web/src/components/collection/desktop/CollectionHeader.tsx b/packages/web/src/components/collection/desktop/CollectionHeader.tsx
@@ -100,7 +100,6 @@ export const CollectionHeader = (props: CollectionHeaderProps) => {
     type,
     title,
     coverArtSizes,
-    artistName,
     description,
     isOwner,
     releaseDate,
@@ -161,7 +160,7 @@ export const CollectionHeader = (props: CollectionHeaderProps) => {
   }, [onOpen, collectionId])
 
   const renderStatsRow = (isLoading: boolean) => {
-    if (isLoading) return null
+    if (isLoading) return <Skeleton height='20px' width='120px' />
     return (
       <RepostsFavoritesStats
         isUnlisted={false}
@@ -175,45 +174,46 @@ export const CollectionHeader = (props: CollectionHeaderProps) => {
 
   const isLoading = !isSsrEnabled && (loading || artworkLoading)
 
-  const fadeIn = {
-    [styles.show]: !isLoading,
-    [styles.hide]: isLoading
-  }
-
   const isPremium =
     isStreamGated && isContentUSDCPurchaseGated(streamConditions)
 
   const topSection = (
     <Flex gap='xl' p='l' backgroundColor='white'>
-      {coverArtSizes || gradient || icon ? (
-        <Artwork
-          collectionId={collectionId}
-          coverArtSizes={coverArtSizes}
-          callback={handleLoadArtwork}
-          gradient={gradient}
-          icon={icon}
-          imageOverride={imageOverride}
-          isOwner={isOwner}
-        />
-      ) : null}
-      <Flex direction='column' justifyContent='space-between'>
+      <Artwork
+        collectionId={collectionId}
+        coverArtSizes={coverArtSizes}
+        callback={handleLoadArtwork}
+        gradient={gradient}
+        icon={icon}
+        imageOverride={imageOverride}
+        isOwner={isOwner}
+      />
+      <Flex
+        direction='column'
+        justifyContent='space-between'
+        css={{ minWidth: 400 }}
+      >
         <Flex direction='column' gap='xl'>
-          <Flex className={cn(fadeIn)} gap='s' mt='s' alignItems='center'>
-            {!isPublished ? (
-              <IconVisibilityHidden color='subdued' aria-label='hidden' />
-            ) : null}
-            {isPremium ? <IconCart size='s' color='subdued' /> : null}
-            <Text
-              variant='label'
-              color='subdued'
-              css={{ letterSpacing: '2px' }}
-            >
-              {isPremium ? `${messages.premiumLabel} ` : ''}
-              {type === 'playlist' && !isPublished
-                ? messages.hiddenPlaylistLabel
-                : type}
-            </Text>
-          </Flex>
+          {isLoading ? (
+            <Skeleton height='24px' width='200px' />
+          ) : (
+            <Flex gap='s' mt='s' alignItems='center'>
+              {!isPublished ? (
+                <IconVisibilityHidden color='subdued' aria-label='hidden' />
+              ) : null}
+              {isPremium ? <IconCart size='s' color='subdued' /> : null}
+              <Text
+                variant='label'
+                color='subdued'
+                css={{ letterSpacing: '2px' }}
+              >
+                {isPremium ? `${messages.premiumLabel} ` : ''}
+                {type === 'playlist' && !isPublished
+                  ? messages.hiddenPlaylistLabel
+                  : type}
+              </Text>
+            </Flex>
+          )}
           <Flex direction='column' gap='s'>
             <Flex
               as={isOwner ? 'button' : 'span'}
@@ -225,57 +225,57 @@ export const CollectionHeader = (props: CollectionHeaderProps) => {
               })}
               onClick={isOwner ? handleClickEditTitle : undefined}
             >
-              <Text
-                variant='heading'
-                size='xl'
-                className={cn(styles.titleHeader, fadeIn)}
-                textAlign='left'
-              >
-                {title}
-              </Text>
-              <ClientOnly>
-                {isOwner ? (
-                  <IconPencil className={styles.editIcon} color='subdued' />
-                ) : null}
-              </ClientOnly>
               {isLoading ? (
-                <Skeleton css={{ position: 'absolute', top: 0 }} />
-              ) : null}
+                <Skeleton height='48px' width='300px' />
+              ) : (
+                <>
+                  <Text
+                    variant='heading'
+                    size='xl'
+                    className={cn(styles.titleHeader)}
+                    textAlign='left'
+                  >
+                    {title}
+                  </Text>
+                  <ClientOnly>
+                    {!isLoading && isOwner ? (
+                      <IconPencil className={styles.editIcon} color='subdued' />
+                    ) : null}
+                  </ClientOnly>
+                </>
+              )}
             </Flex>
-            {artistName ? (
-              <Text
-                variant='title'
-                strength='weak'
-                tag='h2'
-                className={cn(fadeIn)}
-                textAlign='left'
-              >
+            {isLoading ? (
+              <Skeleton height='24px' width='150px' />
+            ) : (
+              <Text variant='title' strength='weak' tag='h2' textAlign='left'>
                 <Text color='subdued'>{messages.by}</Text>
                 {userId !== null ? (
                   <UserLink userId={userId} popover variant='visible' />
                 ) : null}
               </Text>
-            ) : null}
+            )}
           </Flex>
-          {isLoading ? (
-            <Skeleton css={{ position: 'absolute', top: 0 }} width='60%' />
-          ) : null}
           <div>{renderStatsRow(isLoading)}</div>
         </Flex>
         <ClientOnly>
-          <CollectionActionButtons
-            variant={variant}
-            userId={userId}
-            collectionId={collectionId}
-            isPlayable={isPlayable}
-            isPlaying={playing}
-            isPreviewing={previewing}
-            isPremium={isPremium}
-            isOwner={isOwner}
-            tracksLoading={tracksLoading}
-            onPlay={onPlay}
-            onPreview={onPreview}
-          />
+          {isLoading ? (
+            <Skeleton height='64px' width='100%' />
+          ) : (
+            <CollectionActionButtons
+              variant={variant}
+              userId={userId}
+              collectionId={collectionId}
+              isPlayable={isPlayable}
+              isPlaying={playing}
+              isPreviewing={previewing}
+              isPremium={isPremium}
+              isOwner={isOwner}
+              tracksLoading={tracksLoading}
+              onPlay={onPlay}
+              onPreview={onPreview}
+            />
+          )}
         </ClientOnly>
       </Flex>
       {onFilterChange ? (
@@ -327,28 +327,31 @@ export const CollectionHeader = (props: CollectionHeaderProps) => {
         />
       ) : null}
 
-      <Flex className={cn(fadeIn)} gap='l' direction='column'>
-        {description ? (
-          <UserGeneratedText
-            size='s'
-            className={cn(fadeIn)}
-            linkSource='collection page'
-            css={{ textAlign: 'left' }}
-          >
-            {description}
-          </UserGeneratedText>
-        ) : null}
-        <AlbumDetailsText
-          duration={duration}
-          lastModifiedDate={lastModifiedDate}
-          numTracks={numTracks}
-          releaseDate={releaseDate}
-        />
-      </Flex>
+      {isLoading ? (
+        <Skeleton height='40px' width='100%' />
+      ) : (
+        <Flex gap='l' direction='column'>
+          {description ? (
+            <UserGeneratedText
+              size='s'
+              linkSource='collection page'
+              css={{ textAlign: 'left' }}
+            >
+              {description}
+            </UserGeneratedText>
+          ) : null}
+          <AlbumDetailsText
+            duration={duration}
+            lastModifiedDate={lastModifiedDate}
+            numTracks={numTracks}
+            releaseDate={releaseDate}
+          />
+        </Flex>
+      )}
     </Flex>
   )
   return (
-    <Flex direction='column'>
+    <Flex direction='column' h='100%'>
       {topSection}
       {descriptionSection}
     </Flex>

diff --git a/packages/web/src/components/tracks-table/TracksTable.tsx b/packages/web/src/components/tracks-table/TracksTable.tsx
@@ -460,6 +460,7 @@ export const TracksTable = ({
     },
     [
       trackAccessMap,
+      shouldShowGatedType,
       disabledTrackEdit,
       isAlbumPage,
       onClickRemove,

diff --git a/packages/web/src/pages/collection-page/components/desktop/CollectionPage.tsx b/packages/web/src/pages/collection-page/components/desktop/CollectionPage.tsx
@@ -150,7 +150,8 @@ const CollectionPage = ({
   const collectionLoading = status === Status.LOADING
   const queuedAndPlaying = playing && isQueued()
   const queuedAndPreviewing = previewing && isQueued()
-  const tracksLoading = tracks.status === Status.LOADING
+  const tracksLoading =
+    tracks.status === Status.LOADING || tracks.status === Status.IDLE
 
   const coverArtSizes =
     metadata && metadata?.variant !== Variant.SMART
@@ -370,7 +371,7 @@ const CollectionPage = ({
         )}
       </Tile>
       <ClientOnly>
-        {isOwner && !isAlbum && !isNftPlaylist ? (
+        {!collectionLoading && isOwner && !isAlbum && !isNftPlaylist ? (
           <>
             <Divider variant='default' className={styles.tileDivider} />
             <SuggestedTracks collectionId={playlistId} />