React loading dots component

LoadingDots.tsx

import React from 'react'
import styled from 'styled-components'

const Dots = styled.div`
  display: inline-block;

  &::after {
    display: inline-block;
    animation: ellipsis 1.25s infinite;
    content: ".";
    width: 1em;
    text-align: left;
  }
  @keyframes ellipsis {
    0% {
      content: ".";
    }
    33% {
      content: "..";
    }
    66% {
      content: "...";
    }
  }
`

export default (props:any) => {
  return <Dots>{props.children}</Dots>
}

LoadingDots_js.tsx

import React from 'react'
import styled from 'styled-components'

const Container = styled.div`
  display: inline-block;
`

interface Props {

}

interface State {
  dots: string
}

export default class Dots extends React.Component<Props, State> {
  constructor(props:Props) {
    super(props)

    this.state = {
      dots: ''
    }
  }

  componentDidMount() {
    window.setInterval(() => {
      const { dots } = this.state
      if (dots.length > 2) {
        this.setState({dots: ''})
      } else {
        this.setState({dots: `${dots}.`})
      }
    }, 300)
  }

  render() {
    return <Container>{this.props.children}{this.state.dots}</Container>
  }
}