import React, { useEffect, useState } from 'react'
import styles from './loading.module.scss'

let interval: any = null;

export default () => {

  const [arr, setArr] = useState<string[]>(['.']);

  useEffect(() => {
    interval = setInterval(() => {
      setArr(arr => {
        let newarr: string[] = ['.'];
        if (arr.length < 3) newarr = [...arr, '.'];
        return newarr
      })
    }, 400);

    return () => {
      clearInterval(interval);
      interval = null;
    }
  }, []);

  return (
    <div className={styles.loader}>
      <div className={styles['ball-triangle-path']}>
        <div></div>
        <div></div>
        <div></div>
      </div>
      <p className={styles.text}>
        数据加载中<span>{arr.join('')}</span>
      </p>
    </div>
  )
}