Revert "LG-3787: Create waiting experience for address checking, ID r…

…esolution and DocAuth (#4517)"

This reverts commit 9d5f678.

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/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.

config/locales/cac_proofing/es.yml

@@ -27,7 +27,6 @@ es:
         pedirá su PIN de PIV / CAC y le pedirá que seleccione un certificado.
       state_id_description: Si no tiene un PIV o CAC, pude usar una identificación
         emitida por el estado para verificar su identidad.
-      verifying: Verificando…
       welcome: Verificamos su identidad para asegurarnos de que es usted, no alguien
         que finge ser usted. La verificación de su identidad también le permite acceder
         a los servicios que manejan información de identificación personal.

config/locales/cac_proofing/fr.yml

@@ -33,7 +33,6 @@ fr:
         un certificat.
       state_id_description: Si vous n'avez pas de PIV ou de CAC, vous pouvez utiliser
         un identifiant émis par l'État pour vérifier votre identité.
-      verifying: Vérification…
       welcome: Nous vérifions votre identité pour nous assurer que vous êtes bien
         vous, et non quelqu'un qui se fait passer pour vous. La vérification de votre
         identité vous permet également d'accéder aux services qui traitent les informations

config/locales/doc_auth/en.yml

@@ -141,7 +141,6 @@ en:
         identity.
       use_cac: Do you have a government employee ID?
       use_cac_link: Use a PIV/CAC instead
-      verifying: Verifying…
       welcome: We verify your identity to make sure you are you—not someone pretending
         to be you.  Verifying your identity lets you access services that handle sensitive
         information.

config/locales/doc_auth/es.yml

@@ -151,7 +151,6 @@ es:
         su identidad.
       use_cac: "¿Tiene un documento de identidad de empleado del gobierno?"
       use_cac_link: Utilice un PIV/CAC en su lugar
-      verifying: Verificando…
       welcome: Verificamos su identidad para asegurarnos de que usted es usted, y
         no alguien que pretende ser usted. Verificar su identidad le permite acceder
         a servicios que manejan información confidencial.

config/locales/doc_auth/fr.yml

@@ -164,7 +164,6 @@ fr:
       upload_no_image_storage: Nous ne stockons pas les images que vous téléchargez.
       use_cac: Avez-vous une carte d'identité d'employé du gouvernement?
       use_cac_link: Utilisez plutôt une PIV/CAC
-      verifying: Vérification…
       welcome: Nous vérifions votre identité pour nous assurer que vous êtes bien,
         et non quelqu'un prétendant être vous. La vérification de votre identité vous
         permet d'accéder à des services traitant des informations sensibles.