Placeholder mientras coverart carga

src/components/Search.jsx

@@ -9,6 +9,37 @@ import {Tab, TabList, TabPanel, Tabs} from "react-tabs";
 
 import {ReactComponent as DiscSVG} from "../svg/disc.svg";
 
+class CoverArt extends React.Component  {
+    constructor(props) {
+       super(props);
+       this.state = {
+           loading: true
+       }
+    }
+
+    handleLoad = () => {
+        this.setState({loading: false})
+    };
+
+    render() {
+        if(this.props.cover_art){
+            if(this.state.loading){
+                return (
+                    <Fragment>
+                        <img src={this.props.cover_art.image} className={'coverart loading'} alt={this.props.alt} onLoad={this.handleLoad}/>
+                        <DiscSVG className='coverart'/>
+                    </Fragment>
+                )
+            }else {
+                return <img src={this.props.cover_art.image} className={'coverart'} alt={this.props.alt}/>
+            }
+        } else {
+            return <DiscSVG className='coverart'/>
+        }
+    }
+}
+
+
 const SearchPlaceholder = (props) => {
     const className = props.className + ' pulsating';
     return (
@@ -111,7 +142,7 @@ class SearchDisc extends React.Component {
         return (
             <li className='disc'>
                 <Link to={`/disc/${disc.id}`}>
-                    {disc.cover_art ? <img src={disc.cover_art.image} className='coverart' alt={`Cover del disco: ${disc.title}`}/> : <DiscSVG className='coverart'/>}
+                    <CoverArt cover_art={disc.cover_art} alt={`Cover del disco: ${disc.title}`}/>
                     <div class='description'>
                         <span>{disc.title} {disc.date && this.getReleaseYear(disc.date)}</span>
                         <span className='small'>{disc.artist[0].name}</span>

src/styles/main.scss

@@ -175,7 +175,11 @@ ul.entity_list {
         width: 200px;
         height: 200px;
         margin: 1rem;
-        border: 1px solid var(--gray-2)
+        border: 1px solid var(--gray-2);
+
+        &.loading {
+          display: none;
+        }
       }
 
       .release-date {