27 lines
738 B
JavaScript
27 lines
738 B
JavaScript
import {useEffect, useState} from 'react';
|
|
|
|
import styles from './disconnected.module.css';
|
|
|
|
export default function Disconnected() {
|
|
const [dots, setDots] = useState(3);
|
|
const [delta, setDelta] = useState(1);
|
|
useEffect(() => {
|
|
const handle = setTimeout(() => {
|
|
const updated = dots + delta;
|
|
setDots(updated);
|
|
if (updated < 1 || updated > 5) {
|
|
setDelta(-delta);
|
|
}
|
|
}, 100);
|
|
return () => {
|
|
clearTimeout(handle);
|
|
};
|
|
}, [dots, delta]);
|
|
const rendered = Array(dots).fill('.').join('');
|
|
return (
|
|
<div className={styles.disconnected}>
|
|
<p>There's a problem with the connection.</p>
|
|
<p>{rendered}Reconnection attempt in progress{rendered}</p>
|
|
</div>
|
|
);
|
|
} |