@acorex-platform/framework-client 2.0.0-next.23 → 2.0.0-next.25

package/fesm2022/acorex-platform-framework-client-themes-default.mjs

@@ -30,13 +30,13 @@ import { AXUnsubscriber } from '@acorex/core/utils';
 import { AXPAuthModule, AXPSessionService, AXPSessionStatus } from '@acorex-platform/framework-client/auth';
 import * as i1$3 from '@acorex-platform/framework-client/core';
 import { AXPEntityBroadcastService, AXPDeviceService, AXHighlightService, AXPPageContextRegistry, AXPPageContextPriority, AXPComponentSlotModule, AXPKeyboardShortcutRegistry, AXPLogoComponent, AXPBroadcastEventService, AXPContextStore } from '@acorex-platform/framework-client/core';
-import { getDataSourcePageIndex, applyDataSourcePagingWithoutLoad, AXPEntityCardComponent, AXPEntityCardSkeletonComponent, AXP_CATEGORY_TREE_ROOT_TITLE_I18N_KEY, AXPEntityDefinitionRegistryService, AXPCategoryTreeService, traceEntityMasterList, buildDataSourceTraceSnapshot, AXPEntityListViewColumnViewModel, getEntityInfo, axpRunEntityListPageContextAction, axpBuildEntityListPageContextSnapshot, restoreEntityListExpandedRows, AXP_ENTITY_CONFIG_TOKEN } from '@acorex-platform/framework-client/layout/entity';
+import { getDataSourcePageIndex, applyDataSourcePagingWithoutLoad, watchNextDataSourceLoad, AXPEntityCardComponent, AXPEntityCardSkeletonComponent, AXP_CATEGORY_TREE_ROOT_TITLE_I18N_KEY, AXPEntityDefinitionRegistryService, AXPCategoryTreeService, traceEntityMasterList, buildDataSourceTraceSnapshot, AXPEntityListViewColumnViewModel, getEntityInfo, axpRunEntityListPageContextAction, axpBuildEntityListPageContextSnapshot, restoreEntityListExpandedRows, AXP_ENTITY_CONFIG_TOKEN } from '@acorex-platform/framework-client/layout/entity';
 import { mergeInfiniteScrollPage, AXPInfiniteScrollDirective, AXPStateMessageComponent, AXPThemeLayoutBlockComponent, AXPThemeLayoutHeaderComponent, AXPThemeLayoutToolbarComponent, AXPQueryViewSaveDialogService, AXPEntityListStylingDialogService, AXPQueryFiltersComponent, AXPQuerySortsComponent, AXPQueryViewSaveButtonComponent, AXPQueryViewTabsComponent, AXPQueryColumnsComponent, AXPThemeLayoutStartSideComponent, AXPTaskBadgeService, AXPMenuBadgeHelper, AXPTaskBadgeDirective, provideFileChooserHooks } from '@acorex-platform/framework-client/layout/components';
 import { resolveEntityCardAvatarPath, listEntityMasterStylingLockedRules, withQueryViewFilterVisibility, queryViewConditionsToFilterQueries } from '@acorex-platform/framework-shared/entity';
 import * as i1 from '@angular/common';
 import { CommonModule, AsyncPipe } from '@angular/common';
 import * as i0 from '@angular/core';
-import { input, signal, computed, viewChild, effect, untracked, afterRenderEffect, ChangeDetectionStrategy, Component, inject, ViewChild, Input, ViewEncapsulation, afterNextRender, Injector, output, DestroyRef, ElementRef, NgModule } from '@angular/core';
+import { input, signal, computed, effect, untracked, viewChild, afterRenderEffect, ChangeDetectionStrategy, Component, inject, ViewChild, Input, ViewEncapsulation, afterNextRender, Injector, output, DestroyRef, ElementRef, NgModule } from '@angular/core';
 import { get, isEqual, sortBy } from 'lodash-es';
 import * as i7$1 from '@acorex-platform/framework-client/layout/widget-core';
 import { AXPWidgetCoreModule } from '@acorex-platform/framework-client/layout/widget-core';
