title: How to add a skeleton load for generated items
body: <p>I'm working on a slider of items similar to Netflix but with movies, using the info recovered from the tmdb API.</p>
  
  <p>I would like to add a skeleton load for each dynamically generated item using map to improve the user experience.</p>
  
  <p>First of all for the skeleton loading I got a lot of inspiration from this code available on pen code that I adapted afterwards.</p>
  
  <p><a href="https://codepen.io/mxbck/pen/EvmLVp" rel="nofollow noreferrer">https://codepen.io/mxbck/pen/EvmLVp</a></p>
  
  <p>I try a solution first here but it does not work, I voluntarily remove code that did not relate to my problem for clarity:</p>
  
  <p>Slider component </p>
  
  <pre><code>import React, {PureComponent , Component } from "react";
  import style from './Caroussel.css';
  import MovieItem from "../components/MovieItem";
  import MovieItemContainer from '../components/MovieItem/MovieItemContainer';
  
  class Slider extends Component {
  
     constructor(props){
         super(props);
         this.handleOnLeftArrowClick = this.leftArrowClick.bind(this);
         this.handleOnRightArrowClick = this.rightArrowClick.bind(this);
  
         this.state = {
            sliderItems: [],
         }
      }
  
      componentDidMount() {
         this.updateSliderState();
         this.setState({
             totalItems: this.props.movieList.length,
             sliderItem: this.props.movieList
         })
       }
  
      componentWillMount(){
         if(typeof(window) !== 'undefined') {
           $(window).on('resize', this.updateSliderState.bind(this))
         }
      }
  
      render(){
  
          const { sliderItem} = this.state;
  
          const sliderClass = cx ({
              sliderMask:true,
              moving
          })
  
         return(
            &lt;div className="wrapper"&gt;
               &lt;div className={style.slider}&gt;
                  &lt;div className={sliderClass} ref="slider"&gt;
                   {this.state.sliderItem ? 
                       sliderItem.map((element, index) =&gt; (
                           &lt;MovieItemContainer&gt;
                               &lt;MovieItem 
                                   key={index}
                                   title={element.title}
                                   id={element.id}
                                   release_date={element.release_date}
                                   url={element.backdrop_path} 
                                /&gt;
                           &lt;/MovieItemContainer&gt;
                       ))
                       :
                       sliderItem.map((element, index) =&gt; {
                           null
                       })
                    }
  
                  &lt;/div&gt;
                  {
                    click &amp;&amp;
                      &lt;div className={style.leftArrow} ref="leftArrow"&gt;
                          &lt;IosArrowBack onClick{this.handleOnLeftArrowClick} color="black" /&gt;
                      &lt;/div&gt;
                  }
                      &lt;div className={style.rightArrow} ref="rightArrow"&gt;
                          &lt;IosArrowForward onClick={this.handleOnRightArrowClick} color="black" /&gt;
                     &lt;/div&gt;
               &lt;/div&gt;
           &lt;/div&gt;
        );
      }
    }
  
    export default Slider;
  </code></pre>
  
  <p>MovieItem Container component</p>
  
  <pre><code>import React, {Component} from "react";
  import '../../../style/card.scss';
  
  class MovieItemContainer extends React.Component {
     render() {
        return (
           &lt;div className="card"&gt;
               {this.props.children}
          &lt;/div&gt;
        );
     }
   }
  
   export default MovieItemContainer;  
  </code></pre>
  
  <p>MovieItem component </p>
  
  <pre><code> import React from 'react';
   import Moment from 'react-moment';
   import style from './MovieItem.css';
   import {Link} from 'react-router';
  
   const MovieItem  = ({ url, title, release_date, id }) =&gt; {
        let link ='https://image.tmdb.org/t/p/w300/'+url;
  
        const text_truncate = (str, length, ending) =&gt; {
            if (length == null) {
                 length = 100;
            }
            if (ending == null) {
                 ending = '...';
            }
            if (str.length &gt; length) {
                return str.substring(0, length - ending.length) + ending;
            } else {
                return str;
            }
         };
  
         return (
            &lt;div className={style.sliderItem}&gt;
                 &lt;div style={{ borderBottomLeftRadius: 8, borderBottomRightRadius:8 }} className={style.sliderItemInner}&gt;
                  &lt;img style={{ borderRadius: 8 }} className={style.cover} src={link} /&gt;
                  &lt;div className={style.shadow}&gt;&lt;/div&gt;
                      &lt;div className={style.titles}&gt;
                          &lt;span className={style.title}&gt;
                              &lt;Link className={style.title} to={`film/${id}`}&gt;
                                  {text_truncate(title,18)}
                              &lt;/Link&gt;
                          &lt;/span&gt;
                          &lt;span className={style.release_date}&gt;
                              &lt;Moment format="YYYY"&gt;   
                                  {release_date}       
                              &lt;/Moment&gt;
                          &lt;/span&gt; 
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
            )
          }
  
    export default MovieItem;
  </code></pre>
  
  <p>The MovieItem component only makes the item a movie with a background image, the title of the movie and the year of release.</p>
  
  <p>In the example above, the loading is done for only one card, I would just adapt this code for each of the generated items (10 items).</p>
  
  <p>I thank you in advance for your help and your answers.</p>