Files
nightmarket/client/plugin/components/Loading.tsx
2022-04-24 17:51:53 +01:00

17 lines
498 B
TypeScript

import { h } from "preact";
import { useState, useEffect } from "preact/hooks";
export const Loading = ({ length = 5, padding = 8 }) => {
const [indicator, setIndicator] = useState(". ");
useEffect(() => {
let timeout = setTimeout(() => {
if (indicator.length === length * 2) setIndicator(". ");
else setIndicator(indicator + ". ");
}, 150); // wait before showing loader
return () => clearTimeout(timeout);
}, [indicator]);
return <div style={{ padding }}>{indicator}</div>;
};