feat(spinning btn): add btn spinner to Check Status button

cal-itp · Oct 13, 2022 · 7476a80 · 7476a80
1 parent 38da34e
commit 7476a80
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 4 deletions.
diff --git 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
@@ -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 */