From 8faab62fda5bc4095f77d56b766137310b4dbace Mon Sep 17 00:00:00 2001
From: amendelsohn <andrew.j.mendelsohn@gmail.com>
Date: Thu, 9 May 2024 16:58:34 -0700
Subject: [PATCH 1/3] clean up skeletons for collection page

---
 .../collection/desktop/CollectionHeader.tsx   | 181 ++++++++++--------
 .../components/tracks-table/TracksTable.tsx   |   1 +
 .../components/desktop/CollectionPage.tsx     |  21 +-
 3 files changed, 119 insertions(+), 84 deletions(-)

diff --git a/packages/web/src/components/collection/desktop/CollectionHeader.tsx b/packages/web/src/components/collection/desktop/CollectionHeader.tsx
index 702e6660318..99b4c400820 100644
--- 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}
@@ -174,6 +173,8 @@ export const CollectionHeader = (props: CollectionHeaderProps) => {
   }
 
   const isLoading = !isSsrEnabled && (loading || artworkLoading)
+  // const isLoading = true
+  // const title = null
 
   const fadeIn = {
     [styles.show]: !isLoading,
@@ -185,35 +186,41 @@ export const CollectionHeader = (props: CollectionHeaderProps) => {
 
   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 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>
+          )}
           <Flex direction='column' gap='s'>
             <Flex
               as={isOwner ? 'button' : 'span'}
@@ -225,24 +232,29 @@ 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, fadeIn)}
+                    textAlign='left'
+                  >
+                    {title}
+                  </Text>
+                  <ClientOnly>
+                    {!isLoading && isOwner ? (
+                      <IconPencil className={styles.editIcon} color='subdued' />
+                    ) : null}
+                  </ClientOnly>
+                </>
+              )}
             </Flex>
