Improved the Speaking Generation

src/pages/(generation)/SpeakingGeneration.tsx

@@ -7,6 +7,7 @@ import {convertCamelCaseToReadable} from "@/utils/string";
 import {Tab} from "@headlessui/react";
 import axios from "axios";
 import clsx from "clsx";
+import moment from "moment";
 import {useRouter} from "next/router";
 import {useEffect, useState} from "react";
 import {BsArrowRepeat, BsCheck} from "react-icons/bs";
@@ -19,6 +20,7 @@ const PartTab = ({part, index, setPart}: {part?: SpeakingPart; index: number; se
 	const generate = () => {
 		setPart(undefined);
 		setIsLoading(true);
+
 		axios
 			.get(`/api/exam/speaking/generate/speaking_task_${index}`)
 			.then((result) => {
@@ -38,11 +40,15 @@ const PartTab = ({part, index, setPart}: {part?: SpeakingPart; index: number; se
 		toast.info("This will take quite a while, please do not leave this page or close the tab/window.");
 
 		setIsLoading(true);
+		const initialTime = moment();
+
 		axios
 			.post(`/api/exam/speaking/generate/speaking/generate_${index === 3 ? "interactive" : "speaking"}_video`, part)
 			.then((result) => {
-				playSound(typeof result.data === "string" ? "error" : "check");
-				if (typeof result.data === "string") return toast.error("Something went wrong, please try to generate the video again.");
+				const isError = typeof result.data === "string" || moment().diff(initialTime, "seconds") < 60;
+
+				playSound(isError ? "error" : "check");
+				if (isError) return toast.error("Something went wrong, please try to generate the video again.");
 				setPart({...part, result: result.data});
 			})
 			.catch((e) => {
@@ -98,7 +104,7 @@ const PartTab = ({part, index, setPart}: {part?: SpeakingPart; index: number; se
 					<span className={clsx("font-bold text-2xl text-ielts-speaking")}>Generating...</span>
 				</div>
 			)}
-			{part && (
+			{part && !isLoading && (
 				<div className="flex flex-col gap-2 w-full overflow-y-scroll scrollbar-hide h-96">
 					<h3 className="text-xl font-semibold">{part.topic}</h3>
 					{part.question && <span className="w-full">{part.question}</span>}