From a7cbb5963af8f6035a60edd318de2e7d91e18f04 Mon Sep 17 00:00:00 2001
From: Dylan Audius <dylan@audius.co>
Date: Fri, 29 May 2026 13:36:02 -0700
Subject: [PATCH] fix(playlist): show image icon placeholder in Create Playlist
 artwork
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The Create Playlist modal's artwork picker rendered a gray box with a
blank PNG placeholder over it, which read as a perpetual loading
skeleton even though no artwork has ever been associated yet. Add an
optional `iconPlaceholder` prop to `UploadArtwork` and pass `IconImage`
from `CreatePlaylistModal` so the empty state shows a clear "add
artwork" affordance. Scoped to create — the edit flow (where artwork
may still be loading) is unchanged.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../create-playlist-modal/CreatePlaylistModal.tsx        | 2 ++
 packages/web/src/components/upload/UploadArtwork.d.ts    | 4 ++++
 packages/web/src/components/upload/UploadArtwork.jsx     | 8 ++++++--
 .../web/src/components/upload/UploadArtwork.module.css   | 9 +++++++++
 4 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/packages/web/src/components/create-playlist-modal/CreatePlaylistModal.tsx b/packages/web/src/components/create-playlist-modal/CreatePlaylistModal.tsx
index c9660f37eb7..3832744bde8 100644
--- a/packages/web/src/components/create-playlist-modal/CreatePlaylistModal.tsx
+++ b/packages/web/src/components/create-playlist-modal/CreatePlaylistModal.tsx
@@ -9,6 +9,7 @@ import { getErrorMessage } from '@audius/common/utils'
 import {
   Button,
   Flex,
+  IconImage,
   IconPlaylists,
   Modal,
   ModalContent,
@@ -149,6 +150,7 @@ export const CreatePlaylistModal = () => {
               imageProcessingError={imageProcessingError}
               size='small'
               isUpload
+              iconPlaceholder={<IconImage size='4xl' color='subdued' />}
             />
           </Flex>
           <TextInput
diff --git a/packages/web/src/components/upload/UploadArtwork.d.ts b/packages/web/src/components/upload/UploadArtwork.d.ts
index adf4b24f2f4..9aa6ff83f11 100644
--- a/packages/web/src/components/upload/UploadArtwork.d.ts
+++ b/packages/web/src/components/upload/UploadArtwork.d.ts
@@ -1,3 +1,5 @@
+import { ReactNode } from 'react'
+
 export type UploadArtworkProps = {
   className?: string
   artworkUrl?: string
@@ -12,6 +14,8 @@ export type UploadArtworkProps = {
   isImageAutogenerated?: boolean
   size: 'small' | 'large'
   isUpload?: boolean
+  /** Rendered centered over the gray empty state when no artwork is set. */
+  iconPlaceholder?: ReactNode
 }
 
 declare const UploadArtwork = (props: UploadArtworkProps) => JSX.Element
diff --git a/packages/web/src/components/upload/UploadArtwork.jsx b/packages/web/src/components/upload/UploadArtwork.jsx
index 02d49f5a161..641044ff9e7 100644
--- a/packages/web/src/components/upload/UploadArtwork.jsx
+++ b/packages/web/src/components/upload/UploadArtwork.jsx
@@ -21,7 +21,8 @@ const UploadArtwork = ({
   onRemoveArtwork,
   defaultPopupOpen = false,
   isImageAutogenerated = false,
-  isUpload = false
+  isUpload = false,
+  iconPlaceholder
 }) => {
   const [processing, setProcessing] = useState(false)
   const [showTip, setShowTip] = useState(false)
@@ -63,11 +64,14 @@ const UploadArtwork = ({
         className={styles.artworkWrapper}
         style={{
           backgroundImage: `url(${
-            artworkUrl || (processing ? '' : placeholderArt)
+            artworkUrl || (processing || iconPlaceholder ? '' : placeholderArt)
           })`
         }}
       >
         {processing ? <LoadingSpinner className={styles.overlay} /> : null}
+        {!artworkUrl && !processing && iconPlaceholder ? (
+          <div className={styles.iconPlaceholder}>{iconPlaceholder}</div>
+        ) : null}
       </div>
       <div className={styles.button}>
         <Toast
diff --git a/packages/web/src/components/upload/UploadArtwork.module.css b/packages/web/src/components/upload/UploadArtwork.module.css
index 3f7bbc9f481..fa51158b9db 100644
--- a/packages/web/src/components/upload/UploadArtwork.module.css
+++ b/packages/web/src/components/upload/UploadArtwork.module.css
@@ -53,3 +53,12 @@
 .overlay > div {
   width: 56px !important;
 }
+
+.iconPlaceholder {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+}