[frontend] chore: Added spinner for registration (#44)

frontend/src/App.css

@@ -11,7 +11,20 @@ body {
   background-image: url('../public/hero.jpg');
   background-size: cover;
   background-position: center;
-  background-attachment: fixed  ;
+  background-attachment: fixed;
+}
+
+body::before {
+  content: "";
+  position: fixed; /* This makes it stay in place on scroll */
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  z-index: -1; /* Keep it behind the content */
+  background-image: url('../public/hero.jpg');
+  background-size: cover;
+  background-position: center;
 }
 
 @media (min-width: 600px) {

frontend/src/components/RegistrationForm.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import { AxiosError } from "axios";
 import { createUser } from "../api/apiService";
+import Spinner from "./Spinner";
 
 export interface RegistrationFormProps {
   onRegister: () => void;
@@ -14,6 +15,7 @@ const RegistrationForm: React.FC<RegistrationFormProps> = ({ onRegister }) => {
     confirmPassword: "",
     errorText: "",
   });
+  const [isDataLoading, setIsDataLoading] = useState(false);
 
   const [registered, setRegistered] = useState(false);
 
@@ -36,16 +38,20 @@ const RegistrationForm: React.FC<RegistrationFormProps> = ({ onRegister }) => {
     }
 
     try {
+      setIsDataLoading(true);
       await createUser({
         username: form.username,
         email: form.email,
         password: form.password,
       });
       setRegistered(true);
+      setIsDataLoading(false);
       onRegister();
     } catch (error) {
       const errors = error as Error | AxiosError;
       // Check if the error is an AxiosError
+      setIsDataLoading(false);
+
       if (errors instanceof AxiosError) {
         const axiosError = errors as AxiosError;
         if (axiosError.response?.status === 400) {
@@ -108,9 +114,14 @@ const RegistrationForm: React.FC<RegistrationFormProps> = ({ onRegister }) => {
             placeholder="Confirm Password"
             required
           />
-                      <button type="submit">Register</button>
 
-          <div className='registration-form-buttons'>
+          {isDataLoading ? (
+            <Spinner />
+          ) : (
+            <button type="submit">Register</button>
+          )}
+
+          <div className="registration-form-buttons">
             <a className="nav-link" href="/">
               Close
             </a>

frontend/src/components/Spinner.tsx

@@ -4,7 +4,7 @@ const Spinner = () => {
     return (
         <div className="spinner-container" data-testid='spinner-container'>
                 <RotatingLines
-      strokeColor="green"
+      strokeColor="white"
       strokeWidth="5"
       animationDuration="0.75"
       width="40"