shared LoadingDots.tsx

100% Statements 9/9

100% Branches 2/2

100% Functions 5/5

100% Lines 7/7

Press n or j to go to the next uncovered block, b, p or k for the previous block.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24  
 
 
 
 
 
3x
6x
 
6x
3x
3x
 
 
3x
 
 
6x
 
 
 
 
 
  import { Box } from '@metamask/design-system-react';
import { useState, useEffect } from 'react';
 
/**
 * @returns A component that displays a loading animation with dots.
 */
export const LoadingDots: React.FC = () => {
  const [dots, setDots] = useState('.');
 
  useEffect(() => {
    const interval = setInterval(() => {
      setDots((prev) => (prev.length >= 3 ? '.' : `${prev}.`));
    }, 500);
 
    return () => clearInterval(interval);
  }, []);
 
  return (
    <Box>
      <span>Loading{dots}</span>
    </Box>
  );
};