src/components/views/llmAnswer/LlmAnswer.tsx

import LlmAnswerProps from "./LlmAnswerProps";
import "./LlmAnswer.scss";
import { useState, useEffect } from "react";
import TextArea from "@/components/generics/textArea/TextArea";
import "@/components/views/requestTextArea/RequestTextArea.scss";

const LlmAnswer = ({ value, loading }: LlmAnswerProps) => {
  const [placeholder, setPlaceholder] = useState("Среднее время ожидания ответа - 110 секунд...");

  useEffect(() => {
    if (loading) {
      const intervalId = setInterval(() => {
        setPlaceholder((prev) => {
          const dots = (prev.match(/\./g) || []).length;
          if (dots < 3) {
            return "Среднее время ожидания ответа - 110 секунд" + ".".repeat(dots + 1);
          }
          return "Среднее время ожидания ответа - 110 секунд";
        });
      }, 500);
      return () => clearInterval(intervalId);
    } else {
      setPlaceholder("Среднее время ожидания ответа - 110 секунд...");
    }
  }, [loading]);

  return (
    <div className="llm_answer">
      <div className="label">
        <span>Ответ ЛЛМ</span>
      </div>
      <TextArea
        className={`result_text ${loading ? "loading" : ""}`}
        value={loading ? "" : value}
        onInput={() => {}}
        onKeyDown={() => {}}
        rows={1}
        placeholder={placeholder}
        readOnly
      />
    </div>
  );
};

export default LlmAnswer;