A Dimmer or A loading spinner ? Async React UI with Redux

In web application development, when we fetch data from our server, it is essential to show UI elements that signalling the fetching process. There are a wide variety of UI library that grant us easy way of implementation.

Easy Loading Screen with Semantic UI

Taking Semantic UI as an example, it is exceptional convenient for us to display a dimmer screen with a spinner in front of out content:

// A JSX functional component
import React from ‘react’
import { Dimmer, Loader, Image, Segment } from ‘semantic-ui-react’
const LoaderExampleLoader = () => (
 <Segment>
     <Dimmer active>
         <Loader />
     </Dimmer>
     <Image src=’/assets/images/wireframe/short-paragraph.png’ />
 </Segment>
)
export default LoaderExampleLoader

By just placing the Dimmer component with the main content in the same wrapper. We can link the active props in the Dimmer to control the display of loading spinner.

// In a React Component class

 render() {
    const { authToken, isValidate } = this.props;
    let active = true;
    if (authToken && isValidate) {
      active = false;
    }
    return (
      <Segment>
        <Dimmer active={active}>
          <Loader>
            <Button
              onClick={() => { this.props.history.push('/dashboard/') }}
            >Reconnect
            </Button>
            <Button
              onClick={() => { this.props.history.push('/Login') }}
              primary
            >Login
            </Button>
          </Loader>
        </Dimmer>
        <div /> // Main content to which data is fed to 
        </Segment>
    )
}

The output will be like this:

The development is easy and fast, however, in the user experience perspective, A Dimmer could be very disrupting if you want to provide a smooth experience