[Recompose] Show a Spinner While a Component is Loading using Recompose

Learn how to use the 'branch' and 'renderComponent' higher-order components to show a spinner while a component loads.

 

import React from 'react';
import { lifecycle, branch, compose, renderComponent } from 'recompose';

// Mock Configuration
function getUser() {
    return new Promise((resolve, reject) => {
        setTimeout(() => resolve({
            name: 'Zhentian',
            status: 'active'
                                 }), 1500);
    })
}

const Spinner = () =>
    <div className="Spinner">
        <div className="loader">Loading...</div>
    </div>;

const withUserData = lifecycle({
    getInitialState(){
        return {
            loading: true
        }
    },
    componentDidMount() {
        getUser()
            .then((user) => {
                this.setState({...user, loading: false})
            })
    }
                           });


const UserStyle = {
    position: 'relative',
    background: 'lightblue',
    display: 'inline-block',
    padding: '10px',
    cursor: 'pointer',
    marginTop: '50px'
};



const withSpinnerWhileLoading = branch(
    (props) => props.loading,
    renderComponent(Spinner)
);

const enhance = compose(
    withUserData,
    withSpinnerWhileLoading
)

let User5 = enhance(({ name, status }) => (
    <div style={UserStyle}>
        {name} - {status}
    </div>
));


export default User5;