Placeholders en Search

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 (