Resolving some issues around rendering pagination loading on resource…

… list pages fixes rancher#12748
codyrancher · Dec 13, 2024 · e82c18e · e82c18e
1 parent 6e34696
commit e82c18e
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 12 deletions.
diff --git a/shell/components/ResourceList/index.vue b/shell/components/ResourceList/index.vue
@@ -270,7 +270,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
@@ -415,10 +415,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
@@ -374,8 +374,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,
@@ -386,7 +388,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
     };
   },
 
@@ -512,7 +514,7 @@ export default {
   },
 
   created() {
-    this.debouncedRefreshTableData = debounce(this.refreshTableData, 500);
+    this.debouncedRefreshTableData = debounce(this.refreshTableData, 500, { leading: true });
     this.debouncedPaginationChanged = debounce(this.paginationChanged, 50);
   },
 
@@ -530,9 +532,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
@@ -45,6 +45,7 @@ export default {
       incremental:                false,
       fetchedResourceType:        [],
       paginating:                 null,
+      isFirstLoad:                true,
     };
   },
 
@@ -73,7 +74,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;
@@ -89,6 +90,12 @@ export default {
           this.fetchPageSecondaryResources(true);
         }
       }
+    },
+
+    loading(newValue, oldValue) {
+      if (oldValue && !newValue) {
+        this.isFirstLoad = false;
+      }
     }
   },