From d060306a1a4f223e8c12694f73e321eb544103ed Mon Sep 17 00:00:00 2001
From: Spencer14420 <67592325+Spencer14420@users.noreply.github.com>
Date: Sun, 1 Dec 2024 15:24:25 -0500
Subject: [PATCH] Show a loading icon when sending a message (#96)

* Loading icon css and html

* Update html to use loading icon

* Update dependencies
---
 dist/css/style.css | 41 +++++++++++++++++++++++++++++++++++++++++
 index.html         |  3 +++
 package-lock.json  | 32 ++++++++++++++++----------------
 3 files changed, 60 insertions(+), 16 deletions(-)

diff --git a/dist/css/style.css b/dist/css/style.css
index e8c7f55..925002a 100644
--- a/dist/css/style.css
+++ b/dist/css/style.css
@@ -231,6 +231,47 @@ h2 {
   }
 }
 
+/* Loading icon */
+.lds-ring,
+.lds-ring div {
+  box-sizing: border-box;
+}
+.lds-ring {
+  display: inline-block;
+  position: relative;
+  width: 80px;
+  height: 80px;
+}
+.lds-ring div {
+  box-sizing: border-box;
+  display: block;
+  position: absolute;
+  width: 64px;
+  height: 64px;
+  margin: 8px;
+  border: 8px solid currentColor;
+  border-radius: 50%;
+  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+  border-color: currentColor transparent transparent transparent;
+}
+.lds-ring div:nth-child(1) {
+  animation-delay: -0.45s;
+}
+.lds-ring div:nth-child(2) {
+  animation-delay: -0.3s;
+}
+.lds-ring div:nth-child(3) {
+  animation-delay: -0.15s;
+}
+@keyframes lds-ring {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
 /* #### Media Queries ##### */
 
 /* Top panel text and image adjustments */
diff --git a/index.html b/index.html
index cc99a67..58acf69 100644
--- a/index.html
+++ b/index.html
@@ -265,6 +265,9 @@ <h3 class="modal-title" id="contactModalLabel">Contact Us</h3>
                     <div id="message-alert" class="alert alert-danger" role="alert"></div>
                 </div>
                 <div class="modal-footer">
+                    <div id="sendmessage-loading" style="display:none;">
+                        <div class="lds-ring"><div></div><div></div><div></div><div></div></div>
+                    </div>
                     <button type="button" class="btn-capanda btn-capanda-blue" id="sendmessage">Send Message</button>
                 </div>
             </div>
diff --git a/package-lock.json b/package-lock.json
index c5f08be..e5bc05a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -578,9 +578,9 @@
       }
     },
     "node_modules/@eslint/js": {
-      "version": "9.15.0",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.15.0.tgz",
-      "integrity": "sha512-tMTqrY+EzbXmKJR5ToI8lxu7jaN5EdmrBFJpQk5JmSlyLsx6o4t27r883K5xsLuCYCpfKBCGswMSWXsM+jB7lg==",
+      "version": "9.16.0",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.16.0.tgz",
+      "integrity": "sha512-tw2HxzQkrbeuvyj1tG2Yqq+0H9wGoI2IMk4EOsQeX+vmd75FtJAzf+gTA69WF+baUKRYQ3x2kbLE08js5OsTVg==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -1348,9 +1348,9 @@
       }
     },
     "node_modules/eslint": {
-      "version": "9.15.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.15.0.tgz",
-      "integrity": "sha512-7CrWySmIibCgT1Os28lUU6upBshZ+GxybLOrmRzi08kS8MBuO8QA7pXEgYgY5W8vK3e74xv0lpjo9DbaGU9Rkw==",
+      "version": "9.16.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.16.0.tgz",
+      "integrity": "sha512-whp8mSQI4C8VXd+fLgSM0lh3UlmcFtVwUQjyKCFfsp+2ItAIYhlq/hqGahGqHE6cv9unM41VlqKk2VtKYR2TaA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -1359,7 +1359,7 @@
         "@eslint/config-array": "^0.19.0",
         "@eslint/core": "^0.9.0",
         "@eslint/eslintrc": "^3.2.0",
-        "@eslint/js": "9.15.0",
+        "@eslint/js": "9.16.0",
         "@eslint/plugin-kit": "^0.2.3",
         "@humanfs/node": "^0.16.6",
         "@humanwhocodes/module-importer": "^1.0.1",
@@ -1810,9 +1810,9 @@
       }
     },
     "node_modules/globals": {
-      "version": "15.12.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-15.12.0.tgz",
-      "integrity": "sha512-1+gLErljJFhbOVyaetcwJiJ4+eLe45S2E7P5UiZ9xGfeq3ATQf5DOv9G7MH3gGbKQLkzmNh2DxfZwLdw+j6oTQ==",
+      "version": "15.13.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-15.13.0.tgz",
+      "integrity": "sha512-49TewVEz0UxZjr1WYYsWpPrhyC/B/pA8Bq0fUmet2n+eR7yn0IvNzNaoBwnK6mdkzcN+se7Ez9zUgULTz2QH4g==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -2605,9 +2605,9 @@
       "license": "MIT"
     },
     "node_modules/spemailhandler": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/spemailhandler/-/spemailhandler-1.4.1.tgz",
-      "integrity": "sha512-tUSRiWnxDQ67YBwV6nRli8np4pIP9DhAQrmzfZ2OBbMrYm1026Aac7D0E6XKFbVgZvbTQ3DknvNBJTvAcfjm7g==",
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/spemailhandler/-/spemailhandler-1.5.0.tgz",
+      "integrity": "sha512-Os39SNqfyQt6N8x1IovMehZI0M6s1mpzXs0hWdLyN0z3aBlHoJPzof2oOgZb16wiNiDiNdiKqVw3QX0eAq4R2w==",
       "license": "MIT",
       "dependencies": {
         "sp14420-modal": "^1.0.0"
@@ -2776,9 +2776,9 @@
       }
     },
     "node_modules/ts-api-utils": {
-      "version": "1.4.2",
-      "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.4.2.tgz",
-      "integrity": "sha512-ZF5gQIQa/UmzfvxbHZI3JXN0/Jt+vnAfAviNRAMc491laiK6YCLpCW9ft8oaCRFOTxCZtUTE6XB0ZQAe3olntw==",
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.4.3.tgz",
+      "integrity": "sha512-i3eMG77UTMD0hZhgRS562pv83RC6ukSAC2GMNWc+9dieh/+jDM5u5YG+NHX6VNDRHQcHwmsTHctP9LhbC3WxVw==",
       "dev": true,
       "license": "MIT",
       "engines": {