feat: fade covers in once they load

web/src/shared/ui/artwork.tsx

@@ -3,10 +3,11 @@ import { useState } from 'react'
 
 export function Artwork({ src, title, className = '' }: { src?: string, title: string, className?: string }) {
   const [failedSrc, setFailedSrc] = useState<string>()
+  const [loadedSrc, setLoadedSrc] = useState<string>()
   return (
     <div className={`artwork ${className}`}>
       {src && src !== failedSrc
-        ? <img src={src} alt={title} loading="lazy" decoding="async" onError={() => setFailedSrc(src)} />
+        ? <img src={src} alt={title} loading="lazy" decoding="async" data-loaded={src === loadedSrc || undefined} onLoad={() => setLoadedSrc(src)} onError={() => setFailedSrc(src)} />
         : <Music2 size={40} strokeWidth={1.2} aria-hidden="true" />}
     </div>
   )

web/src/shared/ui/ui.css

@@ -33,7 +33,8 @@
 .skeleton-row > div > span { display: block; width: 55%; height: 12px; border-radius: 4px; background: var(--color-surface-hover); }
 .skeleton-row > div > span + span { width: 35%; height: 10px; margin-top: 10px; background: var(--color-surface); }
 .artwork { flex-shrink: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--color-surface); color: var(--color-foreground-subtlest); border-radius: 8px; aspect-ratio: 1; }
-.artwork img { width: 100%; height: 100%; object-fit: cover; }
+.artwork img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 240ms ease; }
+.artwork img[data-loaded] { opacity: 1; }
 .avatar { display: inline-grid; place-items: center; flex-shrink: 0; width: 32px; aspect-ratio: 1; overflow: hidden; border-radius: 50%; background: var(--color-accent); color: var(--color-brand); font-weight: 600; line-height: 1; }
 .avatar img { width: 100%; height: 100%; object-fit: cover; }
 .song-artwork { display: block; position: relative; flex-shrink: 0; border-radius: 8px; }