fix(playlist): show image icon placeholder in Create Playlist artwork (#14425)

Author: dylanjeffers

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

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

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

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;
+}