Loading spinner

src/components/UI/LoadingSpinner.module.css

@@ -0,0 +1,45 @@
+.lds-dual-ring {
+  display: inline-block;
+  width: 64px;
+  height: 64px;
+  z-index: 1;
+}
+
+.lds-dual-ring:after {
+  content: " ";
+  display: block;
+  width: 46px;
+  height: 46px;
+  margin: 1px;
+  border-radius: 50%;
+  border: 5px solid #ffffff;
+  border-color: #ffffff transparent #ffffff transparent;
+  animation: lds-dual-ring 1.2s linear infinite;
+  z-index: 1;
+}
+
+.loading-spinner__overlay {
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background: rgba(0, 0, 0, 0.75);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1;
+}
+
+.loading-spinner__message {
+  color: #ffffff;
+}
+
+@keyframes lds-dual-ring {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

src/components/UI/LoadingSpinner.tsx

@@ -0,0 +1,19 @@
+import { FC } from "react";
+
+import classes from "./LoadingSpinner.module.css";
+
+interface Props {
+  asOverlay: boolean;
+  message?: string;
+}
+
+const LoadingSpinner: FC<Props> = (props) => {
+  return (
+    <div className={`${props.asOverlay && classes["loading-spinner__overlay"]}`}>
+      <div className={classes["lds-dual-ring"]}></div>
+      <div className={classes["loading-spinner__message"]}>{props.message}</div>
+    </div>
+  );
+};
+
+export default LoadingSpinner;

src/components/fhir/FhirAuthoriser.tsx

@@ -1,6 +1,7 @@
 import { FC, useEffect, useState } from "react";
 import { oauth2 as SMART } from "fhirclient";
 
+import LoadingSpinner from "../UI/LoadingSpinner";
 import ModalWrapper from "../UI/ModalWrapper";
 import { ModalState } from "../UI/ModalWrapper";
 
@@ -15,9 +16,12 @@ const CLIENT_SECRET = process.env.REACT_APP_CLIENT_SECRET;
  * @constructor
  */
 const FhirAuthoriser: FC = () => {
+  const [isLoading, setIsLoading] = useState(false);
   const [modal, setModal] = useState<ModalState | null>(null);
 
   useEffect(() => {
+    setIsLoading(true);
+
     SMART.authorize({
       iss: FHIR_URL,
       redirectUri: "#/new_report",
@@ -31,13 +35,16 @@ const FhirAuthoriser: FC = () => {
           message: "Something went wrong connecting to the FHIR authoriser. Please try again later.",
           isError: true,
         });
+      })
+      .finally(() => {
+        setIsLoading(false);
       });
   }, []);
 
   return (
     <>
+      {isLoading && <LoadingSpinner asOverlay message={"Connecting to FHIR back end..."} />}
       <ModalWrapper isError={modal?.isError} modalMessage={modal?.message} onClear={() => setModal(null)} />
-      <p>Connecting to FHIR back end...</p>
     </>
   );
 };

src/components/reports/ReportForm.tsx

@@ -1,4 +1,4 @@
-import { FC, useContext, useEffect, useRef, useState } from "react";
+import { FC, useContext, useRef, useState } from "react";
 import { Form, Formik, FormikHelpers, FormikProps } from "formik";
 import * as Yup from "yup";
 import { FhirContext } from "../fhir/FhirContext";