@navinc/base-react-components/src/loading-view.js

Nav's Pattern Library

import React from 'react'
import styled from 'styled-components'
import CDNIllustration from './cdn-illustration'
import LoadingDots from './loading-dots'
import * as theme from './theme'

const GoldenCenter = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(100vh * 1 / ${theme.goldenRatio});
`

const LoadingContent = styled.div`
  display: flex;
  flex-flow: column nowrap;
  align-items: center;

  & > ${LoadingDots} {
    color: ${theme.azure};
    margin: 24px 0;
  }

  & > ${CDNIllustration} {
    height: 190px;
  }
`

const LoadingView = ({ className, message = null, illustration, children, ...props }) => (
  <GoldenCenter className={className} data-testid="loading-view" {...props}>
    <LoadingContent>
      {message}
      <LoadingDots />
      {illustration ? <CDNIllustration filename={illustration} /> : null}
    </LoadingContent>
  </GoldenCenter>
)

LoadingView.displayName = 'LoadingView'

export default LoadingView