diff --git a/src/components/Search.jsx b/src/components/Search.jsx index aea23f5..7420023 100644 --- a/src/components/Search.jsx +++ b/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 ( + + {this.props.alt} + + + ) + }else { + return {this.props.alt}/ + } + } else { + return + } + } +} + + const SearchPlaceholder = (props) => { const className = props.className + ' pulsating'; return ( @@ -111,7 +142,7 @@ class SearchDisc extends React.Component { return (
  • - {disc.cover_art ? {`Cover : } +
    {disc.title} {disc.date && this.getReleaseYear(disc.date)} {disc.artist[0].name} diff --git a/src/styles/main.scss b/src/styles/main.scss index cd8af3f..a0833b6 100644 --- a/src/styles/main.scss +++ b/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 {