Add Spinner while loading

 

Commit link

//Users.js
import React from 'react';
import UserItem from './UserItem';
import Spinner from '../layout/Spinner';
import PropTypes from 'prop-types';//shortcut impt


const Users =({users,loading}) =>{
    if(loading)
    {
        return <Spinner />
    }else{
        return (
            <div style={userStyle}>
                {users.map(user => (
                    //<div key={user.id}>{user.login}</div>
                    <UserItem key={user.id} user={user}/>
                ))}
            </div>
        );
    }
        
}

Users.protoTypes={
    users: PropTypes.array.isRequired,
    users: PropTypes.bool.isRequired
}
const userStyle ={
    display: 'grid',
    gridTemplateColumns: 'repeat(3,1fr)',
    gridGap: '1rem'
}
export default Users

//Spinner.js
//racf shortcut
import React,{Fragment} from 'react';
import spinner from './spinner.gif';

const Spinner = () => {
    //return (
        <Fragment>
            <img src={spinner}alt="Loading.." style={{width:'200px',margin:"auto",display='block'}} />
        </Fragment>
    //)//No need of return statement as single fragment line and no other js code.
}

export default Spinner