Revert spinner button for IAL2 async step

app/assets/stylesheets/components/_spinner-button.scss

@@ -1,90 +1,7 @@
-@keyframes spinner-button-dot-one {
-  0% { transform: scale(0); }
-  25% { transform: scale(1); }
-  50% { transform: scale(0); }
-}
-
-@keyframes spinner-button-dot-two {
-  0% { transform: scale(0); }
-  20% { transform: scale(0); }
-  45% { transform: scale(1); }
-  70% { transform: scale(0); }
-}
-
-@keyframes spinner-button-dot-three {
-  0% { transform: scale(0); }
-  40% { transform: scale(0); }
-  65% { transform: scale(1); }
-  90% { transform: scale(0); }
-}
-
-.spinner-button {
-  display: inline-block;
-}
-
 .spinner-button--spinner-active {
-  .spinner-button__content {
-    position: relative;
-
-    a,
-    button:not([type]),
-    [type="submit"],
-    [type="button"] {
-      background-color: color('primary-darker');
-      color: transparent;
-      opacity: 1;
-    }
-  }
+  @include u-text('center');
 
-  .spinner-button__spinner {
-    display: flex;
-    height: 12px;
-    left: 50%;
-    margin-left: -23px;
-    margin-top: -6px;
-    pointer-events: none;
-    position: absolute;
-    top: 50%;
-    width: 46px;
-  }
-
-  .spinner-button__spinner-dot {
-    height: 12px;
-    margin-left: 5px;
-    width: 12px;
-
-    &::after {
-      animation-duration: 1.25s;
-      animation-iteration-count: infinite;
-      animation-timing-function: linear;
-      background-color: color('white');
-      border-radius: 50%;
-      content: '';
-      display: block;
-      height: 100%;
-      transform: scale(0);
-      width: 100%;
-    }
-
-    &:first-child {
-      margin-left: 0;
-    }
-
-    &:nth-child(1)::after {
-      animation-name: spinner-button-dot-one;
-    }
-
-    &:nth-child(2)::after {
-      animation-name: spinner-button-dot-two;
-    }
-
-    &:nth-child(3)::after {
-      animation-name: spinner-button-dot-three;
-    }
+  .spinner-button__content {
+    @include u-display('none');
   }
 }
-
-.spinner-button__action-message {
-  @include u-text('bold', 'primary-darker');
-  @include u-margin-top(2);
-}

app/javascript/packs/spinner-button.js

@@ -2,60 +2,30 @@
  * @typedef SpinnerButtonElements
  *
  * @prop {HTMLDivElement} wrapper
+ * @prop {HTMLImageElement} spinner
  * @prop {HTMLButtonElement|HTMLInputElement|HTMLLinkElement} button
- * @prop {HTMLDivElement?} actionMessage
  */
 
-/**
- * @typedef SpinnerButtonOptions
- *
- * @prop {number} longWaitDurationMs
- */
-
-/** @type {SpinnerButtonOptions} */
-const DEFAULT_OPTIONS = {
-  longWaitDurationMs: 15000,
-};
-
 export class SpinnerButton {
   constructor(wrapper) {
     /** @type {SpinnerButtonElements} */
     this.elements = {
       wrapper,
-      button: wrapper.querySelector('a,button:not([type]),[type="submit"],[type="button"]'),
-      actionMessage: wrapper.querySelector('.spinner-button__action-message'),
-    };
-
-    this.options = {
-      ...DEFAULT_OPTIONS,
-      ...this.elements.wrapper.dataset,
+      spinner: wrapper.querySelector('.spinner-button__spinner'),
+      button: wrapper.querySelector('a,button:not([type]),[type="submit"]'),
     };
 
-    this.options.longWaitDurationMs = Number(this.options.longWaitDurationMs);
+    this.bindEvents();
   }
 
-  bind() {
+  bindEvents() {
     this.elements.button.addEventListener('click', () => this.showSpinner());
   }
 
   showSpinner() {
-    const { wrapper, button, actionMessage } = this.elements;
-    wrapper.classList.add('spinner-button--spinner-active');
-
-    // Avoid setting disabled immediately to allow click event to propagate for form submission.
-    setTimeout(() => button.setAttribute('disabled', ''), 0);
-
-    if (actionMessage) {
-      actionMessage.textContent = /** @type {string} */ (actionMessage.dataset.message);
-    }
-
-    setTimeout(() => this.handleLongWait(), this.options.longWaitDurationMs);
-  }
-
-  handleLongWait() {
-    this.elements.actionMessage?.classList.remove('usa-sr-only');
+    this.elements.wrapper.classList.add('spinner-button--spinner-active');
+    this.elements.spinner.classList.remove('usa-sr-only');
   }
 }
 
-const wrappers = [...document.querySelectorAll('.spinner-button')];
-wrappers.forEach((wrapper) => new SpinnerButton(wrapper).bind());
+[...document.querySelectorAll('.spinner-button')].forEach((wrapper) => new SpinnerButton(wrapper));

app/views/idv/cac/verify.html.erb

@@ -45,26 +45,9 @@
   <%= "#{t('in_person_proofing.forms.ssn')}: #{flow_session[:pii_from_doc][:ssn]}" %>
 
   <div class="mt4">
-    <%= render 'shared/spinner-button',
-              action_message: t('cac_proofing.info.verifying'),
-              class: 'grid-col-12 tablet:grid-col-6' do %>
-      <%= button_to(
-        t('forms.buttons.continue'),
-        url_for,
-        method: :put,
-        form: {
-          class: 'button_to read-after-submit',
-          data: {
-            form_steps_wait: '',
-            wait_step_path: idv_cac_step_path(step: :verify_wait),
-            poll_interval_ms: AppConfig.env.poll_rate_for_verify_in_seconds.to_i * 1000,
-          },
-        },
-        class: 'btn btn-primary btn-wide width-full'
-      ) %>
-    <% end %>
+    <%= button_to(t('forms.buttons.continue'), url_for, method: :put,
+                  class: 'btn btn-primary btn-wide sm-col-6 col-12') %>
   </div>
 </div>
 
-<% javascript_pack_tag_once 'form-steps-wait' %>
 <%= render 'idv/cac/start_over_or_cancel' %>

app/views/idv/doc_auth/verify.html.erb

@@ -39,27 +39,14 @@
     ) %>
   </div>
   <%= "#{t('doc_auth.forms.ssn')}: #{flow_session[:pii_from_doc][:ssn]}" %>
-  <div class="mt4">
-    <%= render 'shared/spinner-button',
-              action_message: t('doc_auth.info.verifying'),
-              class: 'grid-col-12 tablet:grid-col-6' do %>
-      <%= button_to(
-        t('forms.buttons.continue'),
-        url_for,
-        method: :put,
-        form: {
-          class: 'button_to read-after-submit',
-          data: {
-            form_steps_wait: '',
-            wait_step_path: idv_doc_auth_step_path(step: :verify_wait),
-            poll_interval_ms: AppConfig.env.poll_rate_for_verify_in_seconds.to_i * 1000,
-          },
-        },
-        class: 'btn btn-primary btn-wide width-full',
-      ) %>
-    <% end %>
+  <div class='mt4'>
+    <%= button_to(
+      t('forms.buttons.continue'),
+      url_for,
+      method: :put,
+      class: 'btn btn-primary btn-wide sm-col-6 col-12',
+    ) %>
   </div>
 </div>
 
-<% javascript_pack_tag_once 'form-steps-wait' %>
 <%= render 'idv/doc_auth/start_over_or_cancel' %>

app/views/idv/phone/new.html.erb

@@ -26,19 +26,8 @@
   <br/>
 </div>
 
-<%= validated_form_for(@idv_form,
-                       url: idv_phone_path,
-                       data: {
-                         form_steps_wait: '',
-                         wait_step_path: idv_phone_path,
-                         poll_interval_ms: AppConfig.env.poll_rate_for_verify_in_seconds.to_i * 1000,
-                       },
-                       html: {
-                         autocomplete: 'off',
-                         method: :put,
-                         role: 'form',
-                         class: 'mt2',
-                       }) do |f| %>
+<%= validated_form_for(@idv_form, url: idv_phone_path,
+                       html: { autocomplete: 'off', method: :put, role: 'form', class: 'mt2' }) do |f| %>
  <%= f.label :phone, label: t('idv.form.phone'), class: 'bold' %>
  <%= f.input :phone, required: true, input_html: { aria: { invalid: false }, class: 'sm-col-8' }, label: false,
    wrapper_html: { class: 'mr2' } %>
@@ -47,15 +36,9 @@
     <%= render 'idv/phone/verification_options' %>
   <% end %>
 
-  <%= render 'shared/spinner-button',
-             action_message: t('doc_auth.info.verifying'),
-             class: 'mt3' do %>
-    <%= f.button :submit, t('forms.buttons.continue'), class: 'btn-wide sm-col-6 col-12' %>
-  <% end %>
+  <%= f.button :submit, t('forms.buttons.continue'), class: 'btn-wide mt3 sm-col-6 col-12' %>
 <% end %>
 
 <div class="mt2 pt1 border-top">
   <%= link_to t('links.cancel'), idv_cancel_path, class: 'h5' %>
 </div>
-
-<% javascript_pack_tag_once 'form-steps-wait' %>

app/views/shared/_spinner-button.html.erb

@@ -1,30 +1,19 @@
 <%#
 yields: Button or link markup (required).
-locals:
-* action_message: Message describing the action being performed, shown visually to users when the
-                  animation has been active for a long time, and immediately to users of assistive
-                  technology.
-* class: Additional class names to add to alert wrapper.
 %>
 <%
   content = yield.presence or raise "no block content given"
-  classes = ['spinner-button']
-  classes << local_assigns[:class] if local_assigns[:class]
 %>
-<%= tag.div class: classes do %>
+<div class="spinner-button">
   <div class="spinner-button__content">
     <%= content %>
-    <span class="spinner-button__spinner" aria-hidden="true">
-      <span class="spinner-button__spinner-dot"></span>
-      <span class="spinner-button__spinner-dot"></span>
-      <span class="spinner-button__spinner-dot"></span>
-    </span>
   </div>
-  <% if local_assigns[:action_message] %>
-    <%= tag.div '',
-                role: 'status',
-                data: { message: action_message },
-                class: 'spinner-button__action-message usa-sr-only' %>
-  <% end %>
-<% end %>
+  <%= image_tag asset_url('spinner.gif'),
+                srcset: "#{asset_url('spinner@2x.gif')} 2x",
+                height: 144,
+                width: 144,
+                alt: '',
+                aria: { hidden: true },
+                class: 'spinner-button__spinner usa-sr-only' %>
+</div>
 <% javascript_pack_tag_once 'spinner-button' %>

config/locales/cac_proofing/en.yml

@@ -28,7 +28,6 @@ en:
         your PIV/CAC PIN and have you select a certificate.
       state_id_description: If you don't have a PIV or CAC, you can use a state-issued
         ID to verify your identity.
-      verifying: Verifying…
       welcome: We verify your identity to make sure you are you—not someone pretending
         to be you.  Verifying your identity also allows you to access services that
         handle Personal Identifiable Information.