diff --git a/shell/components/PaginatedResourceTable.vue b/shell/components/PaginatedResourceTable.vue index 18618364143..db4dce7767b 100644 --- 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 index b19ceeca488..7f7d69d21a2 100644 --- 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 index 8e215dad1ff..b5d263058ca 100644 --- 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 index 5ec08d68f86..9d3d7604c7c 100644 --- 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 index 57ba466391f..fddc3227970 100644 --- 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; + } } },