-            {artistName ? (
+            {isLoading ? (
+              <Skeleton height='24px' width='150px' />
+            ) : (
               <Text
                 variant='title'
                 strength='weak'
@@ -255,27 +267,28 @@ export const CollectionHeader = (props: CollectionHeaderProps) => {
                   <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 +340,32 @@ 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 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>
+      )}
     </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
index 7972a60d205..20aaa65982d 100644
--- 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
index 90fe31de292..445ce94b8d9 100644
--- a/packages/web/src/pages/collection-page/components/desktop/CollectionPage.tsx
+++ b/packages/web/src/pages/collection-page/components/desktop/CollectionPage.tsx
@@ -136,6 +136,22 @@ const CollectionPage = ({
   onClickReposts,
   onClickFavorites
 }: CollectionPageProps) => {
+  // DEBUG:
+  // const title = null
+  // const pageDescription = null
+  // const canonicalUrl = null
+  // const structuredData = null
+  // const playlistId = null
+  // const allowReordering = null
+  // const playing = null
+  // const previewing = null
+  // const type = null
+  // const tracks = { status: Status.LOADING, entries: [] }
+  // const userId = null
+  // const status = Status.LOADING
+  // const metadata = null
+  // const user = null
+
   const { status, metadata, user } = collection
   const { isEnabled: isEditAlbumsEnabled } = useFlag(FeatureFlags.EDIT_ALBUMS)
   const { isEnabled: isPremiumAlbumsEnabled } = useFlag(
@@ -150,7 +166,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 +387,7 @@ const CollectionPage = ({
         )}
       </Tile>
       <ClientOnly>
-        {isOwner && !isAlbum && !isNftPlaylist ? (
+        {!collectionLoading && isOwner && !isAlbum && !isNftPlaylist ? (
           <>
             <Divider variant='default' className={styles.tileDivider} />
             <SuggestedTracks collectionId={playlistId} />

From e3bbbedb8e73adeae0fcb3e1ef442e9774d74119 Mon Sep 17 00:00:00 2001
From: amendelsohn <andrew.j.mendelsohn@gmail.com>
Date: Thu, 9 May 2024 17:02:43 -0700
Subject: [PATCH 2/3] remove fade in style

---
 .../collection/desktop/CollectionHeader.tsx   | 22 ++++---------------
 1 file changed, 4 insertions(+), 18 deletions(-)

diff --git a/packages/web/src/components/collection/desktop/CollectionHeader.tsx b/packages/web/src/components/collection/desktop/CollectionHeader.tsx
index 99b4c400820..5c9e74c0503 100644
--- a/packages/web/src/components/collection/desktop/CollectionHeader.tsx
+++ b/packages/web/src/components/collection/desktop/CollectionHeader.tsx
@@ -173,13 +173,6 @@ export const CollectionHeader = (props: CollectionHeaderProps) => {
   }
 
   const isLoading = !isSsrEnabled && (loading || artworkLoading)
-  // const isLoading = true
-  // const title = null
-
-  const fadeIn = {
-    [styles.show]: !isLoading,
-    [styles.hide]: isLoading
-  }
 
   const isPremium =
     isStreamGated && isContentUSDCPurchaseGated(streamConditions)
@@ -204,7 +197,7 @@ export const CollectionHeader = (props: CollectionHeaderProps) => {
           {isLoading ? (
             <Skeleton height='24px' width='200px' />
           ) : (
-            <Flex className={cn(fadeIn)} gap='s' mt='s' alignItems='center'>
+            <Flex gap='s' mt='s' alignItems='center'>
               {!isPublished ? (
                 <IconVisibilityHidden color='subdued' aria-label='hidden' />
               ) : null}
@@ -239,7 +232,7 @@ export const CollectionHeader = (props: CollectionHeaderProps) => {
                   <Text
                     variant='heading'
                     size='xl'
-                    className={cn(styles.titleHeader, fadeIn)}
+                    className={cn(styles.titleHeader)}
                     textAlign='left'
                   >
                     {title}
@@ -255,13 +248,7 @@ export const CollectionHeader = (props: CollectionHeaderProps) => {
             {isLoading ? (
               <Skeleton height='24px' width='150px' />
             ) : (
-              <Text
-                variant='title'
-                strength='weak'
-                tag='h2'
-                className={cn(fadeIn)}
-                textAlign='left'
-              >
+              <Text variant='title' strength='weak' tag='h2' textAlign='left'>
                 <Text color='subdued'>{messages.by}</Text>
                 {userId !== null ? (
                   <UserLink userId={userId} popover variant='visible' />
@@ -343,11 +330,10 @@ export const CollectionHeader = (props: CollectionHeaderProps) => {
       {isLoading ? (
         <Skeleton height='40px' width='100%' />
       ) : (
-        <Flex className={cn(fadeIn)} gap='l' direction='column'>
+        <Flex gap='l' direction='column'>
           {description ? (
             <UserGeneratedText
               size='s'
-              className={cn(fadeIn)}
               linkSource='collection page'
               css={{ textAlign: 'left' }}
             >

From 76622092673c8455d807ae88741547b1cefc3f93 Mon Sep 17 00:00:00 2001
From: amendelsohn <andrew.j.mendelsohn@gmail.com>
Date: Thu, 9 May 2024 17:04:37 -0700
Subject: [PATCH 3/3] remove debug code

---
 .../components/desktop/CollectionPage.tsx        | 16 ----------------
 1 file changed, 16 deletions(-)

diff --git a/packages/web/src/pages/collection-page/components/desktop/CollectionPage.tsx b/packages/web/src/pages/collection-page/components/desktop/CollectionPage.tsx
index 445ce94b8d9..92dd35b10da 100644
--- a/packages/web/src/pages/collection-page/components/desktop/CollectionPage.tsx
+++ b/packages/web/src/pages/collection-page/components/desktop/CollectionPage.tsx
@@ -136,22 +136,6 @@ const CollectionPage = ({
   onClickReposts,
   onClickFavorites
 }: CollectionPageProps) => {
-  // DEBUG:
-  // const title = null
-  // const pageDescription = null
-  // const canonicalUrl = null
-  // const structuredData = null
-  // const playlistId = null
-  // const allowReordering = null
-  // const playing = null
-  // const previewing = null
-  // const type = null
-  // const tracks = { status: Status.LOADING, entries: [] }
-  // const userId = null
-  // const status = Status.LOADING
-  // const metadata = null
-  // const user = null
-
   const { status, metadata, user } = collection
   const { isEnabled: isEditAlbumsEnabled } = useFlag(FeatureFlags.EDIT_ALBUMS)
   const { isEnabled: isPremiumAlbumsEnabled } = useFlag(