From 049f7e83d7fa1b8cce6821beb81fde4cd9dadc2a Mon Sep 17 00:00:00 2001
From: Daniel Cortes <daniel.cortes.p159@gmail.com>
Date: Tue, 16 Jun 2020 03:05:53 -0400
Subject: [PATCH] Placeholders en Search

---
 src/components/EntityList.jsx | 25 ++++++++++++++++++++++++-
 src/views/Search.jsx          |  6 +++---
 2 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/src/components/EntityList.jsx b/src/components/EntityList.jsx
index e122eb6..3002f4e 100644
--- a/src/components/EntityList.jsx
+++ b/src/components/EntityList.jsx
@@ -2,6 +2,20 @@ import React from "react";
 import {Link} from "react-router-dom";
 import "./EntityList.scss"
 
+const EntityPlaceholder = (props) => {
+  return (
+      <li className='entity-item pulsating'>
+          <Link to={props.link}>
+            {props.cover && <div className='cover'/>}
+            <div className='body'>
+              <span class='title'>&nbsp;</span>
+              <span className='subtitle'>&nbsp;</span>
+            </div>
+          </Link>
+      </li>
+  )
+}
+
 const EntityItem = (props) => {
   return (
       <li className='entity-item'>
@@ -21,8 +35,17 @@ const EntityItem = (props) => {
 }
 
 export const EntityList = (props) => {
-  const entities = props.items.map(item => <EntityItem cover={item.cover} link={item.link}
+  let entities;
+
+  if(props.placeholder){
+    entities = [];
+    for(const i of Array(props.size).keys()){
+      entities.push(<EntityPlaceholder key={i} cover={props.cover}/>)
+    }
+  }else{
+    entities = props.items.map(item => <EntityItem cover={item.cover} link={item.link}
                                                    title={item.title} subtitle={item.subtitle}/>);
+ }
 
   const className = props.grid ? "grid" : "column";
   return (
diff --git a/src/views/Search.jsx b/src/views/Search.jsx
index 71721e2..47be901 100644
--- a/src/views/Search.jsx
+++ b/src/views/Search.jsx
@@ -39,7 +39,7 @@ const SearchSongs = (props) => {
     };
 
 
-    let songsComponent = <Fragment/>;
+    let songsComponent = <EntityList placeholder={true} size={10}/>;
     if (songs) {
         const items = songs.map((song) => {
           return {
@@ -99,7 +99,7 @@ const SearchDiscs = (props) => {
         })
     };
 
-    let discsComponent = <Fragment/>;
+    let discsComponent = <EntityList placeholder={true} size={10} cover={true}/>;
     if (discs) {
         const items = discs.map((disc) => ({
           'cover': <CoverArt disc={disc}/>,
@@ -157,7 +157,7 @@ const SearchArtists = (props) => {
         })
     };
 
-    let artistsContent = <Fragment/>;
+    let artistsContent = <EntityList placeholder={true} size={10}/>;
     if (artists) {
         const items = artists.map((artist) => ({
           'cover': null,