Fix incorrect loading spinner on the Lists UI. Closes #1822.

Author: knadh

frontend/src/api/index.js

@@ -127,7 +127,7 @@ export const queryLists = (params) => http.get(
   '/api/lists',
   {
     params: (!params ? { per_page: 'all' } : params),
-    loading: models.lists,
+    loading: models.listsFull,
   },
 );
 

frontend/src/constants.js

@@ -2,7 +2,12 @@ export const models = Object.freeze({
   serverConfig: 'serverConfig',
   lang: 'lang',
   dashboard: 'dashboard',
+  // This loading state is used across all contexts where lists are loaded
+  // via the instant "minimal" API.
   lists: 'lists',
+  // This is used only on the lists page where lists are loaded with full
+  // context (subscriber counts), which can be slow and expensive.
+  listsFull: 'listsFull',
   subscribers: 'subscribers',
   campaigns: 'campaigns',
   templates: 'templates',

frontend/src/views/Lists.vue

@@ -16,7 +16,7 @@
       </div>
     </header>
 
-    <b-table :data="lists.results" :loading="loading.lists" hoverable default-sort="createdAt" paginated
+    <b-table :data="lists.results" :loading="loading.listsFull" hoverable default-sort="createdAt" paginated
       backend-pagination pagination-position="both" @page-change="onPageChange" :current-page="queryParams.page"
       :per-page="lists.perPage" :total="lists.total" backend-sorting @sort="onSort">
       <template #top-left>
@@ -142,7 +142,7 @@
         </div>
       </b-table-column>
 
-      <template #empty v-if="!loading.lists">
+      <template #empty v-if="!loading.listsFull">
         <empty-placeholder />
       </template>
     </b-table>