Async Image Load with React and Redux
<p>I am trying to create a simple message wall with a <code>&lt;PostList /&gt;</code> container which displays a list of <code>&lt;Post /&gt;</code> components. </p>

<pre><code> {posts.map(function (post: any) {
                return &lt;Post key={post.postid} post={post} /&gt;;
            })}
</code></pre>

<p>I pass in a single post to the <code>Post</code> component which has a <code>&lt;Avatar /&gt;</code> component that displays the users profile_pic inside it otherwise it displays a spinner. </p>

<p><strong>My question is how would I allow the components to display on screen and once the image is loaded replace the spinner with the retrieved image?</strong></p>

<p>I currently have the following Reducers and Actions:</p>

<p><strong>User Reducer:</strong></p>

<pre><code>export default function(state = INITIAL_STATE, action : any){
    switch(action.type){
        case FETCH_USER_LOADING:
            return Object.assign({}, state, {isLoading: true});
        case FETCH_USER_DONE:
            return Object.assign({}, state, {users: state.users.concat(action.payload)});
}

    return state;
}
</code></pre>

<p><strong>User Actions:</strong></p>

<pre><code>export function fetchUser(id: any) {
    return function (dispatch: any) {
        dispatch({ type: FETCH_USER_LOADING });
        return axios.get(`${ROOT_URL}/users/${id}`, {
            headers: { token: localStorage.getItem('token') }
        })
            .then(function (response) {
                dispatch({type: FETCH_USER_DONE, payload: response.data});
                return response.data
            })
    } 
}
</code></pre>