added spinner to advanced search

components/homepage/dns.js

@@ -2,9 +2,17 @@ import Link from "next/link";
 import { useState } from "react";
 import { useRouter } from "next/router";
 import useTranslation from "next-translate/useTranslation";
+import LoadingOverlay from "react-loading-overlay";
 
 export default function Dns() {
     let { t } = useTranslation();
+    const [showSpinnerState, setShowSpinnerState] = useState(false);
+
+    let spinnerState = () => {
+        showSpinnerState == true
+            ? setShowSpinnerState(false)
+            : setShowSpinnerState(true);
+    };
     return (
         <div className="card" id="casesearch-card">
             <div className="card-body">
@@ -18,12 +26,22 @@ export default function Dns() {
                 </div>
                 <div className="govuk-form-group">
                     <Link href="/dnsapplications">
-                        <a className="govuk-button">
+                        <a
+                            className="govuk-button"
+                            onClick={() => {
+                                spinnerState();
+                            }}
+                        >
                             {t("home:dns-card-button")}
                         </a>
                     </Link>
                 </div>
             </div>
+            <LoadingOverlay
+                active={showSpinnerState}
+                spinner
+                text={t("common:spinner-loading")}
+            />
         </div>
     );
 }