import React from 'react'

let DevSpinner = () => null // eslint-disable-line

if (process.env.REACT_STATIC_ENV === 'development') {
  DevSpinner = () => (
      <div
        className="react-static-loading"
        style={{
          display: 'block',
          width: '100%',
          textAlign: 'center',
          padding: '10px',
        }}
    >
          <style>
              {`
        @keyframes react-static-loader {
          0% {
            transform: rotate(0deg)
          }
          100% {
            transform: rotate(360deg)
          }
        }
      `}
          </style>
          <svg
            style={{
              width: '50px',
              height: '50px',
            }}
      >
              <circle
                style={{
                  transformOrigin: '50% 50% 0px',
                  animation: 'react-static-loader 1s infinite',
                  r: 20,
                  stroke: 'rgba(0,0,0,0.4)',
                  strokeWidth: 4,
                  cx: 25,
                  cy: 25,
                  strokeDasharray: 10.4,
                  strokeLinecap: 'round',
                  fill: 'transparent',
                }}
        />
          </svg>
      </div>
  )
}

export default DevSpinner
