PLACEHOLDER ALL THE THINGS

src/components/Entity.jsx

@@ -5,6 +5,7 @@ export const Entity = (props) => {
   const hasCover = props.cover;
   const hasTags = props.tags && props.tags.length > 0;
   const hasButton = props.onButtonClick || props.buttonText
+
   return (
     <div className='entity'>
       <div>

src/components/EntityList.jsx

@@ -4,9 +4,9 @@ import "./EntityList.scss"
 
 const EntityPlaceholder = (props) => {
   return (
-      <li className='entity-item pulsating'>
+      <li className={'entity-item ' + (props.cover ? '' : 'pulsating')}>
           <Link to={props.link}>
-            {props.cover && <div className='cover'/>}
+            {props.cover && <div className='cover pulsating'/>}
             <div className='body'>
               <span class='title'>&nbsp;</span>
               <span className='subtitle'>&nbsp;</span>

src/views/Artist.jsx

@@ -17,15 +17,19 @@ const Discs = (props) => {
     props.onPageChanged(page);
   }
 
-  let discsComponent = <Fragment/>;
+  let discsComponent = <EntityList placeholder={true} size={16} cover={true} grid={true}/>;
   if (discs) {
-    const items = discs.map((disc) => ({
+    if(discs.length > 0){
-      'cover': <CoverArt disc={disc}/>,
+      const items = discs.map((disc) => ({
-      'link': `/disc/${disc.id}`,
+        'cover': <CoverArt disc={disc}/>,
-      'title': disc.title,
+        'link': `/disc/${disc.id}`,
-      'subtitle': disc.artist.name
+        'title': disc.title,
-    }));
+        'subtitle': disc.artist.name
-    discsComponent = <EntityList items={items} grid={true}/>
+      }));
+      discsComponent = <EntityList items={items} grid={true}/>
+    }else{
+      discsComponent = <p>El artista no tiene discos</p>
+    }
   }
 
   let paginateContent;
@@ -54,9 +58,9 @@ const Artist = (props) => {
     return <Entity title={artist.name}
       subtitle={[artist.type, artist.country].filter(Boolean).join(' - ')}
       tags={artist.tags.map((tag) => (tag.name))}
-      buttonText='Agregar a mi list'/>
+      buttonText='Agregar a mi lista'/>
   }else {
-    return <Fragment></Fragment>
+    return <Fragment/>
   }
 }
 

src/views/Disc.jsx

@@ -12,7 +12,6 @@ const capitalize = (string) => {
   return string.charAt(0).toUpperCase() + string.slice(1);
 }
 
-
 const Versions = (props) => {
   const versions = props.versions ? props.versions : null;
   const paginate = props.paginate ? props.paginate : null;
@@ -21,7 +20,7 @@ const Versions = (props) => {
     props.onPageChanged(page);
   }
 
-  let versionsComponent = <Fragment/>;
+  let versionsComponent = <EntityList placeholder={true} size={10} cover={true}/>;
   if(versions) {
     const items = versions.map((version) => ({
       'cover': <CoverArt release={version}/>,
@@ -105,9 +104,11 @@ export const DiscView = (props) => {
   return (
     <Fragment>
       <Disc disc={disc}/>
-      <Versions versions={versions} paginate={versionsPaginate}
+      {disc &&
-                onPageChanged={handleVersionPageChanged} makeLink={makeLink}
+        <Versions versions={versions} paginate={versionsPaginate}
-                navigateToVersion={handleNavigateToVersion}/>
+                  onPageChanged={handleVersionPageChanged} makeLink={makeLink}
+                  navigateToVersion={handleNavigateToVersion}/>
+      }
     </Fragment>
   )
 }