Refactored evaluation process for improved efficiency:

- Initial response set to null; Frontend now generates a list of anticipated stats;
- Background evaluation dynamically updates DB upon completion;
- Frontend actively monitors and finalizes upon stat evaluation completion.

src/exams/Finish.tsx

@@ -10,8 +10,8 @@ import Link from "next/link";
 import {useRouter} from "next/router";
 import {Fragment, useEffect, useState} from "react";
 import {BsArrowCounterclockwise, BsBook, BsClipboard, BsEyeFill, BsHeadphones, BsMegaphone, BsPen, BsShareFill} from "react-icons/bs";
-import { LevelScore } from "@/constants/ielts";
-import { getLevelScore } from "@/utils/score";
+import {LevelScore} from "@/constants/ielts";
+import {getLevelScore} from "@/utils/score";
 
 interface Score {
 	module: Module;
@@ -71,20 +71,18 @@ export default function Finish({user, scores, modules, isLoading, onViewResults}
 	const bandScore: number = calculateBandScore(selectedScore.correct, selectedScore.total, selectedModule, user.focus);
 
 	const showLevel = (level: number) => {
-		if(selectedModule === "level") {
+		if (selectedModule === "level") {
 			const [levelStr, grade] = getLevelScore(level);
 			return (
 				<div className="flex flex-col items-center justify-center gap-1">
 					<span className="text-xl font-bold">{levelStr}</span>
 					<span className="text-xl">{grade}</span>
 				</div>
-			)
-		} 
-		
-		
-		return <span className="text-3xl font-bold">{level}</span>;
+			);
+		}
 
-	}
+		return <span className="text-3xl font-bold">{level}</span>;
+	};
 
 	return (
 		<>
@@ -156,14 +154,16 @@ export default function Finish({user, scores, modules, isLoading, onViewResults}
 				{isLoading && (
 					<div className="w-fit h-fit absolute top-1/2 -translate-y-1/2 left-1/2 -translate-x-1/2 animate-pulse flex flex-col gap-12 items-center">
 						<span className={clsx("loading loading-infinity w-32", moduleColors[selectedModule].progress)} />
-						<span className={clsx("font-bold text-2xl", moduleColors[selectedModule].progress)}>Evaluating your answers...</span>
+						<span className={clsx("font-bold text-2xl text-center", moduleColors[selectedModule].progress)}>
+							Evaluating your answers, please be patient...
+							<br />
+							You can also check it later on your records page!
+						</span>
 					</div>
 				)}
 				{!isLoading && (
 					<div className="w-full flex gap-9 mt-32 items-center justify-between mb-20">
-						<span className="max-w-3xl">
-							{moduleResultText(selectedModule, bandScore)}
-						</span>
+						<span className="max-w-3xl">{moduleResultText(selectedModule, bandScore)}</span>
 						<div className="flex gap-9 px-16">
 							<div
 								className={clsx("radial-progress overflow-hidden", moduleColors[selectedModule].progress)}