Merge pull request #12884 from codyrancher/ssp-list-loading-render

Resolving some issues around rendering pagination loading on resource list pages
rancher · Jan 9, 2025 · b4f3939 · b4f3939
2 parents 374ca33 + 728bc64
commit b4f3939
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 12 deletions.
diff --git a/shell/components/PaginatedResourceTable.vue b/shell/components/PaginatedResourceTable.vue
@@ -109,7 +109,7 @@ export default defineComponent({
       v-bind="$attrs"
       :schema="schema"
       :rows="rows"
-      :alt-loading="canPaginate"
+      :alt-loading="canPaginate && !isFirstLoad"
       :loading="loading"
       :groupable="groupable"
 

diff --git a/shell/components/ResourceList/index.vue b/shell/components/ResourceList/index.vue
@@ -271,7 +271,7 @@ export default {
       v-else
       :schema="schema"
       :rows="rows"
-      :alt-loading="canPaginate"
+      :alt-loading="canPaginate && !isFirstLoad"
       :loading="loading"
       :headers="headers"
       :group-by="groupBy"

diff --git a/shell/components/SortableTable/THead.vue b/shell/components/SortableTable/THead.vue
@@ -428,10 +428,7 @@ export default {
         background-color: var(--sortable-table-header-bg);
         color: var(--body-text);
         text-align: left;
-
-        &:not(.loading) {
-          border-bottom: 1px solid var(--sortable-table-top-divider);
-        }
+        border-bottom: 1px solid var(--sortable-table-top-divider);
       }
     }
 

diff --git a/shell/components/SortableTable/index.vue b/shell/components/SortableTable/index.vue
@@ -380,8 +380,10 @@ export default {
       eventualSearchQuery = this.$route.query?.q;
     }
 
+    const isLoading = this.loading || false;
+
     return {
-      refreshButtonPhase:         ASYNC_BUTTON_STATES.WAITING,
+      refreshButtonPhase:         isLoading ? ASYNC_BUTTON_STATES.WAITING : ASYNC_BUTTON_STATES.ACTION,
       expanded:                   {},
       searchQuery,
       eventualSearchQuery,
@@ -392,7 +394,7 @@ export default {
       /**
        * The is the bool the DOM uses to show loading state. it's proxied from `loading` to avoid blipping the indicator (see usages)
        */
-      isLoading:                  false,
+      isLoading
     };
   },
 
@@ -536,9 +538,6 @@ export default {
     manualRefreshLoadingFinished() {
       const res = !!(!this.isLoading && this._didinit && this.rows?.length && !this.isManualRefreshLoading);
 
-      // Always ensure the Refresh button phase aligns with loading state (regardless of if manualRefreshLoadingFinished has changed or not)
-      this.refreshButtonPhase = !res || this.loading ? ASYNC_BUTTON_STATES.WAITING : ASYNC_BUTTON_STATES.ACTION;
-
       return res;
     },
 

diff --git a/shell/mixins/resource-fetch.js b/shell/mixins/resource-fetch.js
@@ -52,6 +52,7 @@ export default {
       incremental:                false,
       fetchedResourceType:        [],
       paginating:                 null,
+      isFirstLoad:                true,
     };
   },
 
@@ -110,7 +111,7 @@ export default {
 
     loading() {
       if (this.canPaginate) {
-        return this.paginating;
+        return this.paginating === null ? true : this.paginating;
       }
 
       return this.rows.length ? false : this.$fetchState.pending;
@@ -128,6 +129,12 @@ export default {
           });
         }
       }
+    },
+
+    loading(newValue, oldValue) {
+      if (oldValue && !newValue) {
+        this.isFirstLoad = false;
+      }
     }
   },