versions: Improve the loading indicator

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

Author: eth3lbert

app/styles/crate/versions.module.css

@@ -25,9 +25,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 +40,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

@@ -16,22 +16,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}}