From 7476a80def36b5dafbc30ece532aa43894f7c923 Mon Sep 17 00:00:00 2001
From: Machiko Yasuda <machiko@compiler.la>
Date: Wed, 12 Oct 2022 19:50:26 +0000
Subject: [PATCH 1/3] feat(spinning btn): add btn spinner to Check Status
 button

---
 benefits/core/templates/core/includes/form.html | 13 +++++++++----
 benefits/static/css/styles.css                  | 12 ++++++++++++
 2 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/benefits/core/templates/core/includes/form.html b/benefits/core/templates/core/includes/form.html
index f1cfa935e..2d0ac42e2 100644
--- a/benefits/core/templates/core/includes/form.html
+++ b/benefits/core/templates/core/includes/form.html
@@ -36,14 +36,18 @@
         {% endif %}
         <div class="col-lg-3 offset-2 offset-sm-2 offset-lg-0 col-sm-8 col-8">
           {% if recaptcha.enabled %}
-            <button class="btn btn-lg btn-primary g-recaptcha"
+            <button class="btn btn-lg btn-primary spinner-hidden g-recaptcha"
                     data-sitekey="{{ recaptcha.site_key }}"
                     data-callback="onSubmit"
                     data-action="submit">
-              {{ form.submit_value }}
+              <span class="btn-text">{{ form.submit_value }}</span>
+              <span class="spinner-border spinner-border-sm" role="status"></span>
             </button>
           {% else %}
-            <button class="btn btn-lg btn-primary" data-action="submit">{{ form.submit_value }}</button>
+            <button class="btn btn-lg btn-primary spinner-hidden" data-action="submit">
+              <span class="btn-text">{{ form.submit_value }}</span>
+              <span class="spinner-border spinner-border-sm" role="status"></span>
+            </button>
           {% endif %}
         </div>
       </div>
@@ -63,9 +67,10 @@
                 $("form[action='{{form_action}}']").on("submit", function(e) {
                     if ("{{ form.submitting_value }}" !== "") {
                         $("button[data-action='submit']", this)
+                            .removeClass("spinner-hidden")
+                            .children().first().text("{{ form.submitting_value }}")
                             .attr("role", "status")
                             .attr("disabled", "true")
-                            .text("{{ form.submitting_value }}")
                             .addClass("disabled");
                     }
                 });
diff --git a/benefits/static/css/styles.css b/benefits/static/css/styles.css
index 2a9330752..439dcf877 100644
--- a/benefits/static/css/styles.css
+++ b/benefits/static/css/styles.css
@@ -282,6 +282,12 @@ footer .footer-links li a:visited {
   padding: var(--primary-button-padding);
 }
 
+.btn-text {
+  letter-spacing: 0.02em;
+  font-weight: var(--medium-font-weight);
+  font-size: calc(20rem / 16);
+}
+
 /* A button that actually is a text link */
 /* TODO: Check if this is actually really used anymore */
 .btn-link {
@@ -295,6 +301,12 @@ footer .footer-links li a:visited {
   border-width: 2px;
 }
 
+/* Custom button: Loading spinner */
+
+.spinner-hidden .spinner-border {
+  display: none;
+}
+
 /* Custom button: Login.gov Button with text and SVG */
 /* Used on Eligibility Start */
 

From 3469e9b9d3716574baec6de8da3d0119aee26bcf Mon Sep 17 00:00:00 2001
From: Machiko Yasuda <machiko@compiler.la>
Date: Wed, 12 Oct 2022 20:06:18 +0000
Subject: [PATCH 2/3] fix(spinner-button): add margin around the spinner;
 center

---
 benefits/core/templates/core/includes/form.html | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/benefits/core/templates/core/includes/form.html b/benefits/core/templates/core/includes/form.html
index 2d0ac42e2..13866e43c 100644
--- a/benefits/core/templates/core/includes/form.html
+++ b/benefits/core/templates/core/includes/form.html
@@ -36,17 +36,17 @@
         {% endif %}
         <div class="col-lg-3 offset-2 offset-sm-2 offset-lg-0 col-sm-8 col-8">
           {% if recaptcha.enabled %}
-            <button class="btn btn-lg btn-primary spinner-hidden g-recaptcha"
+            <button class="btn btn-lg btn-primary spinner-hidden d-flex justify-content-center align-items-center g-recaptcha"
                     data-sitekey="{{ recaptcha.site_key }}"
                     data-callback="onSubmit"
                     data-action="submit">
               <span class="btn-text">{{ form.submit_value }}</span>
-              <span class="spinner-border spinner-border-sm" role="status"></span>
+              <span class="spinner-border spinner-border-sm m-1" role="status"></span>
             </button>
           {% else %}
-            <button class="btn btn-lg btn-primary spinner-hidden" data-action="submit">
+            <button class="btn btn-lg btn-primary spinner-hidden d-flex justify-content-center align-items-center" data-action="submit">
               <span class="btn-text">{{ form.submit_value }}</span>
-              <span class="spinner-border spinner-border-sm" role="status"></span>
+              <span class="spinner-border spinner-border-sm m-1" role="status"></span>
             </button>
           {% endif %}
         </div>

From 619e59019dedddc911fb39fbeef1133de6b7f7ff Mon Sep 17 00:00:00 2001
From: Machiko Yasuda <machiko@compiler.la>
Date: Thu, 13 Oct 2022 18:30:20 +0000
Subject: [PATCH 3/3] style(spinner): set margin and make thinner

---
 benefits/core/templates/core/includes/form.html | 4 ++--
 benefits/static/css/styles.css                  | 5 +++++
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/benefits/core/templates/core/includes/form.html b/benefits/core/templates/core/includes/form.html
index 13866e43c..8d6c73310 100644
--- a/benefits/core/templates/core/includes/form.html
+++ b/benefits/core/templates/core/includes/form.html
@@ -41,12 +41,12 @@
                     data-callback="onSubmit"
                     data-action="submit">
               <span class="btn-text">{{ form.submit_value }}</span>
-              <span class="spinner-border spinner-border-sm m-1" role="status"></span>
+              <span class="spinner-border spinner-border-sm" role="status"></span>
             </button>
           {% else %}
             <button class="btn btn-lg btn-primary spinner-hidden d-flex justify-content-center align-items-center" data-action="submit">
               <span class="btn-text">{{ form.submit_value }}</span>
-              <span class="spinner-border spinner-border-sm m-1" role="status"></span>
+              <span class="spinner-border spinner-border-sm" role="status"></span>
             </button>
           {% endif %}
         </div>
diff --git a/benefits/static/css/styles.css b/benefits/static/css/styles.css
index 439dcf877..a28af7eaf 100644
--- a/benefits/static/css/styles.css
+++ b/benefits/static/css/styles.css
@@ -307,6 +307,11 @@ footer .footer-links li a:visited {
   display: none;
 }
 
+.spinner-border {
+  border-width: 3px;
+  margin-left: 15px;
+}
+
 /* Custom button: Login.gov Button with text and SVG */
 /* Used on Eligibility Start */