Easy React loader

Today I made my first loader and I'll pass my recently acquired knowledge to you.

Technologies

• React
• Typescript
• Axios
• Styled-components

Milestones

• Create a loader component
• Create a state to control the loader show/hide mechanism

Talk is cheap. Show me the code.

The HTML/CSS I used was totally copied from loading.io/css. It looks like this when we turn it into a React component:
Loader/index.tsx

import React from 'react';

import { Container } from './styles';

const Loader: React.FC = () => {
  return (
    <Container>
      <div className="lds-ellipsis">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
    </Container>
  );
};

export default Loader;

Loader/styles.ts
Using styled-components for CSS.
Imports: Basic imports from styled-components that let's us to work with CSS in Js.

import styled, { keyframes } from 'styled-components';

Animations: The first and second animations do the scale up and down trick, and the last one do the movement.

const ldsEllipsis1 = keyframes`
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
`

const ldsEllipsis3 = keyframes`
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
`

const ldsEllipsis2 = keyframes`
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(24px, 0);
  }
`

Styles: Some CSS definitions. Full screen, black background with reduced opacity and the dots animating in the middle.

export const Container = styled.div`
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.3);

  .lds-ellipsis {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
  }
  .lds-ellipsis div {
    position: absolute;
    top: 33px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #fff;
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
  }
  .lds-ellipsis div:nth-child(1) {
    left: 8px;
    animation: ${ldsEllipsis1} 0.6s infinite;
  }
  .lds-ellipsis div:nth-child(2) {
    left: 8px;
    animation: ${ldsEllipsis2} 0.6s infinite;
  }
  .lds-ellipsis div:nth-child(3) {
    left: 32px;
    animation: ${ldsEllipsis2} 0.6s infinite;
  }
  .lds-ellipsis div:nth-child(4) {
    left: 56px;
    animation: ${ldsEllipsis3} 0.6s infinite;
  }

`

✅Create a loader component

Now, we need to do the show/hide mechanism. For this task we'll use useState and useEffect hooks.

On page load, the useEffect will show the loader, then api call and on api response, the load should hide.

import React, { useEffect, useState } from 'react'
import api from '../../../axios/config/path' // Axios config instance

import Loader from '../../../components/Loader'

const Page: React.FC = () => {
  const [isLoaderVisible, setIsLoaderVisible] = useState(false)

  useEffect(() => {
    setIsLoaderVisible(true)

    api.get('/api/call').then(response => {
      setEnrolledStudents(response.data)
      setIsLoaderVisible(false)
    })
  }, [])

  return (
    <>
      { isLoaderVisible && <Loader /> }
      <h1>Hello, loader!</h1>
    </>
  )
}

export default Page

✅ Create a state to control the loader show/hide mechanism

So that's it, I hope this article was helpful and thanks for reading.