loading...

Easy React loader

gbrantunes profile image Gabriel Antunes ・2 min read

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;
Enter fullscreen mode Exit fullscreen mode

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';
Enter fullscreen mode Exit fullscreen mode

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);
  }
`
Enter fullscreen mode Exit fullscreen mode

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;
  }

`
Enter fullscreen mode Exit fullscreen mode

βœ…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
Enter fullscreen mode Exit fullscreen mode

βœ… Create a state to control the loader show/hide mechanism

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

Discussion

pic
Editor guide