create a spinner & add a loader in react

2019-05-23

~2 min read

250 words

Using two libraries, styled-components and react-image, I learned a new simple way to create a Loader component (i.e. a spinner) to be used while an image is being loaded in a react application.

Create Your Spinner

A spinner is just a component with animation. However, in the process of doing this, I learned about the tagged template literal support for keyframes in styled-components.¹

If you’re building out a library of UI components (as I am), this type of abstraction can be really nice.

Here’s an example Loader component.

import styled, { keyframes } from "styled-components"

const spin = keyframes`
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
`

export const Loader = styled.div`
  border: 0.2em solid rgba(0, 0, 0, 0.1);
  border-top: 0.2em solid #767676;
  border-radius: 50%;
  width: 2.28571429rem;
  height: 2.28571429rem;
  animation: ${spin} 0.6s linear infinite;
`

export default Loader

Create An Image With A Loader

Now that I have a loader, I can pull it into my ImageComponent and use it while the image is loading thanks to the straightforward API of react-image.²

import React from "react"
import Img from "react-image"

import { housePlaceholder } from "assets"
import { Loader } from "./Loader"

function ImageComponent(props) {
  const { alt, image } = props
  return (
    <Img alt={alt} src={image ? image : housePlaceholder} loader={<Loader />} />
  )
}

export default ImageComponent

Footnotes

Hi there and thanks for reading! My name's Stephen. I live in Chicago with my wife, Kate, and dog, Finn. Want more? See about and get in touch!