Add manual refresh + incremental loading to all list views (#6908)

* removing check for restriction of types on incremental+manual + update masthead to incorportate directly the ResourceLoadingIndicator so that it can used by list views with custom mastheads + move catalog.clusterrepo typedescription to its rightful component and delete custom list view + updating custom list views to use resource-fetch mixin

* continue updating custom list views to use resource-fetch mixin

* finish updating custom list views to use resource-fetch mixin + prevent error on loadAdd mutation where type is not set in store yet + code cleanup

* address PR comments

* update all custom list views to use loading prop on ResourceTable rather than Loading component + use getter to get incremental updates propagated from the store into the table itself + other minor fixes

* revert changes to mutation loadAdd as check is not needed

* revert all changes to shell/list/harvesterhci.io.management.cluster.vue

* revert deletion of clusterrepo due to CI/CD validation of plugin

* add manual + refresh to namespaces list + fix issue where switching between workspaces results in the manual refresh button continually spinning

* move rows and loading flag to resource-fetch and do necessary changes to custom lists to minimize code changes for the future

* Minor fixes
- Match existing loading check in projectnamespace list (had a check for currentCluster, probably not needed but added just in case)
- Fixed masthead loading indicator for management users and features

Co-authored-by: Alexandre Alves <aalves@Alexandres-MacBook-Pro.local>
Co-authored-by: Alexandre Alves <aalves@Alexandres-MBP.lan>
Co-authored-by: Richard Cox <richard.cox@suse.com>

shell/assets/translations/en-us.yaml

@@ -6174,7 +6174,7 @@ performance:
     label: Incremental Loading
     setting: You can configure the threshold above which incremental loading will be used.
     description: |-
-      When enabled, resources will appear more quickly, but it may take slightly longer to load the entire set of resources. This setting only applies to the following resources: Pods, Deployments, Cron Jobs, Daemon Sets, Jobs, Stateful Sets, Replica Sets, Replication Controllers, Workloads and Secrets.
+      When enabled, resources will appear more quickly, but it may take slightly longer to load the entire set of resources. This setting only applies to resources that come from the Kubernetes API
     checkboxLabel: Enable incremental loading
     inputLabel: Resource Threshold
   manualRefresh:
@@ -6183,7 +6183,7 @@ performance:
     setting: You can configure a threshold above which manual refresh will be enabled.
     buttonTooltip: Refresh list
     description: |-
-      When enabled, list data will not auto-update but instead the user must manually trigger a list-view refresh. This setting only applies to the following resources: Pods, Deployments, Cron Jobs, Daemon Sets, Jobs, Stateful Sets, Replica Sets, Replication Controllers, Workloads and Secrets.
+      When enabled, list data will not auto-update but instead the user must manually trigger a list-view refresh. This setting only applies to resources that come from the Kubernetes API
     checkboxLabel: Enable manual refresh of data for lists
     inputLabel: Resource Threshold
   websocketNotification:

shell/components/ExplorerProjectsNamespaces.vue

@@ -10,12 +10,14 @@ import { mapPref, GROUP_RESOURCES, ALL_NAMESPACES } from '@shell/store/prefs';
 import MoveModal from '@shell/components/MoveModal';
 import { defaultTableSortGenerationFn } from '@shell/components/ResourceTable.vue';
 import { NAMESPACE_FILTER_ALL_ORPHANS } from '@shell/utils/namespace-filter';
+import ResourceFetch from '@shell/mixins/resource-fetch';
 
 export default {
   name:       'ListProjectNamespace',
   components: {
     Masthead, MoveModal, ResourceTable
   },
+  mixins: [ResourceFetch],
 
   props: {
     createProjectLocationOverride: {
@@ -42,14 +44,15 @@ export default {
       return;
     }
 
-    this.namespaces = await this.$store.dispatch(`${ inStore }/findAll`, { type: NAMESPACE });
+    await this.$fetchType(NAMESPACE);
     this.projects = await this.$store.dispatch('management/findAll', { type: MANAGEMENT.PROJECT, opt: { force: true } });
   },
 
   data() {
     return {
+      loadResources:                [NAMESPACE],
+      loadIndeterminate:            true,
       schema:                       null,
-      namespaces:                   [],
       projects:                     [],
       projectSchema:                null,
       MANAGEMENT,
@@ -66,6 +69,17 @@ export default {
 
   computed: {
     ...mapGetters(['currentCluster', 'currentProduct']),
+    namespaces() {
+      const inStore = this.$store.getters['currentStore'](NAMESPACE);
+
+      return this.$store.getters[`${ inStore }/all`](NAMESPACE);
+    },
+    loading() {
+      return !this.currentCluster || this.namespaces.length ? false : this.$fetchState.pending;
+    },
+    showIncrementalLoadingIndicator() {
+      return this.perfConfig?.incrementalLoading?.enabled;
+    },
     isNamespaceCreatable() {
       return (this.schema?.collectionMethods || []).includes('POST');
     },
@@ -309,6 +323,9 @@ export default {
       :favorite-resource="VIRTUAL_TYPES.PROJECT_NAMESPACES"
       :create-location="createProjectLocation"
       :create-button-label="t('projectNamespaces.createProject')"
+      :show-incremental-loading-indicator="showIncrementalLoadingIndicator"
+      :load-resources="loadResources"
+      :load-indeterminate="loadIndeterminate"
     />
     <ResourceTable
       ref="table"
@@ -319,7 +336,7 @@ export default {
       :rows="filteredRows"
       :groupable="true"
       :sort-generation-fn="sortGenerationFn"
-      :loading="$fetchState.pending || !currentCluster"
+      :loading="loading"
       group-tooltip="resourceTable.groupBy.project"
       key-field="_key"
       v-on="$listeners"

shell/components/ResourceList/Masthead.vue

@@ -4,6 +4,7 @@ import Favorite from '@shell/components/nav/Favorite';
 import TypeDescription from '@shell/components/TypeDescription';
 import { get } from '@shell/utils/object';
 import { AS, _YAML } from '@shell/config/query-params';
+import ResourceLoadingIndicator from './ResourceLoadingIndicator';
 
 /**
  * Resource List Masthead component.
@@ -15,6 +16,7 @@ export default {
   components: {
     Favorite,
     TypeDescription,
+    ResourceLoadingIndicator,
   },
   props: {
     resource: {
@@ -53,6 +55,20 @@ export default {
       type:    String,
       default: null
     },
+    loadResources: {
+      type:    Array,
+      default: () => []
+    },
+
+    loadIndeterminate: {
+      type:    Boolean,
+      default: false
+    },
+
+    showIncrementalLoadingIndicator: {
+      type:    Boolean,
+      default: false
+    },
 
     /**
      * Inherited global identifier prefix for tests
@@ -155,7 +171,11 @@ export default {
       <h1 class="m-0">
         {{ _typeDisplay }} <Favorite v-if="isExplorer" :resource="favoriteResource || resource" />
       </h1>
-      <slot name="header"></slot>
+      <ResourceLoadingIndicator
+        v-if="showIncrementalLoadingIndicator"
+        :resources="loadResources"
+        :indeterminate="loadIndeterminate"
+      />
     </div>
     <div class="actions-container">
       <slot name="actions">

shell/components/ResourceList/ResourceLoadingIndicator.vue

@@ -16,10 +16,6 @@ export default {
     indeterminate: {
       type:    Boolean,
       default: false,
-    },
-    rows: {
-      type:     Array,
-      default:  undefined,
     }
   },
 
@@ -32,10 +28,6 @@ export default {
   computed: {
     // Count of rows - either from the data provided or from the rows for the first resource
     rowsCount() {
-      if (this.rows) {
-        return this.rows.length;
-      }
-
       if (this.resources.length > 0) {
         const existingData = this.$store.getters[`${ this.inStore }/all`](this.resources[0]) || [];
 

shell/components/ResourceList/index.vue

@@ -3,7 +3,7 @@ import ResourceTable from '@shell/components/ResourceTable';
 import Loading from '@shell/components/Loading';
 import Masthead from './Masthead';
 import ResourceLoadingIndicator from './ResourceLoadingIndicator';
-import ResourceFetch, { TYPES_RESTRICTED } from '@shell/mixins/resource-fetch';
+import ResourceFetch from '@shell/mixins/resource-fetch';
 
 export default {
   components: {
@@ -43,8 +43,8 @@ export default {
       if (component?.$loadingResources) {
         const { loadResources, loadIndeterminate } = component?.$loadingResources(this.$route, this.$store);
 
-        this.loadResources = loadResources;
+        this.loadResources = loadResources || [resource];
-        this.loadIndeterminate = loadIndeterminate;
+        this.loadIndeterminate = loadIndeterminate || false;
       }
     }
 
@@ -55,11 +55,7 @@ export default {
         return;
       }
 
-      if (TYPES_RESTRICTED.includes(resource)) {
+      await this.$fetchType(resource);
-        this.rows = await this.$fetchType(resource);
-      } else {
-        this.rows = await store.dispatch(`${ inStore }/findAll`, { type: resource });
-      }
     }
   },
 
@@ -75,13 +71,10 @@ export default {
 
     const showMasthead = getters[`type-map/optionsFor`](resource).showListMasthead;
 
-    const existingData = getters[`${ inStore }/all`](resource) || [];
-
     return {
       inStore,
       schema,
       hasListComponent,
-      hasData:           existingData.length > 0,
       showMasthead:      showMasthead === undefined ? true : showMasthead,
       resource,
       // manual refresh
@@ -89,7 +82,6 @@ export default {
       watch:             false,
       force:             false,
       // Provided by fetch later
-      rows:              [],
       customTypeDisplay: null,
       // incremental loading
       loadResources:     [resource],
@@ -111,10 +103,6 @@ export default {
       return this.$store.getters['type-map/groupByFor'](this.schema);
     },
 
-    loading() {
-      return this.hasData ? false : this.$fetchState.pending;
-    },
-
     showIncrementalLoadingIndicator() {
       return this.perfConfig?.incrementalLoading?.enabled;
     }
@@ -142,18 +130,16 @@ export default {
       :type-display="customTypeDisplay"
       :schema="schema"
       :resource="resource"
+      :show-incremental-loading-indicator="showIncrementalLoadingIndicator"
+      :load-resources="loadResources"
+      :load-indeterminate="loadIndeterminate"
     >
-      <template v-slot:header>
-        <ResourceLoadingIndicator
-          v-if="showIncrementalLoadingIndicator"
-          :resources="loadResources"
-          :indeterminate="loadIndeterminate"
-        />
-      </template>
     </Masthead>
     <div v-if="hasListComponent">
       <component
         :is="listComponent"
+        :incremental-loading-indicator="showIncrementalLoadingIndicator"
+        :rows="rows"
         v-bind="$data"
       />
     </div>

shell/components/SortableTable/index.vue

@@ -368,16 +368,19 @@ export default {
       immediate: true
     },
 
-    isManualRefreshLoading(neu, old) {
+    isManualRefreshLoading: {
-      this.currentPhase = neu ? ASYNC_BUTTON_STATES.WAITING : ASYNC_BUTTON_STATES.ACTION;
+      handler(neu, old) {
+        this.currentPhase = neu ? ASYNC_BUTTON_STATES.WAITING : ASYNC_BUTTON_STATES.ACTION;
 
-      // setTimeout is needed so that this is pushed further back on the JS computing queue
+        // setTimeout is needed so that this is pushed further back on the JS computing queue
-      // because nextTick isn't enough to capture the DOM update for the manual refresh only scenario
+        // because nextTick isn't enough to capture the DOM update for the manual refresh only scenario
-      if (old && !neu) {
+        if (old && !neu) {
-        this.manualRefreshTimer = setTimeout(() => {
+          this.manualRefreshTimer = setTimeout(() => {
-          this.watcherUpdateLiveAndDelayed(neu, old);
+            this.watcherUpdateLiveAndDelayed(neu, old);
-        }, 1000);
+          }, 1000);
-      }
+        }
+      },
+      immediate: true
     }
   },
 

shell/components/TypeDescription.vue

@@ -1,7 +1,9 @@
 <script>
+import { mapGetters } from 'vuex';
 import { Banner } from '@components/Banner';
 import { HIDE_DESC, mapPref } from '@shell/store/prefs';
 import { addObject } from '@shell/utils/array';
+import { CATALOG } from '@shell/config/types';
 
 export default {
   components: { Banner },
@@ -14,10 +16,17 @@ export default {
   },
 
   computed: {
+    ...mapGetters(['currentCluster']),
     hideDescriptions: mapPref(HIDE_DESC),
 
     typeDescriptionKey() {
-      const key = `typeDescription."${ this.resource }"`;
+      let key;
+
+      if (this.resource === CATALOG.CLUSTER_REPO) {
+        key = !this.currentCluster || this.currentCluster.isLocal ? 'typeDescription."catalog.cattle.io.clusterrepo.local"' : 'typeDescription."catalog.cattle.io.clusterrepo"';
+      } else {
+        key = `typeDescription."${ this.resource }"`;
+      }
 
       if ( this.hideDescriptions.includes(this.resource) || this.hideDescriptions.includes('ALL') ) {
         return false;

shell/components/fleet/FleetClusters.vue

@@ -16,6 +16,11 @@ export default {
       type:    Object,
       default: null,
     },
+
+    loading: {
+      type:    Boolean,
+      default: false,
+    },
   },
 
   computed: {
@@ -80,6 +85,7 @@ export default {
     :schema="schema"
     :headers="headers"
     :rows="rows"
+    :loading="loading"
     key-field="_key"
     v-on="$listeners"
   >

shell/components/fleet/FleetRepos.vue

@@ -28,6 +28,11 @@ export default {
       type:     Object,
       required: true,
     },
+
+    loading: {
+      type:     Boolean,
+      required: false,
+    },
   },
 
   computed: {
@@ -89,13 +94,14 @@ export default {
 
 <template>
   <div>
-    <FleetIntro v-if="noRows" />
+    <FleetIntro v-if="noRows && !loading" />
     <ResourceTable
       v-if="!noRows"
       v-bind="$attrs"
       :schema="schema"
       :headers="headers"
       :rows="rows"
+      :loading="loading"
       key-field="_key"
       v-on="$listeners"
     >

shell/config/product/manager.js

@@ -120,8 +120,6 @@ export function init(store) {
   weightType(CAPI.MACHINE, 1, true);
   weightType(CATALOG.CLUSTER_REPO, 0, true);
 
-  configureType(CATALOG.CLUSTER_REPO, { showListMasthead: false });
-
   basicType([
     CAPI.MACHINE_DEPLOYMENT,
     CAPI.MACHINE_SET,

shell/list/catalog.cattle.io.app.vue

@@ -1,10 +1,11 @@
 <script>
 import ResourceTable from '@shell/components/ResourceTable';
-import Loading from '@shell/components/Loading';
+import ResourceFetch from '@shell/mixins/resource-fetch';
 
 export default {
   name:       'ListApps',
-  components: { Loading, ResourceTable },
+  components: { ResourceTable },
+  mixins:     [ResourceFetch],
 
   props: {
     resource: {
@@ -21,18 +22,18 @@ export default {
   async fetch() {
     await this.$store.dispatch('catalog/load');
 
-    this.rows = await this.$store.dispatch('cluster/findAll', { type: this.resource });
+    await this.$fetchType(this.resource);
-  },
-
-  data() {
-    return { rows: null };
   },
 };
 </script>
 
 <template>
-  <Loading v-if="$fetchState.pending" />
+  <ResourceTable
-  <ResourceTable v-else class="apps" :schema="schema" :rows="rows">
+    class="apps"
+    :schema="schema"
+    :rows="rows"
+    :loading="loading"
+  >
     <template #cell:upgrade="{row}">
       <span v-if="row.upgradeAvailable" class="badge-state bg-warning hand" @click="row.goToUpgrade(row.upgradeAvailable)">
         {{ row.upgradeAvailable }}

shell/list/catalog.cattle.io.clusterrepo.vue

@@ -1,64 +1,24 @@
 <script>
-import { mapGetters } from 'vuex';
 import ResourceTable from '@shell/components/ResourceTable';
-import Masthead from '@shell/components/ResourceList/Masthead';
-import { Banner } from '@components/Banner';
-import { HIDE_DESC, mapPref } from '@shell/store/prefs';
-import { addObject } from '@shell/utils/array';
-
 export default {
   name:       'ListClusterReposApps',
-  components: {
+  components: { ResourceTable },
-    Banner,
+  props:      {
-    Masthead,
-    ResourceTable
-  },
-
-  props: {
     resource: {
       type:     String,
       required: true,
     },
-
     schema: {
       type:     Object,
       required: true,
     },
-
     rows: {
       type:     Array,
       required: true,
     },
-  },
+    loading: {
-
+      type:     Boolean,
-  computed: {
+      required: false,
-    ...mapGetters(['currentCluster']),
-    hideDescriptions: mapPref(HIDE_DESC),
-
-    typeDescriptionKey() {
-      // Show a different message to cover support for RKE templates in the local cluster
-      // (no current cluster means catalog requests default to local)
-      const key = !this.currentCluster || this.currentCluster.isLocal ? 'typeDescription."catalog.cattle.io.clusterrepo.local"' : 'typeDescription."catalog.cattle.io.clusterrepo"';
-
-      if ( this.hideDescriptions.includes(this.resource) || this.hideDescriptions.includes('ALL') ) {
-        return false;
-      }
-
-      if ( this.$store.getters['i18n/exists'](key) ) {
-        return key;
-      }
-
-      return false;
-    }
-  },
-
-  methods: {
-    hideTypeDescription() {
-      const neu = this.hideDescriptions.slice();
-
-      addObject(neu, this.resource);
-
-      this.hideDescriptions = neu;
     },
   }
 };
@@ -66,25 +26,10 @@ export default {
 
 <template>
   <div>
-    <Masthead
-      :schema="schema"
-      :resource="resource"
-    >
-      <template #typeDescription>
-        <Banner
-          v-if="typeDescriptionKey"
-          class="type-banner mb-20 mt-0"
-          color="info"
-          :closable="true"
-          :label-key="typeDescriptionKey"
-          @close="hideTypeDescription"
-        />
-      </template>
-    </Masthead>
-
     <ResourceTable
       :schema="schema"
       :rows="rows"
+      :loading="loading"
     />
   </div>
 </template>

shell/list/cis.cattle.io.clusterscan.vue

@@ -1,13 +1,13 @@
 <script>
 import ResourceTable from '@shell/components/ResourceTable';
-import Loading from '@shell/components/Loading';
 import { get } from '@shell/utils/object';
 import { AGE } from '@shell/config/table-headers';
+import ResourceFetch from '@shell/mixins/resource-fetch';
 
 export default {
-  components: { Loading, ResourceTable },
+  components: { ResourceTable },
-
+  mixins:     [ResourceFetch],
-  props: {
+  props:      {
     resource: {
       type:     String,
       required: true,
@@ -20,11 +20,7 @@ export default {
   },
 
   async fetch() {
-    this.rows = await this.$store.dispatch('cluster/findAll', { type: this.resource });
+    await this.$fetchType(this.resource);
-  },
-
-  data() {
-    return { rows: null };
   },
 
   computed: {
@@ -53,12 +49,16 @@ export default {
       } else {
         return headersFromSchema;
       }
-    }
+    },
   },
 };
 </script>
 
 <template>
-  <Loading v-if="$fetchState.pending" />
+  <ResourceTable
-  <ResourceTable v-else :schema="schema" :rows="rows" :headers="headers" />
+    :schema="schema"
+    :rows="rows"
+    :headers="headers"
+    :loading="loading"
+  />
 </template>

shell/list/fleet.cattle.io.bundle.vue

@@ -1,8 +1,8 @@
 <script>
 import { FLEET } from '@shell/config/types';
 import { Banner } from '@components/Banner';
-import Loading from '@shell/components/Loading';
 import ResourceTable from '@shell/components/ResourceTable';
+import ResourceFetch from '@shell/mixins/resource-fetch';
 import {
   AGE,
   STATE,
@@ -12,11 +12,13 @@ import { isHarvesterCluster } from '@shell/utils/cluster';
 
 export default {
   name:       'ListBundle',
-  components: {
+  components: { Banner, ResourceTable },
-    Banner, Loading, ResourceTable
+  mixins:     [ResourceFetch],
-  },
+  props:      {
-
+    resource: {
-  props: {
+      type:     String,
+      required: true,
+    },
     schema: {
       type:     Object,
       required: true,
@@ -24,15 +26,12 @@ export default {
   },
 
   async fetch() {
-    this.allBundles = await this.$store.dispatch('management/findAll', { type: FLEET.BUNDLE });
+    await this.$fetchType(FLEET.BUNDLE);
     this.allFleet = await this.$store.dispatch('management/findAll', { type: FLEET.CLUSTER });
   },
 
   data() {
-    return {
+    return { allFleet: [] };
-      allFleet:   [],
-      allBundles: [],
-    };
   },
 
   computed: {
@@ -51,7 +50,7 @@ export default {
     bundles() {
       const harvester = this.harvesterClusters;
 
-      return this.allBundles.filter((bundle) => {
+      return this.rows.filter((bundle) => {
         const targets = bundle.spec?.targets || [];
 
         // Filter out any bundle that has one target whose cluster is a harvester cluster
@@ -64,7 +63,7 @@ export default {
     },
 
     hidden() {
-      return this.allBundles.length - this.bundles.length;
+      return this.rows.length - this.bundles.length;
     },
 
     headers() {
@@ -84,25 +83,31 @@ export default {
       return out;
     },
   },
+
+  // override with relevant info for the loading indicator since this doesn't use it's own masthead
+  $loadingResources() {
+    return {
+      loadResources:     [FLEET.BUNDLE],
+      loadIndeterminate: true, // results are filtered so we wouldn't get the correct count on indicator...
+    };
+  },
 };
 </script>
 
 <template>
   <div>
-    <Loading v-if="$fetchState.pending" />
+    <Banner v-if="hidden" color="info" :label="t('fleet.bundles.harvester', {count: hidden} )" />
-    <div v-else>
+    <ResourceTable
-      <Banner v-if="hidden" color="info" :label="t('fleet.bundles.harvester', {count: hidden} )" />
+      :schema="schema"
-      <ResourceTable
+      :headers="headers"
-        :schema="schema"
+      :rows="bundles"
-        :headers="headers"
+      :loading="loading"
-        :rows="bundles"
+    >
-      >
+      <template #cell:deploymentsReady="{row}">
-        <template #cell:deploymentsReady="{row}">
+        <span v-if="row.status.summary.desiredReady != row.status.summary.ready" class="text-warning">
-          <span v-if="row.status.summary.desiredReady != row.status.summary.ready" class="text-warning">
+          {{ row.status.summary.ready }}/{{ row.status.summary.desiredReady }}</span>
-            {{ row.status.summary.ready }}/{{ row.status.summary.desiredReady }}</span>
+        <span v-else>{{ row.status.summary.desiredReady }}</span>
-          <span v-else>{{ row.status.summary.desiredReady }}</span>
+      </template>
-        </template>
+    </ResourceTable>
-      </ResourceTable>
-    </div>
   </div>
 </template>

shell/list/fleet.cattle.io.cluster.vue

@@ -1,17 +1,19 @@
 <script>
 import FleetClusters from '@shell/components/fleet/FleetClusters';
 import { FLEET, MANAGEMENT } from '@shell/config/types';
-import Loading from '@shell/components/Loading';
 import { isHarvesterCluster } from '@shell/utils/cluster';
 import { Banner } from '@components/Banner';
+import ResourceFetch from '@shell/mixins/resource-fetch';
 
 export default {
   name:       'ListCluster',
-  components: {
+  components: { Banner, FleetClusters },
-    Banner, FleetClusters, Loading
+  mixins:     [ResourceFetch],
-  },
+  props:      {
-
+    resource: {
-  props: {
+      type:     String,
+      required: true,
+    },
     schema: {
       type:     Object,
       required: true,
@@ -21,19 +23,16 @@ export default {
   async fetch() {
     await this.$store.dispatch('management/findAll', { type: FLEET.WORKSPACE });
     this.allMgmt = await this.$store.dispatch('management/findAll', { type: MANAGEMENT.CLUSTER });
-    this.allFleet = await this.$store.dispatch('management/findAll', { type: FLEET.CLUSTER });
+    await this.$fetchType(FLEET.CLUSTER);
   },
 
   data() {
-    return {
+    return { allMgmt: [] };
-      allMgmt:  null,
-      allFleet: null,
-    };
   },
 
   computed: {
     allClusters() {
-      const out = this.allFleet.slice();
+      const out = this.rows.slice();
 
       const known = {};
 
@@ -50,7 +49,7 @@ export default {
       return out;
     },
 
-    rows() {
+    filteredRows() {
       return this.fleetClusters.filter(c => !isHarvesterCluster(c));
     },
 
@@ -59,21 +58,26 @@ export default {
     },
 
     hiddenHarvesterCount() {
-      return this.fleetClusters.length - this.rows.length;
+      return this.fleetClusters.length - this.filteredRows.length;
     },
   },
+  // override with relevant info for the loading indicator since this doesn't use it's own masthead
+  $loadingResources() {
+    return {
+      loadResources:     [FLEET.CLUSTER],
+      loadIndeterminate: true, // results are filtered so we wouldn't get the correct count on indicator...
+    };
+  },
 };
 </script>
 
 <template>
   <div>
-    <Loading v-if="$fetchState.pending" />
+    <Banner v-if="hiddenHarvesterCount" color="info" :label="t('fleet.clusters.harvester', {count: hiddenHarvesterCount} )" />
-    <div v-else>
+    <FleetClusters
-      <Banner v-if="hiddenHarvesterCount" color="info" :label="t('fleet.clusters.harvester', {count: hiddenHarvesterCount} )" />
+      :rows="filteredRows"
-      <FleetClusters
+      :schema="schema"
-        :rows="rows"
+      :loading="loading"
-        :schema="schema"
+    />
-      />
-    </div>
   </div>
 </template>

shell/list/fleet.cattle.io.clustergroup.vue

@@ -23,6 +23,11 @@ export default {
       type:     Array,
       required: true,
     },
+
+    loading: {
+      type:     Boolean,
+      required: false,
+    },
   },
 
   computed: {
@@ -57,6 +62,7 @@ export default {
     :schema="schema"
     :headers="headers"
     :rows="rows"
+    :loading="loading"
     key-field="_key"
     v-on="$listeners"
   >

shell/list/fleet.cattle.io.clusterregistrationtoken.vue

@@ -1,17 +1,19 @@
 <script>
 import { FLEET } from '@shell/config/types';
 import { Banner } from '@components/Banner';
-import Loading from '@shell/components/Loading';
 import ResourceTable from '@shell/components/ResourceTable';
 import { isHarvesterCluster } from '@shell/utils/cluster';
+import ResourceFetch from '@shell/mixins/resource-fetch';
 
 export default {
   name:       'ListClusterGroup',
-  components: {
+  components: { Banner, ResourceTable },
-    Banner, Loading, ResourceTable
+  mixins:     [ResourceFetch],
-  },
+  props:      {
-
+    resource: {
-  props: {
+      type:     String,
+      required: true,
+    },
     schema: {
       type:     Object,
       required: true,
@@ -19,15 +21,12 @@ export default {
   },
 
   async fetch() {
-    this.allTokens = await this.$store.dispatch('management/findAll', { type: FLEET.TOKEN });
+    await this.$fetchType(FLEET.TOKEN);
     this.allFleet = await this.$store.dispatch('management/findAll', { type: FLEET.CLUSTER });
   },
 
   data() {
-    return {
+    return { allFleet: [] };
-      allFleet:  null,
-      allTokens: null,
-    };
   },
 
   computed: {
@@ -45,7 +44,7 @@ export default {
     tokens() {
       const harvester = this.harvesterClusters;
 
-      return this.allTokens.filter((token) => {
+      return this.rows.filter((token) => {
         const refs = token.metadata?.ownerReferences || [];
 
         for (const owner of refs) {
@@ -59,23 +58,28 @@ export default {
     },
 
     hidden() {
-      return this.allTokens.length - this.tokens.length;
+      return this.rows.length - this.tokens.length;
     }
-  }
+  },
+  // override with relevant info for the loading indicator since this doesn't use it's own masthead
+  $loadingResources() {
+    return {
+      loadResources:     [FLEET.TOKEN],
+      loadIndeterminate: true, // results are filtered so we wouldn't get the correct count on indicator...
+    };
+  },
 };
 </script>
 
 <template>
   <div>
-    <Loading v-if="$fetchState.pending" />
+    <Banner v-if="hidden" color="info" :label="t('fleet.tokens.harvester', {count: hidden} )" />
-    <div v-else>
+    <ResourceTable
-      <Banner v-if="hidden" color="info" :label="t('fleet.tokens.harvester', {count: hidden} )" />
+      v-bind="$attrs"
-      <ResourceTable
+      :schema="schema"
-        v-bind="$attrs"
+      :rows="tokens"
-        :schema="schema"
+      :loading="loading"
-        :rows="tokens"
+    >
-      >
+    </ResourceTable>
-      </ResourceTable>
-    </div>
   </div>
 </template>

shell/list/fleet.cattle.io.gitrepo.vue

@@ -1,18 +1,17 @@
 <script>
 import FleetRepos from '@shell/components/fleet/FleetRepos';
 import Masthead from '@shell/components/ResourceList/Masthead';
-import Loading from '@shell/components/Loading';
 import { FLEET } from '@shell/config/types';
+import ResourceFetch from '@shell/mixins/resource-fetch';
 
 export default {
   name:       'ListGitRepo',
   components: {
-    Loading,
     FleetRepos,
     Masthead,
   },
-
+  mixins:     [ResourceFetch],
-  props: {
+  props:  {
     schema: {
       type:     Object,
       required: true,
@@ -22,6 +21,21 @@ export default {
       type:     String,
       required: true,
     },
+
+    loadResources: {
+      type:    Array,
+      default: () => []
+    },
+
+    loadIndeterminate: {
+      type:    Boolean,
+      default: false
+    },
+
+    incrementalLoadingIndicator: {
+      type:    Boolean,
+      default: false
+    },
   },
 
   async fetch() {
@@ -30,28 +44,25 @@ export default {
     await store.dispatch('management/findAll', { type: FLEET.CLUSTER });
     await store.dispatch('management/findAll', { type: FLEET.CLUSTER_GROUP });
 
-    const inStore = store.getters['currentStore'](this.resource);
+    await this.$fetchType(this.resource);
-
+  }
-    this.rows = await store.dispatch(`${ inStore }/findAll`, { type: this.resource });
-  },
-
-  data() {
-    return { rows: null };
-  },
 };
 </script>
 
 <template>
-  <Loading v-if="$fetchState.pending" />
+  <div>
-  <div v-else>
     <Masthead
       :schema="schema"
       :resource="resource"
+      :show-incremental-loading-indicator="incrementalLoadingIndicator"
+      :load-resources="loadResources"
+      :load-indeterminate="loadIndeterminate"
       :create-button-label="t('fleet.gitRepo.repo.addRepo')"
     />
     <FleetRepos
       :rows="rows"
       :schema="schema"
+      :loading="loading"
     />
   </div>
 </template>

shell/list/helm.cattle.io.projecthelmchart.vue

@@ -1,19 +1,40 @@
 <script>
-import Loading from '@shell/components/Loading';
 import ResourceTable from '@shell/components/ResourceTable';
 import Masthead from '@shell/components/ResourceList/Masthead';
 import { Banner } from '@components/Banner';
 import { HELM } from '@shell/config/types';
+import ResourceFetch from '@shell/mixins/resource-fetch';
 
 export default {
   components: {
-    Loading, ResourceTable, Masthead, Banner
+    ResourceTable, Masthead, Banner
+  },
+  mixins: [ResourceFetch],
+  props:  {
+    resource: {
+      type:     String,
+      required: true,
+    },
+
+    loadResources: {
+      type:    Array,
+      default: () => []
+    },
+
+    loadIndeterminate: {
+      type:    Boolean,
+      default: false
+    },
+
+    incrementalLoadingIndicator: {
+      type:    Boolean,
+      default: false
+    },
   },
   async fetch() {
     this.projectHelmChartSchema = this.$store.getters['cluster/schemaFor'](HELM.PROJECTHELMCHART);
+    await this.$fetchType(HELM.PROJECTHELMCHART);
 
-    this.projectHelmCharts = await this.$store.dispatch('cluster/findAll', { type: HELM.PROJECTHELMCHART } );
-    this.pending = false;
     this.$store.dispatch('type-map/configureType', { match: HELM.PROJECTHELMCHART, isCreatable: true });
     this.headers = this.$store.getters['type-map/headersFor'](this.projectHelmChartSchema).map((header) => {
       if (header.name === 'name') {
@@ -30,11 +51,8 @@ export default {
   },
   data() {
     return {
-      resource:                  HELM.PROJECTHELMCHART,
+      projectHelmChartSchema: null,
-      projectHelmChartSchema:      null,
+      headers:                null,
-      projectHelmCharts:           [],
-      pending:                   true,
-      headers:                null
     };
   },
   computed: {
@@ -51,35 +69,36 @@ export default {
     <Masthead
       :schema="projectHelmChartSchema"
       :resource="resource"
+      :show-incremental-loading-indicator="incrementalLoadingIndicator"
+      :load-resources="loadResources"
+      :load-indeterminate="loadIndeterminate"
       is-creatable
     />
     <Banner color="info" :label="t('monitoring.projectMonitoring.list.banner')" />
-    <Loading v-if="pending" />
+    <!-- ToDo: figure out how to get this centered in the empty space -->
-    <div v-else>
+    <div v-if="rows.length === 0 && !loading" class="empty-list">
-      <!-- ToDo: figure out how to get this centered in the empty space -->
+      <div class="message">
-      <div v-if="projectHelmCharts.length === 0" class="empty-list">
+        <i class="icon icon-monitoring icon-10x icon-grey"></i>
-        <div class="message">
+        <div class="text-large">
-          <i class="icon icon-monitoring icon-10x icon-grey"></i>
+          {{ t('monitoring.projectMonitoring.list.empty.message') }}
-          <div class="text-large">
+        </div>
-            {{ t('monitoring.projectMonitoring.list.empty.message') }}
+        <div v-if="canCreateProjectHelmChart" class="text-large">
-          </div>
+          {{ t('monitoring.projectMonitoring.list.empty.canCreate') }}
-          <div v-if="canCreateProjectHelmChart" class="text-large">
+        </div>
-            {{ t('monitoring.projectMonitoring.list.empty.canCreate') }}
+        <div v-else class="text-large">
-          </div>
+          {{ t('monitoring.projectMonitoring.list.empty.cannotCreate') }}
-          <div v-else class="text-large">
-            {{ t('monitoring.projectMonitoring.list.empty.cannotCreate') }}
-          </div>
         </div>
       </div>
-      <div v-else>
+    </div>
-        <ResourceTable
+    <div v-else>
-          :rows="projectHelmCharts"
+      <ResourceTable
-          :headers="headers"
+        :rows="rows"
-          :schema="projectHelmChartSchema"
+        :headers="headers"
-          key-field="_key"
+        :schema="projectHelmChartSchema"
-          :groupable="false"
+        :loading="loading"
-        />
+        key-field="_key"
-      </div>
+        :groupable="false"
+      />
     </div>
   </div>
 </template>

shell/list/logging.banzaicloud.io.clusterflow.vue

@@ -1,13 +1,13 @@
 <script>
 import ResourceTable from '@shell/components/ResourceTable';
-import Loading from '@shell/components/Loading';
 import { LOGGING } from '@shell/config/types';
+import ResourceFetch from '@shell/mixins/resource-fetch';
 
 export default {
   name:       'ListApps',
-  components: { Loading, ResourceTable },
+  components: { ResourceTable },
-
+  mixins:     [ResourceFetch],
-  props: {
+  props:      {
     resource: {
       type:     String,
       required: true,
@@ -21,16 +21,11 @@ export default {
 
   async fetch() {
     await this.$store.dispatch('cluster/findAll', { type: LOGGING.CLUSTER_OUTPUT });
-    this.rows = await this.$store.dispatch('cluster/findAll', { type: this.resource });
+    await this.$fetchType(this.resource);
-  },
+  }
-
-  data() {
-    return { rows: null };
-  },
 };
 </script>
 
 <template>
-  <Loading v-if="$fetchState.pending" />
+  <ResourceTable :schema="schema" :rows="rows" :loading="loading" />
-  <ResourceTable v-else-if="rows" :schema="schema" :rows="rows" />
 </template>

shell/list/logging.banzaicloud.io.flow.vue

@@ -1,13 +1,12 @@
 <script>
 import ResourceTable from '@shell/components/ResourceTable';
-import Loading from '@shell/components/Loading';
 import { LOGGING } from '@shell/config/types';
-
+import ResourceFetch from '@shell/mixins/resource-fetch';
 export default {
   name:       'ListApps',
-  components: { Loading, ResourceTable },
+  components: { ResourceTable },
-
+  mixins:     [ResourceFetch],
-  props: {
+  props:      {
     resource: {
       type:     String,
       required: true,
@@ -24,18 +23,12 @@ export default {
       await this.$store.dispatch('cluster/findAll', { type: LOGGING.OUTPUT });
       await this.$store.dispatch('cluster/findAll', { type: LOGGING.CLUSTER_OUTPUT });
     } catch (e) {}
-    const rows = await this.$store.dispatch('cluster/findAll', { type: LOGGING.FLOW });
 
-    this.rows = rows;
+    await this.$fetchType(LOGGING.FLOW);
-  },
+  }
-
-  data() {
-    return { rows: [] };
-  },
 };
 </script>
 
 <template>
-  <Loading v-if="$fetchState.pending" />
+  <ResourceTable :schema="schema" :rows="rows" :loading="loading" />
-  <ResourceTable v-else :schema="schema" :rows="rows" />
 </template>

shell/list/management.cattle.io.cluster.vue

@@ -1,31 +1,42 @@
 <script>
 import ResourceTable from '@shell/components/ResourceTable';
-import Loading from '@shell/components/Loading';
 import { MANAGEMENT } from '@shell/config/types';
 import { filterOnlyKubernetesClusters } from '@shell/utils/cluster';
-
+import ResourceFetch from '@shell/mixins/resource-fetch';
 export default {
   name:       'ListMgmtClusters',
-  components: { Loading, ResourceTable },
+  components: { ResourceTable },
+  mixins:     [ResourceFetch],
 
-  async fetch() {
+  props: {
-    await this.$store.dispatch(`${ this.inStore }/findAll`, { type: this.$attrs.resource });
+    resource: {
+      type:     String,
+      required: true,
+    },
+    schema: {
+      type:     Object,
+      required: true,
+    },
   },
 
+  async fetch() {
+    await this.$fetchType(this.resource);
+  },
   computed: {
-    inStore() {
+    filteredRows() {
-      return this.$store.getters['currentProduct'].inStore;
+      return filterOnlyKubernetesClusters(this.rows);
-    },
-    rows() {
-      const all = this.$store.getters[`${ this.inStore }/all`](MANAGEMENT.CLUSTER);
-
-      return filterOnlyKubernetesClusters(all);
     }
-  }
+  },
+  // override with relevant info for the loading indicator since this doesn't use it's own masthead
+  $loadingResources() {
+    return {
+      loadResources:     [MANAGEMENT.CLUSTER],
+      loadIndeterminate: true, // results are filtered so we wouldn't get the correct count on indicator...
+    };
+  },
 };
 </script>
 
 <template>
-  <Loading v-if="$fetchState.pending" />
+  <ResourceTable :schema="schema" :rows="filteredRows" :headers="$attrs.headers" :group-by="$attrs.groupBy" :loading="loading" />
-  <ResourceTable v-else :schema="$attrs.schema" :rows="rows" :headers="$attrs.headers" :group-by="$attrs.groupBy" />
 </template>

shell/list/management.cattle.io.feature.vue

@@ -3,23 +3,22 @@ import { mapState, mapGetters } from 'vuex';
 import AsyncButton from '@shell/components/AsyncButton';
 import { Card } from '@components/Card';
 import ResourceTable from '@shell/components/ResourceTable';
-import Loading from '@shell/components/Loading';
 import { Banner } from '@components/Banner';
 import { LabeledInput } from '@components/Form/LabeledInput';
 import { MANAGEMENT } from '@shell/config/types';
 import { SETTING } from '@shell/config/settings';
+import ResourceFetch from '@shell/mixins/resource-fetch';
 
 export default {
   components: {
     AsyncButton,
     Banner,
     Card,
-    Loading,
     ResourceTable,
     LabeledInput
   },
-
+  mixins:     [ResourceFetch],
-  props: {
+  props:  {
     resource: {
       type:     String,
       required: true,
@@ -32,7 +31,7 @@ export default {
   },
 
   async fetch() {
-    this.rows = await this.$store.dispatch('management/findAll', { type: this.resource });
+    await this.$fetchType(this.resource);
 
     this.serverUrlSetting = this.$store.getters['management/byId'](MANAGEMENT.SETTING, SETTING.SERVER_URL);
 
@@ -52,7 +51,6 @@ export default {
 
   data() {
     return {
-      rows:             null,
       update:           [],
       updateMode:       'activate',
       error:            null,
@@ -85,6 +83,13 @@ export default {
     },
   },
 
+  $loadingResources() {
+    return {
+      loadResources:     [MANAGEMENT.FEATURE],
+      loadIndeterminate: true, // results are filtered so we wouldn't get the correct count on indicator...
+    };
+  },
+
   watch: {
     showPromptUpdate(show) {
       if (show) {
@@ -184,12 +189,12 @@ export default {
 </script>
 
 <template>
-  <Loading v-if="$fetchState.pending" />
+  <div>
-  <div v-else>
     <ResourceTable
       :schema="schema"
       :rows="filteredRows"
       :row-actions="enableRowActions"
+      :loading="loading"
     >
       <template slot="cell:name" slot-scope="scope">
         <div class="feature-name">

shell/list/management.cattle.io.user.vue

@@ -1,26 +1,45 @@
 <script>
 import AsyncButton from '@shell/components/AsyncButton';
-import { NORMAN } from '@shell/config/types';
+import { MANAGEMENT, NORMAN } from '@shell/config/types';
 import { NAME } from '@shell/config/product/auth';
 import ResourceTable from '@shell/components/ResourceTable';
-import Loading from '@shell/components/Loading';
 import Masthead from '@shell/components/ResourceList/Masthead';
+import ResourceFetch from '@shell/mixins/resource-fetch';
 
 export default {
   components: {
     AsyncButton,
-    Loading,
     ResourceTable,
     Masthead
   },
+  mixins: [ResourceFetch],
+  props:  {
+    resource: {
+      type:     String,
+      required: true,
+    },
 
+    loadResources: {
+      type:    Array,
+      default: () => []
+    },
+
+    loadIndeterminate: {
+      type:    Boolean,
+      default: false
+    },
+
+    incrementalLoadingIndicator: {
+      type:    Boolean,
+      default: false
+    },
+  },
   async fetch() {
     const store = this.$store;
-    const resource = this.resource;
 
     await store.dispatch(`rancher/findAll`, { type: NORMAN.USER });
 
-    this.allUsers = await store.dispatch(`management/findAll`, { type: resource });
+    await this.$fetchType(this.resource);
 
     this.canRefreshAccess = await this.$store.dispatch('rancher/request', { url: '/v3/users?limit=0' })
       .then(res => !!res?.actions?.refreshauthprovideraccess);
@@ -28,21 +47,19 @@ export default {
 
   data() {
     const getters = this.$store.getters;
-    const params = { ...this.$route.params };
 
-    const resource = params.resource;
+    const schema = getters[`management/schemaFor`](this.resource);
-
-    const schema = getters[`management/schemaFor`](resource);
 
     return {
       schema,
-      resource,
-
-      // Provided by fetch later
-      rows:             null,
       canRefreshAccess: false,
+    };
+  },
 
-      allUsers: null,
+  $loadingResources() {
+    return {
+      loadResources:     [MANAGEMENT.USER],
+      loadIndeterminate: true, // results are filtered so we wouldn't get the correct count on indicator...
     };
   },
 
@@ -56,7 +73,7 @@ export default {
     },
 
     users() {
-      if ( !this.allUsers ) {
+      if ( !this.rows ) {
         return [];
       }
 
@@ -64,7 +81,7 @@ export default {
       // 1) Only show system users in explorer/users and not in auth/users
       // 2) Supplement user with info to enable/disable the refresh group membership action (this is not persisted on save)
       const params = { ...this.$route.params };
-      const requiredUsers = params.product === NAME ? this.allUsers.filter(a => !a.isSystem) : this.allUsers;
+      const requiredUsers = params.product === NAME ? this.rows.filter(a => !a.isSystem) : this.rows;
 
       requiredUsers.forEach((r) => {
         r.canRefreshAccess = this.canRefreshAccess;
@@ -94,11 +111,13 @@ export default {
 </script>
 
 <template>
-  <Loading v-if="$fetchState.pending" />
+  <div>
-  <div v-else>
     <Masthead
       :schema="schema"
       :resource="resource"
+      :show-incremental-loading-indicator="incrementalLoadingIndicator"
+      :load-resources="loadResources"
+      :load-indeterminate="loadIndeterminate"
     >
       <template slot="extraActions">
         <AsyncButton
@@ -113,7 +132,7 @@ export default {
       </template>
     </Masthead>
 
-    <ResourceTable :schema="schema" :rows="users" :group-by="groupBy" />
+    <ResourceTable :schema="schema" :rows="users" :group-by="groupBy" :loading="loading" />
   </div>
 </template>
 

shell/list/monitoring.coreos.com.alertmanagerconfig.vue

@@ -1,16 +1,13 @@
 <script>
 import ResourceTable from '@shell/components/ResourceTable';
-import Loading from '@shell/components/Loading';
 import { Banner } from '@components/Banner';
 import { MONITORING } from '@shell/config/types';
-
+import ResourceFetch from '@shell/mixins/resource-fetch';
 export default {
   name:       'ListApps',
-  components: {
+  components: { Banner, ResourceTable },
-    Banner, Loading, ResourceTable
+  mixins:     [ResourceFetch],
-  },
+  props:      {
-
-  props: {
     resource: {
       type:     String,
       required: true,
@@ -25,27 +22,23 @@ export default {
   async fetch() {
     try {
       await this.$store.dispatch('cluster/findAll', { type: MONITORING.ALERTMANAGERCONFIG });
-      this.rows = await this.$store.dispatch('cluster/findAll', { type: this.resource });
+      await this.$fetchType(this.resource);
     } catch (err) {
       throw new Error(err);
     }
-  },
+  }
-
-  data() {
-    return { rows: null };
-  },
 };
 </script>
 
 <template>
-  <Loading v-if="$fetchState.pending" />
+  <div v-if="rows.length || loading">
-  <div v-else-if="rows.length > 0">
     <Banner color="info">
       {{ t('monitoring.alertmanagerConfig.description') }}
     </Banner>
     <ResourceTable
       :schema="schema"
       :rows="rows"
+      :loading="loading"
     />
   </div>
 

shell/list/namespace.vue

@@ -6,6 +6,10 @@ export default {
   name:       'ListNamespace',
   components: { ResourceTable },
   props:      {
+    resource: {
+      type:     String,
+      required: true,
+    },
     schema: {
       type:     Object,
       required: true,
@@ -14,6 +18,10 @@ export default {
       type:     Array,
       required: true,
     },
+    loading: {
+      type:     Boolean,
+      required: false,
+    },
   },
 
   computed: {
@@ -28,7 +36,11 @@ export default {
         return this.rows;
       }
     },
-  }
+  },
+
+  $loadingResources() {
+    return { loadIndeterminate: true };
+  },
 };
 </script>
 
@@ -39,6 +51,7 @@ export default {
     :groupable="false"
     :schema="schema"
     key-field="_key"
+    :loading="loading"
     v-on="$listeners"
   />
 </template>

shell/list/node.vue

@@ -1,6 +1,5 @@
 <script>
 import ResourceTable from '@shell/components/ResourceTable';
-import Loading from '@shell/components/Loading';
 import Tag from '@shell/components/Tag';
 import { Banner } from '@components/Banner';
 import {
@@ -16,18 +15,21 @@ import { allHash } from '@shell/utils/promise';
 import { get } from '@shell/utils/object';
 import { GROUP_RESOURCES, mapPref } from '@shell/store/prefs';
 import { COLUMN_BREAKPOINTS } from '@shell/components/SortableTable/index.vue';
-
+import ResourceFetch from '@shell/mixins/resource-fetch';
 export default {
   name:       'ListNode',
   components: {
-    Loading,
     ResourceTable,
     Tag,
     Banner
   },
-  mixins: [metricPoller],
+  mixins: [metricPoller, ResourceFetch],
 
   props: {
+    resource: {
+      type:     String,
+      required: true,
+    },
     schema: {
       type:     Object,
       required: true,
@@ -35,7 +37,7 @@ export default {
   },
 
   async fetch() {
-    const hash = { kubeNodes: this.$store.dispatch('cluster/findAll', { type: NODE }) };
+    const hash = { kubeNodes: this.$fetchType(NODE) };
 
     this.canViewPods = this.$store.getters[`cluster/schemaFor`](POD);
 
@@ -58,16 +60,11 @@ export default {
       this.$store.dispatch('cluster/findAll', { type: POD });
     }
 
-    const res = await allHash(hash);
+    await allHash(hash);
-
-    this.kubeNodes = res.kubeNodes;
   },
 
   data() {
-    return {
+    return { canViewPods: false };
-      kubeNodes:   null,
-      canViewPods: false,
-    };
   },
 
   beforeDestroy() {
@@ -79,7 +76,7 @@ export default {
 
   computed: {
     hasWindowsNodes() {
-      return (this.kubeNodes || []).some(node => node.status.nodeInfo.operatingSystem === 'windows');
+      return (this.rows || []).some(node => node.status.nodeInfo.operatingSystem === 'windows');
     },
     tableGroup: mapPref(GROUP_RESOURCES),
 
@@ -141,8 +138,7 @@ export default {
 </script>
 
 <template>
-  <Loading v-if="$fetchState.pending" />
+  <div>
-  <div v-else>
     <Banner
       v-if="hasWindowsNodes"
       color="info"
@@ -152,8 +148,9 @@ export default {
       v-bind="$attrs"
       :schema="schema"
       :headers="headers"
-      :rows="kubeNodes"
+      :rows="rows"
       :sub-rows="true"
+      :loading="loading"
       v-on="$listeners"
     >
       <template #sub-row="{fullColspan, row}">

shell/list/persistentvolume.vue

@@ -1,27 +1,34 @@
 <script>
 import ResourceTable from '@shell/components/ResourceTable';
-import Loading from '@shell/components/Loading';
 import { PVC } from '@shell/config/types';
+import ResourceFetch from '@shell/mixins/resource-fetch';
 
 export default {
   name:       'ListPersistentVolume',
-  components: { Loading, ResourceTable },
+  components: { ResourceTable },
+  mixins:     [ResourceFetch],
+  props:      {
+    resource: {
+      type:     String,
+      required: true,
+    },
+
+    schema: {
+      type:     Object,
+      required: true,
+    },
+  },
 
   async fetch() {
     const inStore = this.$store.getters['currentStore']();
     const pvcPromise = this.$store.dispatch(`${ inStore }/findAll`, { type: PVC });
 
-    this.rows = await this.$store.dispatch(`${ inStore }/findAll`, { type: this.$attrs.resource });
+    await this.$fetchType(this.resource);
     await pvcPromise;
-  },
-
-  data() {
-    return { rows: [] };
   }
 };
 </script>
 
 <template>
-  <Loading v-if="$fetchState.pending" />
+  <ResourceTable :schema="schema" :rows="rows" :headers="$attrs.headers" :group-by="$attrs.groupBy" :loading="loading" />
-  <ResourceTable v-else :schema="$attrs.schema" :rows="rows" :headers="$attrs.headers" :group-by="$attrs.groupBy" />
 </template>

shell/list/persistentvolumeclaim.vue

@@ -1,12 +1,13 @@
 <script>
 import ResourceTable from '@shell/components/ResourceTable';
 import { STORAGE_CLASS } from '@shell/config/types';
+import ResourceFetch from '@shell/mixins/resource-fetch';
 
 export default {
   name:       'ListPersistentVolumeClaim',
   components: { ResourceTable },
-
+  mixins:     [ResourceFetch],
-  props: {
+  props:      {
     resource: {
       type:     String,
       required: true,
@@ -24,18 +25,14 @@ export default {
     // Fetch storage classes so we can determine if a PVC can be expanded
     this.$store.dispatch(`${ inStore }/findAll`, { type: STORAGE_CLASS });
 
-    this.rows = await this.$store.dispatch(`${ inStore }/findAll`, { type: this.resource });
+    await this.$fetchType(this.resource);
-  },
-
-  data() {
-    return { rows: [] };
   }
 };
 </script>
 
 <template>
   <ResourceTable
-    :loading="$fetchState.pending"
+    :loading="loading"
     :schema="schema"
     :rows="rows"
   />

shell/list/provisioning.cattle.io.cluster.vue

@@ -8,17 +8,35 @@ import { MODE, _IMPORT } from '@shell/config/query-params';
 import { filterOnlyKubernetesClusters, filterHiddenLocalCluster } from '@shell/utils/cluster';
 import { mapFeature, HARVESTER as HARVESTER_FEATURE } from '@shell/store/features';
 import { NAME as EXPLORER } from '@shell/config/product/explorer';
+import ResourceFetch from '@shell/mixins/resource-fetch';
 
 export default {
   components: {
     Banner, ResourceTable, Masthead
   },
+  mixins: [ResourceFetch],
+  props:  {
+    loadResources: {
+      type:    Array,
+      default: () => []
+    },
+
+    loadIndeterminate: {
+      type:    Boolean,
+      default: false
+    },
+
+    incrementalLoadingIndicator: {
+      type:    Boolean,
+      default: false
+    },
+  },
 
   async fetch() {
     const hash = {
+      rancherClusters: this.$fetchType(CAPI.RANCHER_CLUSTER),
       normanClusters:  this.$store.dispatch('rancher/findAll', { type: NORMAN.CLUSTER }),
       mgmtClusters:    this.$store.dispatch('management/findAll', { type: MANAGEMENT.CLUSTER }),
-      rancherClusters: this.$store.dispatch('management/findAll', { type: CAPI.RANCHER_CLUSTER }),
     };
 
     if ( this.$store.getters['management/canList'](SNAPSHOT) ) {
@@ -50,7 +68,6 @@ export default {
     const res = await allHash(hash);
 
     this.mgmtClusters = res.mgmtClusters;
-    this.rancherClusters = res.rancherClusters;
   },
 
   data() {
@@ -58,19 +75,18 @@ export default {
       resource:        CAPI.RANCHER_CLUSTER,
       schema:          this.$store.getters['management/schemaFor'](CAPI.RANCHER_CLUSTER),
       mgmtClusters:    [],
-      rancherClusters: [],
     };
   },
 
   computed: {
-    rows() {
+    filteredRows() {
       // If Harvester feature is enabled, hide Harvester Clusters
       if (this.harvesterEnabled) {
-        return filterHiddenLocalCluster(filterOnlyKubernetesClusters(this.rancherClusters), this.$store);
+        return filterHiddenLocalCluster(filterOnlyKubernetesClusters(this.rows), this.$store);
       }
 
       // Otherwise, show Harvester clusters - these will be shown with a warning
-      return filterHiddenLocalCluster(this.rancherClusters, this.$store);
+      return filterHiddenLocalCluster(this.rows, this.$store);
     },
 
     hiddenHarvesterCount() {
@@ -82,7 +98,7 @@ export default {
         return 0;
       }
 
-      return this.rancherClusters.length - filterOnlyKubernetesClusters(this.rancherClusters).length;
+      return this.rows.length - filterOnlyKubernetesClusters(this.rows).length;
     },
 
     createLocation() {
@@ -115,6 +131,13 @@ export default {
     harvesterEnabled: mapFeature(HARVESTER_FEATURE),
   },
 
+  $loadingResources() {
+    return {
+      loadResources:     [CAPI.RANCHER_CLUSTER],
+      loadIndeterminate: true, // results are filtered so we wouldn't get the correct count on indicator...
+    };
+  },
+
   mounted() {
     window.c = this;
   },
@@ -130,6 +153,9 @@ export default {
       :resource="resource"
       :create-location="createLocation"
       component-testid="cluster-manager-list"
+      :show-incremental-loading-indicator="incrementalLoadingIndicator"
+      :load-resources="loadResources"
+      :load-indeterminate="loadIndeterminate"
     >
       <template v-if="canImport" slot="extraActions">
         <n-link
@@ -142,7 +168,7 @@ export default {
       </template>
     </Masthead>
 
-    <ResourceTable :schema="schema" :rows="rows" :namespaced="false" :loading="$fetchState.pending">
+    <ResourceTable :schema="schema" :rows="filteredRows" :namespaced="false" :loading="loading">
       <template #cell:summary="{row}">
         <span v-if="!row.stateParts.length">{{ row.nodes.length }}</span>
       </template>

shell/list/service.vue

@@ -1,12 +1,25 @@
 <script>
 import ResourceTable from '@shell/components/ResourceTable';
-import Loading from '@shell/components/Loading';
 import { NODE } from '@shell/config/types';
 import { allHash } from '@shell/utils/promise';
+import ResourceFetch from '@shell/mixins/resource-fetch';
 
 export default {
   name:       'ListService',
-  components: { Loading, ResourceTable },
+  components: { ResourceTable },
+  mixins:     [ResourceFetch],
+  props:      {
+    resource: {
+      type:     String,
+      required: true,
+    },
+
+    schema: {
+      type:     Object,
+      required: true,
+    },
+  },
+
   // fetch nodes before loading this page, as they may be referenced in the Target table column
   async fetch() {
     const store = this.$store;
@@ -21,23 +34,22 @@ export default {
       }
     } catch {}
 
-    const hash = { rows: store.dispatch(`${ inStore }/findAll`, { type: this.$attrs.resource }) };
+    const hash = { rows: this.$fetchType(this.resource) };
 
     if (hasNodes) {
       hash.nodes = store.dispatch(`${ inStore }/findAll`, { type: NODE });
     }
-    const res = await allHash(hash);
+    await allHash(hash);
-
-    this.rows = res.rows;
-  },
-
-  data() {
-    return { rows: [] };
   }
 };
 </script>
 
 <template>
-  <Loading v-if="$fetchState.pending" />
+  <ResourceTable
-  <ResourceTable v-else :schema="$attrs.schema" :rows="rows" :headers="$attrs.headers" :group-by="$attrs.groupBy" />
+    :schema="schema"
+    :rows="rows"
+    :headers="$attrs.headers"
+    :group-by="$attrs.groupBy"
+    :loading="loading"
+  />
 </template>

shell/list/ui.cattle.io.navlink.vue

@@ -16,6 +16,11 @@ export default {
       type:     Array,
       required: true,
     },
+
+    loading: {
+      type:     Boolean,
+      required: false,
+    },
   },
 
   computed: { ...mapGetters(['clusterId']) }
@@ -26,6 +31,7 @@ export default {
   <ResourceTable
     :schema="schema"
     :rows="rows"
+    :loading="loading"
   >
     <template #cell:to="{row}">
       <template v-if="row.spec && row.spec.toService">

shell/list/workload.vue

@@ -76,7 +76,7 @@ export default {
       return schema;
     },
 
-    rows() {
+    filteredRows() {
       const out = [];
 
       for ( const typeRows of this.resources ) {
@@ -151,5 +151,5 @@ export default {
 </script>
 
 <template>
-  <ResourceTable :loading="$fetchState.pending" :schema="schema" :rows="rows" :overflow-y="true" />
+  <ResourceTable :loading="$fetchState.pending" :schema="schema" :rows="filteredRows" :overflow-y="true" />
 </template>

shell/mixins/resource-fetch.js

@@ -1,26 +1,10 @@
 import { mapGetters } from 'vuex';
-import {
+import { COUNT, MANAGEMENT } from '@shell/config/types';
-  COUNT, MANAGEMENT, POD, WORKLOAD_TYPES, WORKLOAD, SECRET
-} from '@shell/config/types';
 import { SETTING, DEFAULT_PERF_SETTING } from '@shell/config/settings';
 
 // Number of pages to fetch when loading incrementally
 const PAGES = 4;
 
-// restrict advanced features of manual refresh and incremental loading to these resource types
-export const TYPES_RESTRICTED = [
-  SECRET,
-  POD,
-  WORKLOAD_TYPES.DEPLOYMENT,
-  WORKLOAD_TYPES.CRON_JOB,
-  WORKLOAD_TYPES.DAEMON_SET,
-  WORKLOAD_TYPES.JOB,
-  WORKLOAD_TYPES.STATEFUL_SET,
-  WORKLOAD_TYPES.REPLICA_SET,
-  WORKLOAD_TYPES.REPLICATION_CONTROLLER,
-  WORKLOAD
-];
-
 export default {
   data() {
     // fetching the settings related to manual refresh from global settings
@@ -66,7 +50,17 @@ export default {
     }
   },
 
-  computed: { ...mapGetters({ refreshFlag: 'resource-fetch/refreshFlag' }) },
+  computed: {
+    ...mapGetters({ refreshFlag: 'resource-fetch/refreshFlag' }),
+    rows() {
+      const inStore = this.$store.getters['currentStore'](this.resource);
+
+      return this.$store.getters[`${ inStore }/all`](this.resource);
+    },
+    loading() {
+      return this.rows.length ? false : this.$fetchState.pending;
+    },
+  },
   watch:    {
     refreshFlag(neu) {
       // this is where the data assignment will trigger the update of the list view...