uniloader

import { useState, useEffect } from "react";

function UniLoader() {
  const frames = ["⠀⠀⠀⠀⠀\n⠀⠀⠀⠀⠀\n⠀⠀⠀⠀⠀\n⠀⠀⠀⠀⠀\n⠀⠀⠀⠀⠀","⣠⠀⠀⠀⠀\n⣿⠀⠀⠀⠀\n⡻⠀⠀⠀⠀\n⠀⠀⠀⠀⠀\n⠀⠀⠀⠀⠀","⣠⣴⠀⠀⠀\n⣿⣿⠀⠀⠀\n⡻⣿⠀⠀⠀\n⠀⢙⠀⠀⠀\n⠀⠀⠀⠀⠀","⣠⣴⣶⠀⠀\n⣿⣿⣿⠀⠀\n⡻⣿⣿⠀⠀\n⠀⢙⣿⠀⠀\n⠀⠀⢁⠀⠀","⣠⣴⣶⣦⠀\n⣿⣿⣿⣿⠀\n⡻⣿⣿⣿⠀\n⠀⢙⣿⢛⠀\n⠀⠀⢁⠀⠀","⣠⣴⣶⣦⢄\n⣿⣿⣿⣿⣿\n⡻⣿⣿⣿⢟\n⠀⢙⣿⢛⠀\n⠀⠀⢁⠀⠀"];
  const interval = 100;
  const [i, setI] = useState(0);

  useEffect(() => {
    const t = setInterval(() => setI((f) => (f + 1) % frames.length), interval);
    return () => clearInterval(t);
  }, []);

  return (
    <span style={{ fontFamily: "monospace", whiteSpace: "pre" }}>
      {frames[i]}
    </span>
  );
}

export default UniLoader;