diff --git a/src/Pages/MainPage.tsx b/src/Pages/MainPage.tsx index bab7da8..a2cd125 100644 --- a/src/Pages/MainPage.tsx +++ b/src/Pages/MainPage.tsx @@ -1,4 +1,4 @@ -import React, { useState, useCallback } from "react"; +import React, { useState, useCallback, useEffect } from "react"; import axios from "axios"; import UploadButton from "../Components/UploadButton"; import { useNavigate } from "react-router-dom"; @@ -9,8 +9,19 @@ const MainPage: React.FC = () => { const [showConfirmation, setShowConfirmation] = useState(false); const [file, setFile] = useState(null); const [error, setError] = useState(null); + const [loadingDots, setLoadingDots] = useState(""); const navigate = useNavigate(); + useEffect(() => { + let interval: NodeJS.Timeout; + if (isAnalyzing) { + interval = setInterval(() => { + setLoadingDots((prev) => (prev.length < 5 ? prev + "." : "")); + }, 500); + } + return () => clearInterval(interval); + }, [isAnalyzing]); + const onDrop = useCallback((acceptedFiles: File[]) => { const selectedFile = acceptedFiles[0]; setFileName(selectedFile.name); @@ -135,17 +146,17 @@ const MainPage: React.FC = () => { )} {isAnalyzing && ( -
+
- 분석 중입니다... + 분석 중입니다{loadingDots}
Analyzing
)}