title: Rendering Placeholder Items on React Components While Loading from Server
body: <p>I am working on a MERN application where people can add user created content. I have incorporated a basic loading functionality to give the user feedback when fetching data from the server. However I am hoping for some improvements for better performance and reducing loading times.</p>
  
  <p>My current approach:</p>
  
  <p>As an example I will explain my PostComponent which will request user created posts from the database through a dispatched redux action (getPosts). The posts are rendered in a child component PostFeed and subsequently mapped into individual PostItem components. </p>
  
  <pre><code>import React, { Component } from 'react';
  import PropTypes from 'prop-types';
  import { connect } from 'react-redux';
  import PostForm from './PostForm';
  import PostFeed from './PostFeed';
  import Spinner from '../common/Spinner';
  import { getPosts } from '../../actions/postActions';
  
  class Posts extends Component {
    componentDidMount() {
      this.props.getPosts();
    }
  
    render() {
      const { posts, loading } = this.props.post;
      let postContent;
  
      if (posts === null || loading) {
        postContent = &lt;Spinner /&gt;;
      } else {
        postContent = &lt;PostFeed posts={posts} /&gt;;
      }
  
      return (
        &lt;div className="feed"&gt;
          &lt;div className="container"&gt;
            &lt;div className="row"&gt;
              &lt;div className="col-md-12"&gt;
                &lt;PostForm /&gt;
                {postContent}
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  Posts.propTypes = {
    getPosts: PropTypes.func.isRequired,
    post: PropTypes.object.isRequired
  };
  
  const mapStateToProps = state =&gt; ({
    post: state.post,
  });
  
  export default connect(mapStateToProps, { getPosts })(Posts);
  </code></pre>
  
  <p>Before the posts are loaded, I am setting a boolean loading to <code>true</code>. After getting all the posts, loading is set to <code>false</code> again. The <code>if</code> statement in the component above is rendering a spinner which is a .gif file or the PostFeed component depending on the state of the loading boolean.   </p>
  
  <p>postActions:</p>
  
  <pre><code>...
  export const setPostLoading = () =&gt; {
    return {
      type: POST_LOADING,
    };
  };
  
  export const getPosts = () =&gt; (dispatch) =&gt; {
    dispatch(setPostLoading());
    axios
      .get('/api/posts')
      .then(res =&gt; dispatch({
        type: GET_POSTS,
        payload: res.data,
      }))
      .catch(err =&gt; dispatch({
        type: GET_POSTS,
        payload: null,
      }));
  };
  ...
  </code></pre>
  
  <p>postReducer:</p>
  
  <pre><code>...
  export default function (state = initialState, action) {
    switch (action.type) {
      case POST_LOADING:
        return {
          ...state,
          loading: true,
        };
      case GET_POSTS:
        return {
          ...state,
          posts: action.payload,
          loading: false,
        };
  ...
  </code></pre>
  
  <p>This all works fine this way but I have two concerns about this method:</p>
  
  <p>First, using spinners while loading components makes things jump around on the page a bit. While not necessarily a bad thing, I like to create the most seamless user experience and find implementing placeholders a more elegant solution.</p>
  
  <p><a href="https://i.stack.imgur.com/oJLzZ.png" rel="nofollow noreferrer">Placeholder Loading Example</a></p>
  
  <p>How do I achieve implementing placeholder items for each separate component so content does not jump around and stays nicely postioned while loading?</p>
  
  <p>Second, When loading the posts, it is loading all available posts that are stored in the database. I can imagine when having excessive amounts of posts, loading all the individual PostItems might take too long and take a lot of unnecessary bandwidth.</p>
  
  <p>How could I add the functionality to only load the content displayed in the browser window so more are loaded when the user scrolls down? Probably by scroll eventhandler? But how does it decide which PostItem to render and which to keep as placeholders?</p>
  
  <p>Hope I explained it clear enough, still relatively new to react/redux so there could some mistakes here. Any tips, suggestions or best practices are welcome.</p>
  
  <p>Thanks a lot!</p>