fix(ui): refactor results page for exam results logic

app/exam/[id]/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useEffect, useCallback } from "react";
+import React, { useEffect, useCallback, useState } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
 import Header from "@/components/Header";
 import QuestionItem from "@/components/QuestionItem";
@@ -18,6 +18,8 @@ export default function ExamPage() {
     useExamStore();
   const { resetTimer, stopTimer } = useTimerStore();
 
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
   // Start exam + timer automatically
   useEffect(() => {
     if (type && test_id) {
@@ -27,7 +29,6 @@ export default function ExamPage() {
             // Timer ended → auto-submit exam
             submitExam(type);
             router.push(`/categories/${type}s`);
-            alert("Time's up! Your exam has been submitted.");
           });
         }
       });
@@ -53,9 +54,14 @@ export default function ExamPage() {
     );
   }
 
-  const handleSubmitExam = (type: string) => {
-    submitExam(type);
-    router.push(`/categories/${type}s`);
+  const handleSubmitExam = async (type: string) => {
+    try {
+      setIsSubmitting(true);
+      await submitExam(type);
+      router.push(`/exam/results`);
+    } finally {
+      setIsSubmitting(false);
+    }
   };
 
   return (
@@ -81,9 +87,17 @@ export default function ExamPage() {
           <div className="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 flex">
             <button
               onClick={() => handleSubmitExam(type)}
-              className="flex-1 bg-blue-900 text-white p-6 font-bold text-lg hover:bg-blue-800 transition-colors"
+              disabled={isSubmitting}
+              className="flex-1 bg-blue-900 text-white p-6 font-bold text-lg disabled:opacity-50 disabled:cursor-not-allowed hover:bg-blue-800 transition-colors flex justify-center items-center gap-2"
             >
-              Submit
+              {isSubmitting ? (
+                <>
+                  <span className="animate-spin rounded-full h-5 w-5 border-b-2 border-white"></span>
+                  Submitting...
+                </>
+              ) : (
+                "Submit"
+              )}
             </button>
           </div>
         </div>