Modified Loading Component

AI4Bharat · Sep 11, 2024 · 9b28bca · 9b28bca
1 parent 582a9a7
commit 9b28bca
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 3 deletions.
diff --git a/frontend/components/TryOut/ASR.tsx b/frontend/components/TryOut/ASR.tsx
@@ -102,6 +102,7 @@ export default function ASR({ services }: { services: any }) {
   const [domain, setDomain] = useState("general");
 
   const [success, setSuccess] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
 
   const toast = useToast();
 
@@ -117,6 +118,7 @@ export default function ASR({ services }: { services: any }) {
       const audioString = (base64data as string).split(",")[1];
       setAudioString(audioString);
       try {
+        setIsLoading(true);
         const response = await axios.post(`${API_URL}/inference/transcribe`, {
           sourceLanguage: sourceLanguage,
           audioContent: audioString,
@@ -127,6 +129,7 @@ export default function ASR({ services }: { services: any }) {
           preProcessors: preProcessor,
           postProcessors: postProcessor,
         });
+        setIsLoading(false);
         if (response.status === 200) {
           setSuccess(true);
           setOutputText(response.data["output"][0]["source"]);
@@ -213,6 +216,7 @@ export default function ASR({ services }: { services: any }) {
         )[1];
         setAudioString(audioString);
         try {
+          setIsLoading(true);
           const response = await axios.post(`${API_URL}/inference/transcribe`, {
             sourceLanguage: sourceLanguage,
             audioContent: audioString,
@@ -223,6 +227,7 @@ export default function ASR({ services }: { services: any }) {
             preProcessors: preProcessor,
             postProcessors: postProcessor,
           });
+          setIsLoading(false);
           if (response.status === 200) {
             setSuccess(true);
             setOutputText(response.data["output"][0]["source"]);
@@ -394,7 +399,13 @@ export default function ASR({ services }: { services: any }) {
               domain={domain}
             />
           ) : (
-            <CircularProgress isIndeterminate color="a4borange" />
+            <>
+              {isLoading ? (
+                <CircularProgress isIndeterminate color="a4borange" />
+              ) : (
+                <></>
+              )}
+            </>
           )}
         </VStack>
       </FormControl>

diff --git a/frontend/components/TryOut/NMT.tsx b/frontend/components/TryOut/NMT.tsx
@@ -61,6 +61,7 @@ export default function NMT({ services }: { services: any }) {
   const [inputText, setInputText] = useState("");
   const [outputText, setOutputText] = useState("");
   const [success, setSuccess] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
 
   const toast = useToast();
 
@@ -168,13 +169,15 @@ export default function NMT({ services }: { services: any }) {
                   });
                 } else {
                   try {
+                    setIsLoading(true);
                     const response = await fetchTranslation({
                       sourceLanguage: sourceLanguage,
                       targetLanguage: targetLanguage,
                       input: inputText,
                       task: "translation",
                       serviceId: service,
                     });
+                    setIsLoading(false);
                     if (response.status === 200) {
                       setSuccess(true);
                       setOutputText(response.data["output"][0]["target"]);
@@ -238,7 +241,13 @@ export default function NMT({ services }: { services: any }) {
                 domain="general"
               />
             ) : (
-              <CircularProgress isIndeterminate color="a4borange" />
+              <>
+                {isLoading ? (
+                  <CircularProgress isIndeterminate color="a4borange" />
+                ) : (
+                  <></>
+                )}
+              </>
             )}
           </VStack>
         </VStack>

diff --git a/frontend/components/TryOut/TTS.tsx b/frontend/components/TryOut/TTS.tsx
@@ -65,6 +65,7 @@ export default function TTS({ services }: { services: any }) {
   const [transliteration, setTransliteration] = useState(true);
   const [inputText, setInputText] = useState("");
   const [output, setOutput] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
 
   const [success, setSuccess] = useState(false);
 
@@ -172,13 +173,15 @@ export default function TTS({ services }: { services: any }) {
                 setOutput("");
                 setSuccess(false);
                 try {
+                  setIsLoading(true);
                   const response = await fetchAudio({
                     sourceLanguage,
                     input: inputText,
                     gender: gender,
                     samplingRate: samplingRate,
                     serviceId: service,
                   });
+                  setIsLoading(false);
                   if (response.status === 200) {
                     setSuccess(true);
                     const result = response.data;
@@ -246,7 +249,13 @@ export default function TTS({ services }: { services: any }) {
                 domain="general"
               />
             ) : (
-              <CircularProgress isIndeterminate color="a4borange" />
+              <>
+                {isLoading ? (
+                  <CircularProgress isIndeterminate color="a4borange" />
+                ) : (
+                  <></>
+                )}
+              </>
             )}
           </VStack>
         </VStack>