@@ -74,6 +74,7 @@ import { AXResizableDirective } from '@acorex/cdk/resizable';
 const LOAD_MORE_SKELETON_COUNT = 3;
 //#endregion
 class AXPEntityMasterListCardListComponent {
+    #viewTransitionEffect;
     //#endregion
     //#region ----- Lifecycle -----
     constructor() {
@@ -112,6 +113,19 @@ class AXPEntityMasterListCardListComponent {
         ...(ngDevMode ? [{ debugName: "showListStatus" }] : /* istanbul ignore next */ []));
         this.skeletonCount = computed(() => Math.max(this.pageSize(), 1), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "skeletonCount" }] : /* istanbul ignore next */ []));
+        this.#viewTransitionEffect = effect(() => {
+            const vm = this.vm();
+            if (!vm.listTransitionLoading?.()) {
+                return;
+            }
+            untracked(() => {
+                this.items.set([]);
+                this.hasMore.set(false);
+                this.loading.set(true);
+                this.loadingMore.set(false);
+            });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#viewTransitionEffect" }] : /* istanbul ignore next */ []));
         this.loadMoreSkeletonPlaceholders = Array.from({ length: LOAD_MORE_SKELETON_COUNT }, (_, index) => index);
         this.showSkeletonAvatar = computed(() => {
             if (this.vm().cardLayout()?.header?.avatar) {
@@ -345,9 +359,14 @@ class AXPEntityMasterListCardListComponent {
     }
     async loadPage(reset) {
         const vm = this.vm();
+        const switchEpoch = vm.viewSwitchEpoch?.() ?? null;
+        const stillCurrent = () => this.isListSwitchCurrent(vm, switchEpoch);
         const take = this.resolvePageSize(vm);
         this.pageSize.set(take);
         const skip = reset ? 0 : this.items().length;
+        if (!stillCurrent()) {
+            return;
+        }
         this.appending = !reset;
         if (reset) {
             this.items.set([]);
@@ -359,17 +378,41 @@ class AXPEntityMasterListCardListComponent {
         }
         applyDataSourcePagingWithoutLoad(vm.dataSource, { take, skip });
         invalidateDataSourceFetchedPages(vm.dataSource);
+        if (!stillCurrent()) {
+            this.appending = false;
+            return;
+        }
+        const watch = watchNextDataSourceLoad(vm.dataSource, stillCurrent);
         try {
-            const dataReady = this.waitForDataSourceLoad(vm.dataSource);
             vm.dataSource.refresh({ reset });
-            await dataReady;
+            if (!stillCurrent()) {
+                watch.stop();
+                return;
+            }
+            if (vm.dataSource.isLoading) {
+                await watch.promise;
+            }
+            else {
+                watch.stop();
+            }
+            if (!stillCurrent()) {
+                return;
+            }
             this.applyPageFromDataSource(reset);
         }
         finally {
             this.appending = false;
-            this.loading.set(false);
-            this.loadingMore.set(false);
+            if (stillCurrent()) {
+                this.loading.set(false);
+                this.loadingMore.set(false);
+            }
+        }
+    }
+    isListSwitchCurrent(vm, epoch) {
+        if (epoch == null || vm.viewSwitchEpoch == null) {
+            return true;
         }
+        return vm.viewSwitchEpoch() === epoch;
     }
     applyPageFromDataSource(reset) {
         const ds = this.vm().dataSource;
@@ -386,32 +429,6 @@ class AXPEntityMasterListCardListComponent {
     resolvePageSize(vm) {
         return vm.getResolvedListPaging().take || vm.dataSource.config.pageSize || 10;
     }
-    waitForDataSourceLoad(dataSource) {
-        return new Promise((resolve) => {
-            let settled = false;
-            const finish = () => {
-                if (settled) {
-                    return;
-                }
-                settled = true;
-                clearTimeout(timeoutId);
-                loadingSub.unsubscribe();
-                changedSub.unsubscribe();
-                resolve();
-            };
-            const changedSub = dataSource.onChanged.subscribe(() => {
-                if (!dataSource.isLoading) {
-                    queueMicrotask(finish);
-                }
-            });
-            const loadingSub = dataSource.onLoadingChanged.subscribe((isLoading) => {
-                if (!isLoading) {
-                    queueMicrotask(finish);
-                }
-            });
-            const timeoutId = setTimeout(finish, 10_000);
-        });
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPEntityMasterListCardListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPEntityMasterListCardListComponent, isStandalone: true, selector: "axp-entity-master-list-card-list", inputs: { vm: { classPropertyName: "vm", publicName: "vm", isSignal: true, isRequired: true, transformFunction: null }, userStylingRules: { classPropertyName: "userStylingRules", publicName: "userStylingRules", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "cardGrid", first: true, predicate: ["cardGrid"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"axp-entity-card-list\" [class.axp-entity-card-list--rows]=\"isRowLayout()\">\n  @if (loading() && !items().length) {\n    <!-- ----- Skeleton cards while the first page is fetched ----- -->\n    <div class=\"axp-entity-card-list__grid\" aria-busy=\"true\" aria-live=\"polite\">\n      @for (index of skeletonPlaceholders(); track index) {\n        <div class=\"axp-entity-card-list__cell\">\n          <axp-entity-card-skeleton\n            [fieldCount]=\"skeletonFieldCount()\"\n            [badgeCount]=\"skeletonBadgeCount()\"\n            [showContent]=\"true\"\n            [showFooter]=\"skeletonShowFooter()\"\n            [rowLayout]=\"isRowLayout()\"\n            [showAvatar]=\"showSkeletonAvatar()\"\n            [fillHost]=\"true\"\n          />\n        </div>\n      }\n    </div>\n  } @else if (!items().length) {\n    <!-- ----- Empty state when the list has no rows ----- -->\n    <div class=\"axp-entity-card-list__empty\">\n      <axp-state-message\n        icon=\"fa-light fa-clipboard-list\"\n        [title]=\"'@general:empty-states.no-records-found.title'\"\n        [description]=\"'@general:empty-states.no-records-found.description'\"\n      ></axp-state-message>\n    </div>\n  } @else {\n    <!-- ----- Accumulated card grid with infinite scroll ----- -->\n    <div #cardGrid class=\"axp-entity-card-list__grid\">\n      @for (row of items(); track trackRow($index, row)) {\n        <!--->\n        <!-- ----- Render a card when the row record is present ----- -->\n        @if (row) {\n          <div class=\"axp-entity-card-list__cell\">\n            <axp-entity-card\n              [entity]=\"vm().entityDef\"\n              [layout]=\"vm().cardLayout()\"\n              [row]=\"row\"\n              [fields]=\"vm().cardFields()\"\n              [userStylingRules]=\"userStylingRules()\"\n              [variant]=\"isRowLayout() ? 'row' : 'card'\"\n              [interactive]=\"true\"\n              [fillHost]=\"true\"\n              [extraExpanded]=\"isCardExpanded(row)\"\n              [showSelection]=\"showSelection()\"\n              [selected]=\"isRowSelected(row)\"\n              [showNewBadge]=\"isRowHighlighted(row)\"\n              [primaryActions]=\"vm().primaryRowActions()\"\n              [secondaryActionLoader]=\"loadSecondaryActions\"\n              (extraExpandedChange)=\"onCardExtraExpanded($index, $event)\"\n              (selectionChange)=\"onRowSelectionChange(row, $event)\"\n              (commandClick)=\"onCommandClick($event, row)\"\n            />\n          </div>\n        }\n      }\n      <!--->\n      <!-- ----- Skeleton cards while the next chunk is fetched ----- -->\n      @if (loadingMore()) {\n        @for (index of loadMoreSkeletonPlaceholders; track index) {\n          <div class=\"axp-entity-card-list__cell\">\n            <axp-entity-card-skeleton\n              [fieldCount]=\"skeletonFieldCount()\"\n              [badgeCount]=\"skeletonBadgeCount()\"\n              [showContent]=\"true\"\n              [showFooter]=\"skeletonShowFooter()\"\n              [rowLayout]=\"isRowLayout()\"\n              [showAvatar]=\"showSkeletonAvatar()\"\n              [fillHost]=\"true\"\n            />\n          </div>\n        }\n      }\n      <div\n        axpInfiniteScroll\n        class=\"axp-entity-card-list__sentinel\"\n        [axpInfiniteScrollEnabled]=\"canLoadMore()\"\n        (axpInfiniteScrollReached)=\"onInfiniteScrollReached()\"\n      ></div>\n    </div>\n    <!--------------------------------------------------------------->\n    <!-- ----- Compact loaded count, pinned under the scrolling grid ----- -->\n    @if (showListStatus()) {\n      <div class=\"axp-entity-card-list__status\" aria-live=\"polite\">\n        {{\n          '@general:terms.interface.list-range'\n            | translate: { params: { loaded: loadedCount(), total: totalCount() } }\n            | async\n        }}\n      </div>\n    }\n  }\n</div>\n", styles: ["@layer properties;:host.axp-entity-list-host{display:flex;height:100%;min-height:0px;flex-direction:column;overflow:hidden}.axp-entity-card-list{display:flex;min-height:0px;flex:1;flex-direction:column;gap:var(--spacing, .25rem);padding-inline:calc(var(--spacing, .25rem) * 3)}.axp-entity-card-list .axp-entity-card-list__empty{display:flex;min-height:0px;flex:1;align-items:center;justify-content:center;border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;--tw-border-style: dashed;border-style:dashed;border-color:rgba(var(--ax-sys-color-lightest-surface))}.axp-entity-card-list .axp-entity-card-list__grid{display:grid;min-height:0px;flex:1;grid-template-columns:repeat(1,minmax(0,1fr));align-items:stretch;gap:calc(var(--spacing, .25rem) * 2);overflow:auto;align-content:start;grid-auto-rows:auto}@media(width>=48rem){.axp-entity-card-list .axp-entity-card-list__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(width>=80rem){.axp-entity-card-list .axp-entity-card-list__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}.axp-entity-card-list .axp-entity-card-list__cell{display:flex;min-width:0;flex-direction:column}.axp-entity-card-list .axp-entity-card-list__cell>axp-entity-card,.axp-entity-card-list .axp-entity-card-list__cell>axp-entity-card-skeleton{display:flex;width:100%;min-width:0;flex:1 1 auto;flex-direction:column}.axp-entity-card-list.axp-entity-card-list--rows .axp-entity-card-list__grid{grid-template-columns:repeat(1,minmax(0,1fr));gap:calc(var(--spacing, .25rem) * 2)}@media(width>=48rem){.axp-entity-card-list.axp-entity-card-list--rows .axp-entity-card-list__grid{grid-template-columns:repeat(1,minmax(0,1fr))}}@media(width>=80rem){.axp-entity-card-list.axp-entity-card-list--rows .axp-entity-card-list__grid{grid-template-columns:repeat(1,minmax(0,1fr))}}.axp-entity-card-list .axp-entity-card-list__sentinel{grid-column:1 / -1;height:1px;width:100%}.axp-entity-card-list .axp-entity-card-list__status{display:flex;flex-shrink:0;align-items:center;justify-content:flex-end;padding-top:calc(var(--spacing, .25rem) * .5);padding-bottom:var(--spacing, .25rem);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));color:rgba(var(--ax-sys-color-text-default))}@supports (color: color-mix(in lab,red,red)){.axp-entity-card-list .axp-entity-card-list__status{color:color-mix(in oklab,rgba(var(--ax-sys-color-text-default)) 80%,transparent)}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AXPEntityCardComponent, selector: "axp-entity-card", inputs: ["entity", "layout", "row", "fields", "userStylingRules", "variant", "interactive", "embedded", "elevated", "disableLookupPopover", "fillHost", "extraExpanded", "selected", "showNewBadge", "showSelection", "showClose", "primaryActions", "primaryActionLook", "secondaryActionLoader"], outputs: ["extraExpandedChange", "selectionChange", "commandClick", "closeClick"] }, { kind: "component", type: AXPEntityCardSkeletonComponent, selector: "axp-entity-card-skeleton", inputs: ["fieldCount", "badgeCount", "showFooter", "showHeaderMenu", "showContent", "rowLayout", "showAvatar", "fillHost", "embedded", "elevated"] }, { kind: "directive", type: AXPInfiniteScrollDirective, selector: "[axpInfiniteScroll]", inputs: ["axpInfiniteScrollEnabled", "axpInfiniteScrollRoot", "axpInfiniteScrollRootMargin", "axpInfiniteScrollThreshold"], outputs: ["axpInfiniteScrollReached"] }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "titleParams", "descriptionParams", "look"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
@@ -1738,6 +1755,8 @@ class AXPEntityMasterToolbarViewComponent {
         this.translationService = inject(AXTranslationService);
         this.toastService = inject(AXToastService);
         this.isInitializing = false;
+        /** Which `runInitialListLoad` currently owns `isInitializing`. */
+        this.initializingToken = null;
         this.pendingInitialSorts = true;
         this.filterTriggerMode = 'manual';
         this.sortMenuOpen = signal(false, /* @ts-ignore */
@@ -1818,9 +1837,14 @@ class AXPEntityMasterToolbarViewComponent {
                 return;
             }
             untracked(() => {
-                this.isInitializing = true;
+                const loadOwnsGate = this.initializingToken != null;
+                if (!loadOwnsGate) {
+                    this.isInitializing = true;
+                }
                 this.setInitialFiltersFromSettingsOrView();
-                this.isInitializing = false;
+                if (!loadOwnsGate) {
+                    this.isInitializing = false;
+                }
             });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "#listInstanceFiltersEffect" }] : /* istanbul ignore next */ []));
@@ -1870,23 +1894,42 @@ class AXPEntityMasterToolbarViewComponent {
      * Applies persisted view/filters/sorts once after query-filters syncs `initialFilters`.
      * Avoids a second list query from `scheduleApply` plus a follow-up `onFiltersChanged` emit.
      */
-    async runInitialListLoad() {
+    async runInitialListLoad(viewSwitchEpoch) {
+        const stillCurrent = () => viewSwitchEpoch == null || this.vm.isViewSwitchCurrent(viewSwitchEpoch);
+        if (!stillCurrent()) {
+            return;
+        }
+        const token = viewSwitchEpoch ?? -1;
         traceEntityMasterList('toolbar', 'runInitialListLoad start', () => ({
             viewName: this.vm.view().name,
             activeListLayout: this.vm.activeListLayout(),
             dataSource: buildDataSourceTraceSnapshot(this.vm.dataSource),
         }));
         this.isInitializing = true;
+        this.initializingToken = token;
         this.pendingInitialSorts = true;
-        this.setInitialFiltersFromSettingsOrView();
-        this.filtersDefinitions.set(this.vm.filterDefinitions());
-        this.filtersReady.set(true);
-        await this.waitForQueryFiltersSync();
-        await this.vm.applyFilterAndSort();
-        this.previousFilterQueries.set(this.vm.filterQueries());
-        this.stripFiltersFromRouteQueryParam();
-        this.isInitializing = false;
-        this.pendingInitialSorts = false;
+        try {
+            this.setInitialFiltersFromSettingsOrView();
+            this.filtersDefinitions.set(this.vm.filterDefinitions());
+            this.filtersReady.set(true);
+            await this.waitForQueryFiltersSync();
+            if (!stillCurrent()) {
+                return;
+            }
+            await this.vm.applyFilterAndSort({
+                resetPagination: viewSwitchEpoch != null,
+                viewSwitchEpoch,
+                forceReload: viewSwitchEpoch != null,
+            });
+            if (!stillCurrent()) {
+                return;
+            }
+            this.previousFilterQueries.set(this.vm.filterQueries());
+            this.stripFiltersFromRouteQueryParam();
+        }
+        finally {
+            this.releaseInitializing(token);
+        }
         traceEntityMasterList('toolbar', 'runInitialListLoad complete', () => ({
             viewName: this.vm.view().name,
             activeListLayout: this.vm.activeListLayout(),
@@ -1894,6 +1937,15 @@ class AXPEntityMasterToolbarViewComponent {
             dataSource: buildDataSourceTraceSnapshot(this.vm.dataSource),
         }));
     }
+    /** Drops the init gate only if a newer load has not taken it. */
+    releaseInitializing(token) {
+        if (this.initializingToken !== token) {
+            return;
+        }
+        this.isInitializing = false;
+        this.pendingInitialSorts = false;
+        this.initializingToken = null;
+    }
     /** Waits until query-filters has rendered and synced converted `initialFilters`. */
     waitForQueryFiltersSync() {
         return new Promise((resolve) => {
@@ -1950,21 +2002,26 @@ class AXPEntityMasterToolbarViewComponent {
         }, 50);
     }
     async onViewChanged(view) {
+        const switchingView = view.name !== this.vm.view().name;
+        const viewSwitchEpoch = switchingView ? this.vm.beginViewSwitch() : undefined;
         traceEntityMasterList('toolbar', 'view tab changed', () => ({
             previousViewName: this.vm.view().name,
             nextViewName: view.name,
             activeListLayout: this.vm.activeListLayout(),
             dataSource: buildDataSourceTraceSnapshot(this.vm.dataSource),
         }));
-        await this.vm.setView(view.name);
+        await this.vm.setView(view.name, viewSwitchEpoch);
+        if (viewSwitchEpoch != null && !this.vm.isViewSwitchCurrent(viewSwitchEpoch)) {
+            return;
+        }
         if (axpIsEntityListRoute(this.router)) {
-            axpReplaceEntityListRouteQueryParams(this.router, { view: view.name });
-            // Prevent queryParamSub from re-applying the same view change while initial load runs.
+            // Mark the next URL before replaceUrl so the queryParam emission does not start a second switch.
             this.vm.markRouteQueryContextSynced(this.activeRoute.snapshot.queryParamMap, {
                 view: view.name,
             });
+            axpReplaceEntityListRouteQueryParams(this.router, { view: view.name });
         }
-        await this.runInitialListLoad();
+        await this.runInitialListLoad(viewSwitchEpoch);
         traceEntityMasterList('toolbar', 'view tab change handled', () => ({
             viewName: this.vm.view().name,
             activeListLayout: this.vm.activeListLayout(),
@@ -2469,6 +2526,12 @@ class AXPEntityMasterListViewComponent extends AXPPageLayoutBaseComponent {
                 this.syncListViewQueryParam(currentViewName);
             }
         });
+        effect(() => {
+            if (!this.vm.listTransitionLoading()) {
+                return;
+            }
+            this.showTableLoadingPlaceholders();
+        });
         effect(() => {
             const currentViewName = this.vm.view().name;
             if (!this.listHostReady()) {
@@ -2811,6 +2874,7 @@ class AXPEntityMasterListViewComponent extends AXPPageLayoutBaseComponent {
         });
     }
     async applyVisibleListRefresh(resetPagination, refreshTargetId, highlightRowId) {
+        const epoch = this.vm.viewSwitchEpoch();
         traceEntityMasterList('list-view', 'refresh event received', () => ({
             viewName: this.vm.view().name,
             activeListLayout: this.vm.activeListLayout(),
@@ -2835,12 +2899,16 @@ class AXPEntityMasterListViewComponent extends AXPPageLayoutBaseComponent {
         else {
             await this.reloadListData(resetPagination);
         }
+        if (!this.vm.isViewSwitchCurrent(epoch)) {
+            return;
+        }
         if (typeof highlightRowId === 'string' || typeof highlightRowId === 'number') {
             await this.highlightRowById(highlightRowId);
         }
         traceEntityMasterList('list-view', 'refresh event handled', () => this.buildListHostTraceSnapshot());
     }
     async reloadListData(resetPagination = false) {
+        const epoch = this.vm.viewSwitchEpoch();
         traceEntityMasterList('list-view', 'reloadListData start', () => ({
             resetPagination,
             activeListLayout: this.vm.activeListLayout(),
@@ -2849,12 +2917,22 @@ class AXPEntityMasterListViewComponent extends AXPPageLayoutBaseComponent {
             hasCardList: !!this.cardList(),
             dataSource: buildDataSourceTraceSnapshot(this.vm.dataSource),
         }));
+        if (!this.vm.isViewSwitchCurrent(epoch)) {
+            return;
+        }
         if (!resetPagination && !this.vm.isCardHostLayout()) {
             await this.vm.ensureListPagingResolved();
+            if (!this.vm.isViewSwitchCurrent(epoch)) {
+                return;
+            }
             this.vm.applyPagingToDataSourceWithoutLoad();
         }
+        if (!this.vm.isViewSwitchCurrent(epoch)) {
+            return;
+        }
         if (this.vm.isCardHostLayout()) {
             await this.cardList()?.reload(true);
+            this.vm.finishListTransition(epoch);
             // Shared DS load updates table rows via onChanged but not isRefreshCalled; prepare for a later table switch.
             this.acknowledgeManualTableReady();
             traceEntityMasterList('list-view', 'reloadListData complete (card)', () => this.buildListHostTraceSnapshot());
@@ -2862,21 +2940,59 @@ class AXPEntityMasterListViewComponent extends AXPPageLayoutBaseComponent {
         }
         const grid = this.grid();
         if (grid) {
-            const dataReady = this.waitForDataSourceLoad(grid.dataSource);
+            if (resetPagination || this.vm.listTransitionLoading()) {
+                this.showTableLoadingPlaceholders();
+            }
+            if (!this.vm.isViewSwitchCurrent(epoch)) {
+                return;
+            }
+            const watch = watchNextDataSourceLoad(grid.dataSource, () => this.vm.isViewSwitchCurrent(epoch));
             grid.refresh({ reset: resetPagination });
-            await dataReady;
+            if (!this.vm.isViewSwitchCurrent(epoch)) {
+                watch.stop();
+                return;
+            }
+            if (grid.dataSource.isLoading) {
+                await watch.promise;
+            }
+            else {
+                watch.stop();
+            }
+            if (!this.vm.isViewSwitchCurrent(epoch)) {
+                return;
+            }
+            this.vm.finishListTransition(epoch);
             if (!resetPagination) {
                 this.scheduleSyncGridPagerUi();
             }
             this.scheduleRestoreExpandedRows();
         }
         else {
-            const dataReady = this.waitForDataSourceLoad(this.vm.dataSource);
+            const watch = watchNextDataSourceLoad(this.vm.dataSource, () => this.vm.isViewSwitchCurrent(epoch));
             this.vm.dataSource.refresh({ reset: resetPagination });
-            await dataReady;
+            if (!this.vm.isViewSwitchCurrent(epoch)) {
+                watch.stop();
+                return;
+            }
+            if (this.vm.dataSource.isLoading) {
+                await watch.promise;
+            }
+            else {
+                watch.stop();
+            }
+            if (!this.vm.isViewSwitchCurrent(epoch)) {
+                return;
+            }
+            this.vm.finishListTransition(epoch);
         }
         traceEntityMasterList('list-view', 'reloadListData complete (table)', () => this.buildListHostTraceSnapshot());
     }
+    /** Skeleton rows so an empty previous result does not stay on screen while the next page loads. */
+    showTableLoadingPlaceholders() {
+        const grid = this.grid();
+        const pageSize = this.vm.dataSource.pageSize || 10;
+        grid?.displayedRows?.set(new Array(pageSize));
+    }
     /**
      * Manual-mode table gates the body on `isRefreshCalled` (set only by `grid.refresh()`).
      * Card loads use shared `dataSource.refresh()`, so rows/totalCount update while the gate stays closed.
@@ -2904,35 +3020,6 @@ class AXPEntityMasterListViewComponent extends AXPPageLayoutBaseComponent {
             dataSource: buildDataSourceTraceSnapshot(this.vm.dataSource),
         };
     }
-    /**
-     * Waits until a `refresh()` load cycle completes (loading started, then finished with data).
-     */
-    waitForDataSourceLoad(dataSource) {
-        return new Promise((resolve) => {
-            let settled = false;
-            const finish = () => {
-                if (settled) {
-                    return;
-                }
-                settled = true;
-                clearTimeout(timeoutId);
-                loadingSub.unsubscribe();
-                changedSub.unsubscribe();
-                resolve();
-            };
-            const changedSub = dataSource.onChanged.subscribe(() => {
-                if (!dataSource.isLoading) {
-                    queueMicrotask(finish);
-                }
-            });
-            const loadingSub = dataSource.onLoadingChanged.subscribe((isLoading) => {
-                if (!isLoading) {
-                    queueMicrotask(finish);
-                }
-            });
-            const timeoutId = setTimeout(finish, 10_000);
-        });
-    }
     grid() {
         return this.dataTable()?.grid();
     }