Easy React loader
Tags: react, tutorial
Published: 2020-10-29 18:27:47

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](https://loading.io/css/). It looks like this when we turn it into a React component:
**Loader/index.tsx**
```javascript
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](https://www.styled-components.com/) for CSS.
Imports: Basic imports from styled-components that let's us to work with CSS in Js.
```javascript
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.
```javascript
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.
```javascript
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.

```javascript
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.