Agregada vista de artista

src/components/CoverArt.jsx

@@ -0,0 +1,33 @@
+import React, {Fragment, useState} from "react";
+import {ReactComponent as DiscSVG} from "../svg/disc.svg";
+
+export const CoverArt = (props) => {
+    const [loading, setLoading] = useState(true);
+
+    const handleLoad = () => setLoading(false)
+
+    if (props.cover_art) {
+        if (loading) {
+            return (
+                <Fragment>
+                    <img src={props.cover_art.image} className={'coverart loading'} alt={props.alt} onLoad={handleLoad}/>
+                    <div class={'coverart pulsating'}/>
+                </Fragment>
+            )
+        } else {
+            return <img src={props.cover_art.image} className={'coverart'} alt={props.alt}/>
+        }
+    } else {
+        return <DiscSVG className='coverart'/>
+    }
+}
+
+
+export const CoverWithCaption = (props) => {
+   return(
+       <figure className='cover-caption'>
+           <CoverArt cover_art={props.cover_art} alt={props.alt}/>
+           <figcaption>{props.caption}</figcaption>
+       </figure>
+   );
+}