Three dots animated . .. ... in loop

Loading.js

import React from "react";
import styled from "styled-components";
import ThreeDots from "../components/ThreeDots";

const Loading = styled.p`
  color: #666;
  display: table-cell;
  vertical-align: middle;
`;

const Loading = props => {
  return (
    <>
      {props.data ? (
        <>
       {* /  / *}
        </>
      ) : (
        <Loading>
          Loading
          <ThreeDots />
        </Loading>
      )}
    </>
  );
};
export default Loading;

ThreeDots.js

import React, { useState, useEffect } from "react";

const ThreeDots = () => {
  const [dots, setDots] = useState(".");

  useEffect(() => {
    const interval = setInterval(() => {
      setDots(dots.length > 2 ? "" : dots + ".");
    }, 400);
    return () => clearInterval(interval);
  }, [dots]);

  return <span>{dots}</span>;
};

export default ThreeDots;