loader

Author: cbvora

app/exam/page.tsx

@@ -8,6 +8,7 @@ import { Button } from "@azure-fundamentals/components/Button";
 import QuizExamForm from "@azure-fundamentals/components/QuizExamForm";
 import { Question } from "@azure-fundamentals/components/types";
 import ExamResult from "@azure-fundamentals/components/ExamResult";
+import LoadingIndicator from "@azure-fundamentals/components/LoadingIndicator";
 
 const questionsQuery = gql`
   query RandomQuestions($range: Int!, $link: String) {
@@ -86,7 +87,7 @@ const Exam: NextPage<{ searchParams: { url: string; name: string } }> = ({
     setCurrentQuestion(data?.randomQuestions[0]);
   }, [data]);
 
-  if (loading) return <p>Loading</p>;
+  if (loading) return <LoadingIndicator />;
   if (error) return <p>Oh no... {error.message}</p>;
 
   const numberOfQuestions = data.randomQuestions.length || 0;

components/ExamQuizForm.tsx

@@ -3,6 +3,7 @@ import { Button } from "@azure-fundamentals/components/Button";
 import { FC } from "react";
 import { useForm } from "react-hook-form";
 import { Question } from "@azure-fundamentals/components/types";
+import LoadingIndicator from "./LoadingIndicator";
 
 type Props = {
   isLoading: boolean;
@@ -35,7 +36,7 @@ const ExamQuizForm: FC<Props> = ({
     handleNextQuestion(currentQuestionIndex + 1);
   };
 
-  if (isLoading) return <p>Loading...</p>;
+  if (isLoading) return <LoadingIndicator />;
   const { question, options } = questionSet;
 
   const noOfAnswers = options.filter((el) => el.isAnswer).length;

components/LoadingIndicator.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+
+const LoadingIndicator: React.FC = () => {
+  return (
+    <div className="loading-container">
+      <div className="spinner"></div>
+    </div>
+  );
+};
+
+export default LoadingIndicator;

components/QuizExamForm.tsx

@@ -4,6 +4,7 @@ import { Question } from "./types";
 import { FieldArray, FormikProvider, Field, useFormik } from "formik";
 import { Button } from "./Button";
 import useResults from "@azure-fundamentals/hooks/useResults";
+import LoadingIndicator from "./LoadingIndicator";
 
 type Props = {
   isLoading: boolean;
@@ -192,7 +193,7 @@ const QuizExamForm: React.FC<Props> = ({
     setSavedAnswers(saved);
   };
 
-  if (isLoading) return <p>Loading...</p>;
+  if (isLoading) return <LoadingIndicator />;
 
   return (
     <FormikProvider value={formik}>

components/QuizForm.tsx

@@ -5,6 +5,7 @@ import Image from "next/image";
 import SelectionInput from "./SelectionInput";
 import { Button } from "./Button";
 import NumberInputComponent from "./NumberInputComponent";
+import LoadingIndicator from "./LoadingIndicator";
 
 type Props = {
   isLoading: boolean;
@@ -139,7 +140,7 @@ const QuizForm: FC<Props> = ({
     }
   };
 
-  if (isLoading) return <p>Loading...</p>;
+  if (isLoading) return <LoadingIndicator />;
   //Error Handling for loading issues
   if (!questionSet) {
     handleNextQuestion(1);

styles/globals.css

@@ -1,3 +1,34 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+.loading-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 9999;
+  }
+  
+  .spinner {
+    border: 8px solid rgba(255, 255, 255, 0.3);
+    border-top: 8px solid #1E293B;
+    border-radius: 50%;
+    width: 60px;
+    height: 60px;
+    animation: spin 1s linear infinite;
+  }
+  
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+