Auto merge of #2816 - Turbo87:spinner, r=locks

Extract `LoadingSpinner` component and convert to CSS animation

This PR first extracts a `LoadingSpinner` component, and then changes its internal implementation to use a CSS animation instead of loading and showing an animated GIF image. It also slightly improves the a11y, by adding a "Loading…" label for screenreader users.

r? `@locks`

Author: bors

app/components/api-token-row.hbs

@@ -54,7 +54,7 @@
       </button>
     {{/if}}
     {{#if this.api_token.isSaving}}
-      <img src="/assets/ajax-loader.gif" alt="Loading Spinner" data-test-saving-spinner>
+      <LoadingSpinner local-class="spinner" data-test-saving-spinner />
     {{/if}}
   </div>
 </div>

app/components/api-token-row.module.css

@@ -45,7 +45,10 @@
 .actions {
     display: flex;
     align-items: center;
-    img { margin-left: 10px }
+}
+
+.spinner {
+    margin-left: 10px
 }
 
 .save-button {

app/components/follow-button.hbs

@@ -1,6 +1,6 @@
 <button type="button" local-class="button" {{on "click" (perform this.toggleFollowTask)}} data-test-follow-button>
   {{#if (or this.followStateTask.isRunning this.toggleFollowTask.isRunning)}}
-    <img src="/assets/ajax-loader.gif" alt="Loading Spinner" data-test-spinner>
+    <LoadingSpinner data-test-spinner />
   {{else}}
     {{#if this.following}}
       Unfollow

app/components/loading-spinner.hbs

@@ -0,0 +1,6 @@
+<div
+  local-class="spinner"
+  ...attributes
+>
+  <span local-class="message">Loading…</span>
+</div>

app/components/loading-spinner.module.css

@@ -0,0 +1,33 @@
+.spinner {
+    --spinner-color: black;
+    --spinner-bg-color: rgba(0, 0, 0, .2);
+
+    display: inline-block;
+    height: 16px;
+    width: 16px;
+
+    &:after {
+        content: " ";
+        display: block;
+        box-sizing: border-box;
+        width: 16px;
+        height: 16px;
+        border-radius: 50%;
+        border: 3px solid var(--spinner-color);
+        border-color: var(--spinner-bg-color) var(--spinner-bg-color) var(--spinner-color) var(--spinner-bg-color);
+        animation: spinner 1.2s linear infinite;
+    }
+}
+
+.message {
+    composes: sr-only from '../styles/shared/a11y.module.css';
+}
+
+@keyframes spinner {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}

app/components/page-header.hbs

@@ -9,7 +9,7 @@
         <small local-class="suffix">{{@suffix}}</small>
       {{/if}}
       {{#if @showSpinner}}
-        <img src="/assets/ajax-loader.gif" alt="Loading Spinner" local-class="loading-spinner">
+        <LoadingSpinner local-class="loading-spinner" />
       {{/if}}
     </h1>
   {{/if}}

app/styles/shared/a11y.module.css

@@ -0,0 +1,10 @@
+.sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+}

app/templates/dashboard.hbs

@@ -62,7 +62,7 @@
 
       {{#if this.loadMoreTask.isRunning}}
         <span local-class='load-more'>
-          <img src="/assets/ajax-loader.gif" alt="Loading">
+          <LoadingSpinner />
         </span>
       {{else}}
         {{#if this.hasMore}}

public/assets/ajax-loader.gif

@@ -37,7 +37,7 @@ module('Acceptance | Crate following', function (hooks) {
 
     visit('/crates/nanomsg');
     await waitFor('[data-test-follow-button] [data-test-spinner]');
-    assert.dom('[data-test-follow-button]').hasText('');
+    assert.dom('[data-test-follow-button]').hasText('Loading…');
     assert.dom('[data-test-follow-button] [data-test-spinner]').exists();
 
     followingDeferred.resolve({ following: false });
@@ -50,7 +50,7 @@ module('Acceptance | Crate following', function (hooks) {
 
     click('[data-test-follow-button]');
     await waitFor('[data-test-follow-button] [data-test-spinner]');
-    assert.dom('[data-test-follow-button]').hasText('');
+    assert.dom('[data-test-follow-button]').hasText('Loading…');
     assert.dom('[data-test-follow-button] [data-test-spinner]').exists();
 
     followDeferred.resolve({ ok: true });
@@ -63,7 +63,7 @@ module('Acceptance | Crate following', function (hooks) {
 
     click('[data-test-follow-button]');
     await waitFor('[data-test-follow-button] [data-test-spinner]');
-    assert.dom('[data-test-follow-button]').hasText('');
+    assert.dom('[data-test-follow-button]').hasText('Loading…');
     assert.dom('[data-test-follow-button] [data-test-spinner]').exists();
 
     unfollowDeferred.resolve({ ok: true });