Split "loading" placeholder from "load more" button (#10990)

Restyling the button to not be visible as a button makes the CSS more complicated than it needs to be. This commit splits the load more button into a loading placeholder for the initial load, and the actual load more button with a loading indicator for subsequent loads.

Author: Turbo87

app/styles/crate/versions.module.css

@@ -33,24 +33,30 @@
     }
 }
 
+.loading {
+    margin: var(--space-xl);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-2xs);
+
+    .loading-spinner {
+        --spinner-size: var(--space-xl);
+    }
+}
+
 .load-more {
     --shadow: 0 1px 3px light-dark(hsla(51, 90%, 42%, .35), #232321);
 
-    border: 0;
     padding: 0 var(--space-m);
 
-    :not(:global(.is-empty)) + & button {
+    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

@@ -19,27 +19,34 @@
   </div>
 </div>
 
-<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 (or this.loadMoreTask.isRunning this.next_page)}}
-  <div local-class="load-more">
-    <button
-      type="button"
-      class="load-more-button"
-      data-test-id={{if this.loadMoreTask.isRunning "loading" "load-more"}}
-      disabled={{this.loadMoreTask.isRunning}}
-      {{on "click" (perform this.loadMoreTask)}}
-    >
-      {{#if this.loadMoreTask.isRunning}}
-        Loading...<LoadingSpinner local-class="loading-spinner" />
-      {{else}}
-        Load More
-      {{/if}}
-    </button>
+{{#if this.sortedVersions}}
+  <ul local-class="list">
+    {{#each this.sortedVersions as |version|}}
+      <li>
+        <VersionList::Row @version={{version}} local-class="row" data-test-version={{version.num}} />
+      </li>
+    {{/each}}
+  </ul>
+
+  {{#if (or this.loadMoreTask.isRunning this.next_page)}}
+    <div local-class="load-more">
+      <button
+        type="button"
+        class="load-more-button"
+        data-test-id={{if this.loadMoreTask.isRunning "loading" "load-more"}}
+        disabled={{this.loadMoreTask.isRunning}}
+        {{on "click" (perform this.loadMoreTask)}}
+      >
+        {{#if this.loadMoreTask.isRunning}}
+          Loading...<LoadingSpinner local-class="loading-spinner" />
+        {{else}}
+          Load More
+        {{/if}}
+      </button>
+    </div>
+  {{/if}}
+{{else if this.loadMoreTask.isRunning}}
+  <div local-class="loading">
+    <LoadingSpinner local-class="loading-spinner" />
   </div>
 {{/if}}