src/components/generics/loading/Loading.tsx

import React, { useEffect, useState } from "react";

interface LoadingProps {
  loading: boolean;
}

const Loading: React.FC<LoadingProps> = ({ loading }) => {
  const [dots, setDots] = useState<string>("");

  useEffect(() => {
    if (loading) {
      const interval = setInterval(() => {
        setDots((prev) => (prev.length < 3 ? prev + "." : ""));
      }, 500);

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

  return <div className="loading">Загрузка{dots}</div>;
};

export default Loading;