refactor: error page UI improvement (closes #15)

Ditectrev · Jan 13, 2025 · f411cad · f411cad
1 parent e70943a
commit f411cad
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 2 deletions.
diff --git a/components/ExamQuizForm.tsx b/components/ExamQuizForm.tsx
@@ -37,6 +37,21 @@ const ExamQuizForm: FC<Props> = ({
   };
 
   if (isLoading) return <LoadingIndicator />;
+
+  if (!questionSet) {
+    handleNextQuestion(1);
+    return (
+      <div className="flex flex-col items-center justify-center h-full">
+        <p className="text-red-500 text-lg font-semibold">
+          Oops! Something went wrong while loading the questions.
+        </p>
+        <p className="text-white text-md mt-2">
+          Please try refreshing the page or check your internet connection.
+        </p>
+      </div>
+    );
+  }
+
   const { question, options } = questionSet;
 
   const noOfAnswers = options.filter((el) => el.isAnswer).length;

diff --git a/components/QuizForm.tsx b/components/QuizForm.tsx
@@ -123,10 +123,18 @@ const QuizForm: FC<Props> = ({
 
   if (isLoading) return <LoadingIndicator />;
 
-  //Error Handling for loading issues
   if (!questionSet) {
     handleNextQuestion(1);
-    return <p>Loading questions failed.</p>;
+    return (
+      <div className="flex flex-col items-center justify-center h-full">
+        <p className="text-red-500 text-lg font-semibold">
+          Oops! Something went wrong while loading the questions.
+        </p>
+        <p className="text-white text-md mt-2">
+          Please try refreshing the page or check your internet connection.
+        </p>
+      </div>
+    );
   }
 
   const { question, options, images } = questionSet!;