versions: Improve the loading indicator (#10740)

This shows a loading indicator for the initial load, and a loading
button when loading more.

Author: eth3lbert

app/styles/crate/versions.module.css

@@ -16,6 +16,10 @@
         display: block;
         margin-bottom: var(--space-s);
     }
+
+    &:global(.is-empty) {
+        visibility: hidden;
+    }
 }
 .list {
     list-style: none;
@@ -25,9 +29,13 @@
     > * + * {
         margin-top: var(--space-2xs);
     }
+
+    &:global(.is-empty) {
+        min-height: calc(2 * var(--space-s) + var(--space-xl));
+    }
 }
 
-.load-more {
+.load-more, .loading {
     --shadow: 0 1px 3px light-dark(hsla(51, 90%, 42%, .35), #232321);
 
     /* TODO: move to shared */
@@ -36,13 +44,18 @@
     border: 0;
     padding: 0 var(--space-m);
 
-    button {
+    :not(:global(.is-empty)) + & button {
         border-radius: var(--space-3xs);
         box-shadow: var(--shadow);
         cursor: pointer;
         position: relative;
     }
 
+    :global(.is-empty) + & button {
+        background-color: transparent;
+        position: relative;
+    }
+
     .loading-spinner {
         display: inline-flex;
         align-items: center;

app/templates/crate/versions.hbs

@@ -1,7 +1,10 @@
 <CrateHeader @crate={{this.crate}} />
 
 <div local-class="results-meta">
-  <span local-class="page-description" data-test-page-description>
+  <span local-class="page-description"
+    class="{{if (and this.loadMoreTask.isRunning (not this.sortedVersions)) 'is-empty'}}"
+    data-test-page-description
+  >
     <strong>{{ this.sortedVersions.length }}</strong> of <strong>{{ this.crate.num_versions }}</strong>
     <strong>{{ this.crate.name }}</strong> versions since
     {{date-format this.crate.created_at 'PPP'}}
@@ -16,22 +19,27 @@
   </div>
 </div>
 
-<ul local-class="list">
+<ul local-class="list" class="{{unless this.sortedVersions 'is-empty'}}">
   {{#each this.sortedVersions as |version|}}
     <li>
       <VersionList::Row @version={{version}} local-class="row" data-test-version={{version.num}} />
     </li>
   {{/each}}
 </ul>
-{{#if this.next_page}}
+{{#if this.loadMoreTask.isRunning}}
+  <div local-class="loading">
+    <button type="button" data-test-id="loading" disabled={{this.loadMoreTask.isRunning}}
+      {{on "click" (perform this.loadMoreTask)}}
+    >
+      Loading...<LoadingSpinner local-class="loading-spinner" />
+    </button>
+  </div>
+{{else if this.next_page}}
   <div local-class="load-more">
     <button type="button" data-test-id="load-more" disabled={{this.loadMoreTask.isRunning}}
       {{on "click" (perform this.loadMoreTask)}}
     >
       Load More
-      {{#if this.loadMoreTask.isRunning}}
-        <LoadingSpinner local-class="loading-spinner" />
-      {{/if}}
     </button>
   </div>
-{{/if}}
+{{/if}}