From f411cad9d61ef6b5e78262e735d57f9624930a95 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=9C=85=20Daniel=20Danielecki?=
 <daniel.danielecki@mail.com>
Date: Mon, 13 Jan 2025 10:16:52 +0100
Subject: [PATCH] refactor: error page UI improvement (closes #15)

---
 components/ExamQuizForm.tsx | 15 +++++++++++++++
 components/QuizForm.tsx     | 12 ++++++++++--
 2 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/components/ExamQuizForm.tsx b/components/ExamQuizForm.tsx
index 496853b..12f14e3 100644
--- 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
index 541e188..e78d869 100644
--- 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!;