diff --git a/shell/components/ResourceList/index.vue b/shell/components/ResourceList/index.vue index 28e399da679..51d9d936dc2 100644 --- 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 index c08e249dadc..1a2ef22e184 100644 --- 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 index 5bf3f6dfccd..3c9ff3df0de 100644 --- 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 index 60f1770e6c7..be3ed3e46ca 100644 --- 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; + } } },