diff --git a/.gitignore b/.gitignore
index 73ab54020..28e0bfffa 100644
--- a/.gitignore
+++ b/.gitignore
@@ -47,6 +47,9 @@ masStudio-*.json
 .cursor
 .superpowers/
 
+# Worktree documentation (per-ticket, not committed)
+docs/
+
 # web-components specific
 !web-components/dist
 web-components/commerce.json
diff --git a/nala/studio/translations/translations.page.js b/nala/studio/translations/translations.page.js
index 5ebb7a28b..2e2edd5d4 100644
--- a/nala/studio/translations/translations.page.js
+++ b/nala/studio/translations/translations.page.js
@@ -47,11 +47,8 @@ export default class TranslationsPage {
     }
 
     async waitForListToLoad(timeout = 15000) {
-        await this.loadingIndicator.waitFor({ state: 'hidden', timeout }).catch(() => {});
-        await Promise.race([
-            this.translationTable.waitFor({ state: 'visible', timeout }),
-            this.emptyState.waitFor({ state: 'visible', timeout }),
-        ]);
+        const dataRow = this.translationTable.locator('sp-table-row:not(.skeleton-row)').first();
+        await dataRow.or(this.emptyState).waitFor({ state: 'visible', timeout });
     }
 
     async getSentOnColumnTexts() {
diff --git a/nala/utils/nala.run.js b/nala/utils/nala.run.js
index d2d3b0d65..3cee80da3 100644
--- a/nala/utils/nala.run.js
+++ b/nala/utils/nala.run.js
@@ -1,6 +1,29 @@
 #!/usr/bin/env node
 
 import { spawn, spawnSync } from 'child_process';
+import { readFileSync, existsSync } from 'fs';
+import { dirname, basename, join } from 'path';
+
+function detectWorktreePort() {
+    // Walk up from cwd looking for a parent dir named "worktrees"; if the cwd is
+    // <…>/worktrees/<BRANCH>/…, read <…>/worktrees/.ports for BRANCH=<offset>.
+    let dir = process.cwd();
+    while (dir !== dirname(dir)) {
+        const parent = dirname(dir);
+        if (basename(parent) === 'worktrees') {
+            const branch = basename(dir);
+            const portsFile = join(parent, '.ports');
+            if (!existsSync(portsFile)) return null;
+            const line = readFileSync(portsFile, 'utf-8')
+                .split('\n')
+                .find((l) => l.startsWith(`${branch}=`));
+            const offset = line ? parseInt(line.split('=')[1], 10) : NaN;
+            return Number.isFinite(offset) ? 3000 + offset : null;
+        }
+        dir = parent;
+    }
+    return null;
+}
 
 function displayHelp() {
     console.log(`
@@ -99,7 +122,12 @@ function getLocalTestLiveUrl(env, masiourl, milolibs, repo = 'mas', owner = 'ado
         process.env.MILO_LIBS = `?milolibs=${milolibs}`;
     }
 
-    if (env === 'local') return 'http://localhost:3000';
+    if (env === 'local') {
+        // When run from a worktree checkout, auto-target that worktree's AEM port
+        // so `npm run nala local` works without needing to set LOCAL_TEST_LIVE_URL.
+        const worktreePort = detectWorktreePort();
+        return `http://localhost:${worktreePort ?? 3000}`;
+    }
     if (env === 'libs') return 'http://localhost:6456';
     return `https://${env}--${repo}--${owner}.aem.live`;
 }
diff --git a/studio/src/common/skeleton-styles.css.js b/studio/src/common/skeleton-styles.css.js
new file mode 100644
index 000000000..dbd2827e7
--- /dev/null
+++ b/studio/src/common/skeleton-styles.css.js
@@ -0,0 +1,34 @@
+import { css } from 'lit';
+
+export const skeletonStyles = css`
+    .skeleton-element {
+        background: linear-gradient(
+            90deg,
+            var(--spectrum-gray-200) 25%,
+            var(--spectrum-gray-100) 50%,
+            var(--spectrum-gray-200) 75%
+        );
+        background-size: 200% 100%;
+        animation: shimmer 1.5s infinite;
+        border-radius: 4px;
+    }
+
+    .skeleton-table-cell {
+        height: 18px;
+        width: 80%;
+        border-radius: 4px;
+    }
+
+    .skeleton-row sp-table-cell {
+        padding: 16px 20px;
+    }
+
+    @keyframes shimmer {
+        0% {
+            background-position: 200% 0;
+        }
+        100% {
+            background-position: -200% 0;
+        }
+    }
+`;
diff --git a/studio/src/mas-content.js b/studio/src/mas-content.js
index 7ed4b6acb..4dbcfb525 100644
--- a/studio/src/mas-content.js
+++ b/studio/src/mas-content.js
@@ -293,7 +293,7 @@ class MasContent extends LitElement {
             this.observedSentinel = null;
         } else if (loadingJustCompleted && this.hasMore.value) {
             this.scrollObserver?.unobserve(sentinel);
-            this.scrollObserver?.observe(sentinel);
+            requestAnimationFrame(() => this.scrollObserver?.observe(sentinel));
         }
     }
 
diff --git a/studio/src/mas-repository.js b/studio/src/mas-repository.js
index 09c7f2228..7e2d3030b 100644
--- a/studio/src/mas-repository.js
+++ b/studio/src/mas-repository.js
@@ -35,6 +35,7 @@ import {
 } from './constants.js';
 import { fragmentHasPersonalizationTag, isPznCountryTagId, PZN_TAG_ID_PREFIX } from './common/utils/personalization-utils.js';
 import { Placeholder } from './aem/placeholder.js';
+import { getFragmentName } from './translation/translation-utils.js';
 import generateFragmentStore from './reactivity/source-fragment-store.js';
 import { getDefaultLocaleCode } from '../../io/www/src/fragment/locales.js';
 import { getDictionary } from '../libs/fragment-client.js';
@@ -102,6 +103,7 @@ export class MasRepository extends LitElement {
             placeholders: null,
             promotions: null,
             translations: null,
+            collections: null,
         };
         this.dictionaryCache = new Map();
         this.inflightDictionaryRequest = null;
@@ -359,6 +361,7 @@ export class MasRepository extends LitElement {
             localSearch.status = STATUS_PUBLISHED;
         }
 
+        let refilling = false;
         try {
             if (this.#abortControllers.search) this.#abortControllers.search.abort();
             this.#searchCursor = null;
@@ -460,6 +463,10 @@ export class MasRepository extends LitElement {
                     this.#eagerLoadAllPznPages(cursorState, searchController);
                 } else {
                     this.#abortControllers.search = null;
+                    if (cursorState) {
+                        refilling = true;
+                        this.#refillBelowThreshold(cursorState, searchController);
+                    }
                 }
             }
 
@@ -477,10 +484,35 @@ export class MasRepository extends LitElement {
             return;
         }
 
-        Store.fragments.list.loading.set(false);
+        if (!refilling) Store.fragments.list.loading.set(false);
     }
 
     static MIN_PAGE_SIZE = 10;
+    /**
+     * Soft cap on the eager personalization-page loop in #eagerLoadAllPznPages.
+     * Once the cap is hit, hasMore is set to true and the rest is delivered on
+     * demand by loadNextPage() (one page per scroll-trigger). Pagination is not
+     * lost — it simply stops being eager-prefetched after this many pages.
+     */
+    static MAX_EAGER_PZN_PAGES = 20;
+    /**
+     * Visible-row threshold for the post-filter refill loop in #refillBelowThreshold.
+     * When a cursor page, after #filterStoresByPersonalizationEnabled has been
+     * applied, has fewer than this many visible items AND the cursor is not
+     * exhausted, the loop fetches additional cursor pages until the threshold is
+     * met or the cursor runs out. Prevents the narrow-filter UX where a user sees
+     * "1 result" when the underlying catalog has many more matches spread across
+     * later cursor pages.
+     */
+    static MIN_FILTERED_PAGE_RESULTS = 25;
+    /**
+     * Soft cap on the number of #fillPage rounds the refill loop will run before
+     * giving up. Mirrors MAX_EAGER_PZN_PAGES to keep the non-personalization
+     * refill path bounded when a filter matches very little in the catalog.
+     * When the cap is hit, hasMore stays true so loadNextPage can continue
+     * fetching on scroll.
+     */
+    static MAX_REFILL_ROUNDS = 20;
 
     async #fillPage(cursor, variants, surface, fragmentStores, limit = MasRepository.MIN_PAGE_SIZE, signal) {
         let added = 0;
@@ -501,8 +533,50 @@ export class MasRepository extends LitElement {
 
     async #eagerLoadAllPznPages(cursorSnapshot, searchController) {
         const { cursor, variants, surface, fragmentStores } = cursorSnapshot;
+        let pagesLoaded = 0;
+        try {
+            while (this.#searchCursor === cursorSnapshot) {
+                if (pagesLoaded >= MasRepository.MAX_EAGER_PZN_PAGES) {
+                    Store.fragments.list.hasMore.set(true);
+                    break;
+                }
+                const done = await this.#fillPage(
+                    cursor,
+                    variants,
+                    surface,
+                    fragmentStores,
+                    undefined,
+                    searchController.signal,
+                );
+                pagesLoaded++;
+                if (this.#searchCursor !== cursorSnapshot) return;
+                Store.fragments.list.data.set([...this.#filterStoresByPersonalizationEnabled(fragmentStores)]);
+                if (done) {
+                    this.#searchCursor = null;
+                    return;
+                }
+            }
+        } catch (error) {
+            if (error.name === 'AbortError') return;
+            if (this.#searchCursor === cursorSnapshot) {
+                Store.fragments.list.hasMore.set(true);
+            }
+        }
+    }
+
+    async #refillBelowThreshold(cursorSnapshot, searchController) {
+        const { cursor, variants, surface, fragmentStores } = cursorSnapshot;
+        let rounds = 0;
+        Store.fragments.list.loading.set(true);
         try {
             while (this.#searchCursor === cursorSnapshot) {
+                const filtered = this.#filterStoresByPersonalizationEnabled(fragmentStores);
+                if (filtered.length >= MasRepository.MIN_FILTERED_PAGE_RESULTS) return;
+                if (rounds >= MasRepository.MAX_REFILL_ROUNDS) {
+                    Store.fragments.list.hasMore.set(true);
+                    return;
+                }
+                const beforeCount = fragmentStores.length;
                 const done = await this.#fillPage(
                     cursor,
                     variants,
@@ -511,10 +585,16 @@ export class MasRepository extends LitElement {
                     undefined,
                     searchController.signal,
                 );
+                rounds++;
                 if (this.#searchCursor !== cursorSnapshot) return;
+                if (fragmentStores.length === beforeCount && !done) {
+                    Store.fragments.list.hasMore.set(true);
+                    return;
+                }
                 Store.fragments.list.data.set([...this.#filterStoresByPersonalizationEnabled(fragmentStores)]);
                 if (done) {
                     this.#searchCursor = null;
+                    Store.fragments.list.hasMore.set(false);
                     return;
                 }
             }
@@ -523,6 +603,10 @@ export class MasRepository extends LitElement {
             if (this.#searchCursor === cursorSnapshot) {
                 Store.fragments.list.hasMore.set(true);
             }
+        } finally {
+            if (this.#searchCursor === cursorSnapshot || this.#searchCursor === null) {
+                Store.fragments.list.loading.set(false);
+            }
         }
     }
 
@@ -644,6 +728,38 @@ export class MasRepository extends LitElement {
         }
     }
 
+    async loadAllCollections() {
+        if (!this.search.value.path) return;
+        try {
+            if (this.#abortControllers.collections) this.#abortControllers.collections.abort();
+            this.#abortControllers.collections = new AbortController();
+
+            const damPath = getDamPath(this.search.value.path);
+            const locale = this.filters.value.locale;
+            const searchOptions = {
+                path: `${damPath}/${locale}`,
+                modelIds: [TAG_MODEL_ID_MAPPING['mas:studio/content-type/merch-card-collection']],
+                sort: [{ on: 'modifiedOrCreated', order: 'DESC' }],
+            };
+
+            const fragments = await this.searchFragmentList(searchOptions, 50, this.#abortControllers.collections);
+            const collections = [];
+            const collectionsByPath = new Map();
+            for (const fragment of fragments) {
+                const collection = { ...fragment, studioPath: getFragmentName(fragment) };
+                collections.push(collection);
+                collectionsByPath.set(fragment.path, collection);
+            }
+
+            Store.translationProjects.allCollections.set(collections);
+            Store.translationProjects.displayCollections.set(collections);
+            Store.translationProjects.collectionsByPaths.set(collectionsByPath);
+        } catch (error) {
+            if (error.name === 'AbortError') return;
+            this.processError(error, 'Could not load collections.');
+        }
+    }
+
     async loadPreviewPlaceholders() {
         if (!this.search.value.path) return;
 
diff --git a/studio/src/placeholders/mas-placeholders.css.js b/studio/src/placeholders/mas-placeholders.css.js
index d1299a07e..252c619d3 100644
--- a/studio/src/placeholders/mas-placeholders.css.js
+++ b/studio/src/placeholders/mas-placeholders.css.js
@@ -1,397 +1,388 @@
 import { css } from 'lit';
+import { skeletonStyles } from '../common/skeleton-styles.css.js';
+
+export default [
+    skeletonStyles,
+    css`
+        .placeholders-container {
+            height: 100%;
+            min-height: 200px;
+            border-radius: 8px;
+            padding: 24px;
+            background-color: var(--spectrum-white);
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+            box-sizing: border-box;
+            position: relative;
+        }
+
+        .placeholders-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 24px;
+        }
+
+        .header-left {
+            display: flex;
+            align-items: center;
+        }
+
+        .search-filters-container {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 16px;
+            gap: 14px;
+        }
+
+        .placeholders-title {
+            display: flex;
+            flex-direction: column;
+            gap: 4px;
+        }
+
+        .placeholders-title h2 {
+            margin: 0;
+            font-size: 14px;
+            font-weight: 500;
+        }
+
+        .filters-container {
+            display: flex;
+            gap: 14px;
+            align-items: center;
+        }
+
+        .placeholders-content {
+            flex: 1;
+            position: relative;
+        }
+
+        .error-message {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            padding: 12px 16px;
+            background-color: var(--spectrum-semantic-negative-color-background);
+            color: var(--spectrum-semantic-negative-color-text);
+            border-radius: 4px;
+            margin-bottom: 16px;
+        }
+
+        .error-message sp-icon-alert {
+            color: var(--spectrum-semantic-negative-color-icon);
+        }
+
+        .placeholders-table {
+            width: 100%;
+            border-collapse: separate;
+            border-spacing: 0;
+            border-radius: 8px;
+            border: 1px solid var(--spectrum-gray-200);
+            table-layout: fixed;
+        }
+
+        .no-placeholders-label {
+            text-align: center;
+        }
+
+        .placeholders-table sp-table-head {
+            background-color: var(--spectrum-gray-100);
+            border-bottom: 1px solid var(--spectrum-gray-200);
+        }
+
+        .placeholders-table sp-table-head-cell {
+            font-weight: 600;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: flex-start;
+            color: var(--spectrum-gray-700);
+            font-size: 12px;
+            font-weight: 700;
+        }
+
+        .placeholders-table sp-table-head-cell:last-child,
+        .placeholders-table sp-table-cell:last-child {
+            max-width: 100px;
+            justify-content: flex-end;
+        }
 
-export const styles = css`
-    .placeholders-container {
-        height: 100%;
-        min-height: 200px;
-        border-radius: 8px;
-        padding: 24px;
-        background-color: var(--spectrum-white);
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-        box-sizing: border-box;
-        position: relative;
-    }
-
-    .placeholders-header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        margin-bottom: 24px;
-    }
-
-    .header-left {
-        display: flex;
-        align-items: center;
-    }
-
-    .search-filters-container {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        margin-bottom: 16px;
-        gap: 14px;
-    }
-
-    .placeholders-title {
-        display: flex;
-        flex-direction: column;
-        gap: 4px;
-    }
-
-    .placeholders-title h2 {
-        margin: 0;
-        font-size: 14px;
-        font-weight: 500;
-    }
-
-    .filters-container {
-        display: flex;
-        gap: 14px;
-        align-items: center;
-    }
-
-    .placeholders-content {
-        flex: 1;
-        position: relative;
-    }
-
-    .error-message {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        padding: 12px 16px;
-        background-color: var(--spectrum-semantic-negative-color-background);
-        color: var(--spectrum-semantic-negative-color-text);
-        border-radius: 4px;
-        margin-bottom: 16px;
-    }
-
-    .error-message sp-icon-alert {
-        color: var(--spectrum-semantic-negative-color-icon);
-    }
-
-    sp-progress-circle {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-    }
-
-    sp-progress-circle.loading-indicator {
-        top: -60px;
-    }
-
-    .placeholders-table {
-        width: 100%;
-        border-collapse: separate;
-        border-spacing: 0;
-        border-radius: 8px;
-        border: 1px solid var(--spectrum-gray-200);
-        table-layout: fixed;
-    }
-
-    .no-placeholders-label {
-        text-align: center;
-    }
-
-    .placeholders-table sp-table-head {
-        background-color: var(--spectrum-gray-100);
-        border-bottom: 1px solid var(--spectrum-gray-200);
-    }
-
-    .placeholders-table sp-table-head-cell {
-        font-weight: 600;
-        cursor: pointer;
-        display: flex;
-        align-items: center;
-        justify-content: flex-start;
-        color: var(--spectrum-gray-700);
-        font-size: 12px;
-        font-weight: 700;
-    }
-
-    .placeholders-table sp-table-head-cell:last-child,
-    .placeholders-table sp-table-cell:last-child {
-        max-width: 100px;
-        justify-content: flex-end;
-    }
-
-    .placeholders-table sp-table-head-cell.align-right {
-        text-align: right;
-    }
-
-    .placeholders-table sp-table-cell {
-        display: flex;
-        align-items: center;
-        justify-content: flex-start;
-    }
-
-    .placeholders-table sp-table-cell,
-    .placeholders-table sp-table-checkbox-cell:not([head-cell]) {
-        border-block-start: var(--mod-table-border-width, var(--spectrum-table-border-width)) solid
-            var(--highcontrast-table-divider-color, var(--mod-table-divider-color, var(--spectrum-table-divider-color)));
-        border-radius: 0;
-    }
-
-    .placeholders-table sp-table-cell.editing-cell {
-        box-sizing: border-box;
-        display: inline-flex;
-        padding: 0 30px 0 0;
-    }
-
-    .placeholders-table sp-table-cell.updated-by {
-        overflow: hidden;
-
-        & overlay-trigger {
+        .placeholders-table sp-table-head-cell.align-right {
+            text-align: right;
+        }
+
+        .placeholders-table sp-table-cell {
+            display: flex;
+            align-items: center;
+            justify-content: flex-start;
+        }
+
+        .placeholders-table sp-table-cell,
+        .placeholders-table sp-table-checkbox-cell:not([head-cell]) {
+            border-block-start: var(--mod-table-border-width, var(--spectrum-table-border-width)) solid
+                var(--highcontrast-table-divider-color, var(--mod-table-divider-color, var(--spectrum-table-divider-color)));
+            border-radius: 0;
+        }
+
+        .placeholders-table sp-table-cell.editing-cell {
+            box-sizing: border-box;
+            display: inline-flex;
+            padding: 0 30px 0 0;
+        }
+
+        .placeholders-table sp-table-cell.updated-by {
             overflow: hidden;
+
+            & overlay-trigger {
+                overflow: hidden;
+            }
+
+            & .cell-content {
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
+        }
+
+        .placeholders-table sp-table-body {
+            overflow: visible;
+        }
+
+        .action-cell {
+            position: relative;
+            box-sizing: border-box;
+        }
+
+        .action-buttons {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            justify-content: flex-end;
+            width: 100%;
+        }
+
+        .action-button {
+            background: none;
+            border: none;
+            cursor: pointer;
+            padding: 4px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 4px;
+            flex: 0 0 auto;
+
+            &:disabled {
+                filter: grayscale(1);
+                opacity: 0.6;
+            }
+        }
+
+        .action-button:hover {
+            background-color: var(--spectrum-gray-200);
+        }
+
+        .dropdown-menu-container {
+            position: relative;
+        }
+
+        .dropdown-menu {
+            position: absolute;
+            right: 0;
+            top: 100%;
+            background: white;
+            border-radius: 8px;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+            z-index: 100;
+            width: 160px;
+            padding: 8px 0;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .dropdown-item {
+            flex: 1;
+            align-items: center;
+            padding: 8px 16px;
+            cursor: pointer;
+            gap: 8px;
+            justify-self: flex-start;
+            display: flex;
+        }
+
+        .dropdown-item:hover {
+            background-color: var(--spectrum-gray-100);
         }
 
-        & .cell-content {
+        .dropdown-item.disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+
+        .dropdown-item.disabled:hover {
+            background-color: transparent;
+        }
+
+        .dropdown-item span {
+            flex: 1;
+            display: inline-flex;
+        }
+
+        .status-cell {
+            display: flex;
+            align-items: center;
+            justify-content: flex-start;
+            min-width: 120px;
+            padding: 8px 0;
+        }
+
+        .status-cell mas-fragment-status {
+            width: auto;
+            display: inline-flex;
+            font-weight: 500;
+        }
+
+        .edit-field-container {
+            width: 100%;
+            padding: 8px;
+            display: flex;
+        }
+
+        .edit-field-container sp-textfield {
+            width: 100%;
+            flex: 1;
+        }
+
+        .edit-field-container rte-field {
+            width: 100%;
+            min-height: 80px;
+            margin-bottom: 8px;
+        }
+
+        .rte-container {
+            position: relative;
+            display: block;
+            width: 100%;
+            min-height: 120px;
+            margin: 5px 0;
+        }
+
+        sp-switch {
+            display: inline-flex;
+        }
+
+        rte-field {
+            display: block;
+            min-height: 120px;
+            border-radius: 4px;
+            width: 100%;
+        }
+
+        .rich-text-cell {
             overflow: hidden;
+            padding: 4px 0;
+            font-size: var(--spectrum-global-font-size-100);
+            line-height: var(--spectrum-global-font-line-height-medium);
+            position: relative;
             text-overflow: ellipsis;
-            white-space: nowrap;
-        }
-    }
-
-    .placeholders-table sp-table-body {
-        overflow: visible;
-    }
-
-    .action-cell {
-        position: relative;
-        box-sizing: border-box;
-    }
-
-    .action-buttons {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        justify-content: flex-end;
-        width: 100%;
-    }
-
-    .action-button {
-        background: none;
-        border: none;
-        cursor: pointer;
-        padding: 4px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        border-radius: 4px;
-        flex: 0 0 auto;
-
-        &:disabled {
-            filter: grayscale(1);
-            opacity: 0.6;
-        }
-    }
-
-    .action-button:hover {
-        background-color: var(--spectrum-gray-200);
-    }
-
-    .dropdown-menu-container {
-        position: relative;
-    }
-
-    .dropdown-menu {
-        position: absolute;
-        right: 0;
-        top: 100%;
-        background: white;
-        border-radius: 8px;
-        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-        z-index: 100;
-        width: 160px;
-        padding: 8px 0;
-        display: flex;
-        flex-direction: column;
-    }
-
-    .dropdown-item {
-        flex: 1;
-        align-items: center;
-        padding: 8px 16px;
-        cursor: pointer;
-        gap: 8px;
-        justify-self: flex-start;
-        display: flex;
-    }
-
-    .dropdown-item:hover {
-        background-color: var(--spectrum-gray-100);
-    }
-
-    .dropdown-item.disabled {
-        opacity: 0.5;
-        cursor: not-allowed;
-    }
-
-    .dropdown-item.disabled:hover {
-        background-color: transparent;
-    }
-
-    .dropdown-item span {
-        flex: 1;
-        display: inline-flex;
-    }
-
-    .status-cell {
-        display: flex;
-        align-items: center;
-        justify-content: flex-start;
-        min-width: 120px;
-        padding: 8px 0;
-    }
-
-    .status-cell mas-fragment-status {
-        width: auto;
-        display: inline-flex;
-        font-weight: 500;
-    }
-
-    .edit-field-container {
-        width: 100%;
-        padding: 8px;
-        display: flex;
-    }
-
-    .edit-field-container sp-textfield {
-        width: 100%;
-        flex: 1;
-    }
-
-    .edit-field-container rte-field {
-        width: 100%;
-        min-height: 80px;
-        margin-bottom: 8px;
-    }
-
-    .rte-container {
-        position: relative;
-        display: block;
-        width: 100%;
-        min-height: 120px;
-        margin: 5px 0;
-    }
-
-    sp-switch {
-        display: inline-flex;
-    }
-
-    rte-field {
-        display: block;
-        min-height: 120px;
-        border-radius: 4px;
-        width: 100%;
-    }
-
-    .rich-text-cell {
-        overflow: hidden;
-        padding: 4px 0;
-        font-size: var(--spectrum-global-font-size-100);
-        line-height: var(--spectrum-global-font-line-height-medium);
-        position: relative;
-        text-overflow: ellipsis;
-    }
-
-    .rich-text-cell p {
-        margin: 0 0 8px 0;
-    }
-
-    .rich-text-cell p:last-child {
-        margin-bottom: 0;
-    }
-
-    .rich-text-cell a {
-        color: var(--spectrum-blue-600);
-        text-decoration: none;
-    }
-
-    .rich-text-cell a:hover {
-        text-decoration: underline;
-    }
-
-    .bulk-action-container {
-        position: fixed;
-        bottom: 24px;
-        left: 50%;
-        transform: translateX(-50%);
-        z-index: 1000;
-        opacity: 0;
-        visibility: hidden;
-        transition:
-            opacity 0.3s ease,
-            visibility 0.3s ease;
-        border-radius: 4px;
-        background-color: var(--spectrum-semantic-negative-color-background);
-        padding: 6px;
-    }
-
-    .bulk-action-container.visible {
-        opacity: 1;
-        visibility: visible;
-    }
-
-    .bulk-action-container sp-action-button {
-        color: var(--spectrum-white);
-        background-color: var(--spectrum-red-800);
-        box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.2);
-    }
-
-    .approve-button sp-icon-checkmark {
-        color: var(--spectrum-semantic-positive-color-default, green);
-    }
-
-    .reject-button sp-icon-close {
-        color: var(--spectrum-semantic-negative-color-default, red);
-    }
-
-    /* Dialog styles */
-    .dialog-content {
-        display: flex;
-        flex-direction: column;
-        gap: 0;
-        padding: var(calc(var(--swc-scale-factor) * 16px));
-        width: 80vw;
-        max-width: 900px;
-        box-sizing: border-box;
-    }
-
-    .form-field {
-        margin-bottom: var(calc(var(--swc-scale-factor) * 16px));
-        display: flex;
-        flex-direction: column;
-        gap: 4px;
-    }
-
-    .form-field:last-child {
-        margin-bottom: 0;
-    }
-
-    .form-field sp-field-label {
-        display: block;
-        margin-bottom: var(calc(var(--swc-scale-factor) * 6px));
-    }
-
-    .form-field sp-picker,
-    .form-field sp-textfield {
-        width: 100%;
-        min-width: 0;
-        box-sizing: border-box;
-    }
-
-    .form-field .rte-container {
-        width: 100%;
-    }
-
-    sp-table .key {
-        flex: 2;
-    }
-    sp-table .value {
-        flex: 3;
-    }
-`;
-
-export default styles;
+        }
+
+        .rich-text-cell p {
+            margin: 0 0 8px 0;
+        }
+
+        .rich-text-cell p:last-child {
+            margin-bottom: 0;
+        }
+
+        .rich-text-cell a {
+            color: var(--spectrum-blue-600);
+            text-decoration: none;
+        }
+
+        .rich-text-cell a:hover {
+            text-decoration: underline;
+        }
+
+        .bulk-action-container {
+            position: fixed;
+            bottom: 24px;
+            left: 50%;
+            transform: translateX(-50%);
+            z-index: 1000;
+            opacity: 0;
+            visibility: hidden;
+            transition:
+                opacity 0.3s ease,
+                visibility 0.3s ease;
+            border-radius: 4px;
+            background-color: var(--spectrum-semantic-negative-color-background);
+            padding: 6px;
+        }
+
+        .bulk-action-container.visible {
+            opacity: 1;
+            visibility: visible;
+        }
+
+        .bulk-action-container sp-action-button {
+            color: var(--spectrum-white);
+            background-color: var(--spectrum-red-800);
+            box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.2);
+        }
+
+        .approve-button sp-icon-checkmark {
+            color: var(--spectrum-semantic-positive-color-default, green);
+        }
+
+        .reject-button sp-icon-close {
+            color: var(--spectrum-semantic-negative-color-default, red);
+        }
+
+        /* Dialog styles */
+        .dialog-content {
+            display: flex;
+            flex-direction: column;
+            gap: 0;
+            padding: var(calc(var(--swc-scale-factor) * 16px));
+            width: 80vw;
+            max-width: 900px;
+            box-sizing: border-box;
+        }
+
+        .form-field {
+            margin-bottom: var(calc(var(--swc-scale-factor) * 16px));
+            display: flex;
+            flex-direction: column;
+            gap: 4px;
+        }
+
+        .form-field:last-child {
+            margin-bottom: 0;
+        }
+
+        .form-field sp-field-label {
+            display: block;
+            margin-bottom: var(calc(var(--swc-scale-factor) * 6px));
+        }
+
+        .form-field sp-picker,
+        .form-field sp-textfield {
+            width: 100%;
+            min-width: 0;
+            box-sizing: border-box;
+        }
+
+        .form-field .rte-container {
+            width: 100%;
+        }
+
+        sp-table .key {
+            flex: 2;
+        }
+        sp-table .value {
+            flex: 3;
+        }
+    `,
+];
diff --git a/studio/src/placeholders/mas-placeholders.js b/studio/src/placeholders/mas-placeholders.js
index f93e19655..9b2c39fe6 100644
--- a/studio/src/placeholders/mas-placeholders.js
+++ b/studio/src/placeholders/mas-placeholders.js
@@ -13,6 +13,17 @@ import { confirmation } from '../mas-confirm-dialog.js';
 import { FragmentStore } from '../reactivity/fragment-store.js';
 import { clearCaches } from '../../libs/fragment-client.js';
 
+const placeholdersSkeletonRow = () =>
+    html`<sp-table-row class="skeleton-row">
+        <sp-table-cell class="key"><div class="skeleton-element skeleton-table-cell"></div></sp-table-cell>
+        <sp-table-cell class="value"><div class="skeleton-element skeleton-table-cell"></div></sp-table-cell>
+        <sp-table-cell class="status"><div class="skeleton-element skeleton-table-cell"></div></sp-table-cell>
+        <sp-table-cell class="locale"><div class="skeleton-element skeleton-table-cell"></div></sp-table-cell>
+        <sp-table-cell class="updated-by"><div class="skeleton-element skeleton-table-cell"></div></sp-table-cell>
+        <sp-table-cell class="updated-at"><div class="skeleton-element skeleton-table-cell"></div></sp-table-cell>
+        <sp-table-cell class="action"></sp-table-cell>
+    </sp-table-row>`;
+
 class MasPlaceholders extends LitElement {
     static styles = styles;
 
@@ -324,7 +335,7 @@ class MasPlaceholders extends LitElement {
                     </div>
                 </div>
 
-                <div class="placeholders-content">${this.loadingIndicator()}${this.renderTable()}</div>
+                <div class="placeholders-content">${this.renderTable()}</div>
 
                 ${this.showCreationModal
                     ? html`<mas-placeholders-creation-modal
@@ -342,11 +353,6 @@ class MasPlaceholders extends LitElement {
         `;
     }
 
-    loadingIndicator() {
-        if (!this.loading) return nothing;
-        return html`<sp-progress-circle class="loading-indicator" indeterminate size="l"></sp-progress-circle>`;
-    }
-
     // #region Table
 
     renderTable() {
@@ -399,26 +405,28 @@ class MasPlaceholders extends LitElement {
                     )}
                 </sp-table-head>
                 <sp-table-body>
-                    ${repeat(
-                        this.internalPlaceholders,
-                        (placeholderStore) => placeholderStore.get().key,
-                        (placeholderStore) => {
-                            const placeholder = placeholderStore.get();
-                            return html`
-                                <mas-placeholders-item
-                                    key=${placeholder.key}
-                                    .placeholderStore=${placeholderStore}
-                                    .editing=${this.editing === placeholder.key}
-                                    .disabled=${this.pending}
-                                    .activeDropdown=${this.activeDropdown === placeholder.key}
-                                    .toggleEditing=${this.toggleEditing}
-                                    .toggleDropdown=${this.toggleDropdown}
-                                    .updatePending=${this.updatePending}
-                                ></mas-placeholders-item>
-                            `;
-                        },
-                    )}
-                    ${this.internalPlaceholders.length === 0 && !this.loading
+                    ${this.loading
+                        ? Array.from({ length: 5 }, placeholdersSkeletonRow)
+                        : repeat(
+                              this.internalPlaceholders,
+                              (placeholderStore) => placeholderStore.get().key,
+                              (placeholderStore) => {
+                                  const placeholder = placeholderStore.get();
+                                  return html`
+                                      <mas-placeholders-item
+                                          key=${placeholder.key}
+                                          .placeholderStore=${placeholderStore}
+                                          .editing=${this.editing === placeholder.key}
+                                          .disabled=${this.pending}
+                                          .activeDropdown=${this.activeDropdown === placeholder.key}
+                                          .toggleEditing=${this.toggleEditing}
+                                          .toggleDropdown=${this.toggleDropdown}
+                                          .updatePending=${this.updatePending}
+                                      ></mas-placeholders-item>
+                                  `;
+                              },
+                          )}
+                    ${!this.loading && this.internalPlaceholders.length === 0
                         ? html`<p class="no-placeholders-label">No placeholders found</p>`
                         : nothing}
                 </sp-table-body>
diff --git a/studio/src/translation/mas-items-selector.css.js b/studio/src/translation/mas-items-selector.css.js
index 1b7f11512..ed86c5795 100644
--- a/studio/src/translation/mas-items-selector.css.js
+++ b/studio/src/translation/mas-items-selector.css.js
@@ -4,19 +4,66 @@ import { ghostButtonStyles } from './translation-common-styles.css.js';
 export const styles = [
     ghostButtonStyles,
     css`
+        .dialog-header {
+            display: flex;
+            align-items: center;
+            gap: 16px;
+            margin-bottom: 16px;
+        }
+
+        .dialog-header h2 {
+            margin: 0;
+            white-space: nowrap;
+            font-size: 18px;
+        }
+
+        .dialog-header sp-search {
+            flex: 1;
+            max-width: 400px;
+        }
+
+        :host {
+            display: flex;
+            flex-direction: column;
+            min-width: 80vw;
+            max-height: 70vh;
+            min-height: 0;
+        }
+
+        sp-tabs {
+            display: flex;
+            flex-direction: column;
+            flex: 1;
+            min-height: 0;
+        }
+
         sp-tab-panel[selected] {
             display: flex;
             flex-direction: column;
+            flex: 1;
+            min-height: 0;
             gap: 12px;
+            padding-top: 16px;
         }
 
         .container {
             display: flex;
-            width: 80vw;
+            flex: 1;
+            min-height: 0;
+            width: 100%;
+            padding-bottom: 48px;
+        }
+
+        mas-select-items-table {
+            flex: 1;
+            min-width: 0;
+            min-height: 0;
+            display: flex;
         }
 
         .container.view-only {
             width: 100%;
+            padding-bottom: 0;
         }
 
         sp-tab-panel.view-only {
@@ -33,8 +80,8 @@ export const styles = [
 
         .selected-items-count {
             position: fixed;
-            bottom: 98px;
-            right: 22px;
+            bottom: 95px;
+            right: 42px;
             display: flex;
             justify-content: flex-end;
             align-items: center;
diff --git a/studio/src/translation/mas-items-selector.js b/studio/src/translation/mas-items-selector.js
index 176a6b7d6..38ecd89a3 100644
--- a/studio/src/translation/mas-items-selector.js
+++ b/studio/src/translation/mas-items-selector.js
@@ -8,6 +8,7 @@ import './mas-select-items-table.js';
 import './mas-selected-items.js';
 import './mas-search-and-filters.js';
 import { styles } from './mas-items-selector.css.js';
+import { debounce } from '../utils.js';
 
 export const TABS = [
     { value: TABLE_TYPE.CARDS, label: 'Fragments' },
@@ -20,11 +21,15 @@ class MasItemsSelector extends LitElement {
 
     static properties = {
         viewOnly: { type: Boolean, state: true },
+        searchQuery: { type: String, state: true },
+        selectedTab: { type: String, state: true },
     };
 
     constructor() {
         super();
         this.viewOnly = false;
+        this.searchQuery = '';
+        this.selectedTab = TABLE_TYPE.CARDS;
     }
 
     connectedCallback() {
@@ -43,17 +48,34 @@ class MasItemsSelector extends LitElement {
     }
 
     get selectedCount() {
-        return [
-            ...Store.translationProjects.selectedCards.value,
-            ...Store.translationProjects.selectedPlaceholders.value,
-            ...Store.translationProjects.selectedCollections.value,
-        ].length;
+        return (
+            Store.translationProjects.selectedCards.value.length +
+            Store.translationProjects.selectedPlaceholders.value.length +
+            Store.translationProjects.selectedCollections.value.length
+        );
     }
 
     #toggleShowSelected() {
         Store.translationProjects.showSelected.set(!this.showSelected);
     }
 
+    #setSearchQuery = debounce((value) => {
+        this.searchQuery = value;
+    }, 300);
+
+    #handleSearchInput(e) {
+        this.#setSearchQuery(e.currentTarget?.value ?? '');
+    }
+
+    #handleSearchSubmit(e) {
+        e.preventDefault();
+        this.searchQuery = e.currentTarget?.value ?? '';
+    }
+
+    #handleTabChange({ target: { selected } }) {
+        this.selectedTab = selected;
+    }
+
     #getTabLabel(tab) {
         if (this.viewOnly) {
             const valueUppercase = tab.value.charAt(0).toUpperCase() + tab.value.slice(1);
@@ -72,8 +94,24 @@ class MasItemsSelector extends LitElement {
     }
 
     render() {
+        const count = this.selectedCount;
+        const showingSelection = this.showSelected && count;
+        const toggleLabel = showingSelection ? 'Hide selection' : 'Selected items';
         return html`
-            <sp-tabs quiet selected="cards">
+            ${this.viewOnly
+                ? nothing
+                : html`
+                      <div class="dialog-header">
+                          <h2>Select items</h2>
+                          <sp-search
+                              size="m"
+                              placeholder="Search..."
+                              @input=${this.#handleSearchInput}
+                              @submit=${this.#handleSearchSubmit}
+                          ></sp-search>
+                      </div>
+                  `}
+            <sp-tabs quiet .selected=${this.selectedTab} @change=${this.#handleTabChange}>
                 ${repeat(
                     TABS,
                     (tab) => tab.value,
@@ -89,6 +127,7 @@ class MasItemsSelector extends LitElement {
                                 : html`
                                       <mas-search-and-filters
                                           .type=${tab.value}
+                                          .searchQuery=${tab.value === this.selectedTab ? this.searchQuery : ''}
                                           .searchOnly=${[TABLE_TYPE.PLACEHOLDERS, TABLE_TYPE.COLLECTIONS].includes(tab.value)}
                                       ></mas-search-and-filters>
                                   `}
@@ -113,18 +152,13 @@ class MasItemsSelector extends LitElement {
                           <sp-button
                               variant="secondary"
                               @click=${this.#toggleShowSelected}
-                              ?disabled=${!this.selectedCount}
+                              ?disabled=${!count}
                               class="ghost-button"
                           >
-                              <sp-icon
-                                  slot="icon"
-                                  label=${this.showSelected && this.selectedCount ? 'Hide selection' : 'Selected items'}
-                                  class=${this.showSelected && this.selectedCount ? 'flipped' : ''}
-                              >
+                              <sp-icon slot="icon" label=${toggleLabel} class=${showingSelection ? 'flipped' : ''}>
                                   ${toggleSidebarIcon}
                               </sp-icon>
-                              ${this.showSelected && this.selectedCount ? 'Hide selection' : 'Selected items'}
-                              (${this.selectedCount})
+                              ${toggleLabel} (${count})
                           </sp-button>
                       </div>
                   `}
diff --git a/studio/src/translation/mas-search-and-filters.css.js b/studio/src/translation/mas-search-and-filters.css.js
index f2a277f76..4a950c807 100644
--- a/studio/src/translation/mas-search-and-filters.css.js
+++ b/studio/src/translation/mas-search-and-filters.css.js
@@ -5,18 +5,6 @@ export const styles = css`
         display: block;
     }
 
-    .search {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        margin: 32px 0 20px 0;
-    }
-
-    .search sp-search {
-        flex: 1;
-        max-width: 400px;
-    }
-
     .result-count {
         color: var(--spectrum-gray-700);
         font-size: 14px;
@@ -25,6 +13,7 @@ export const styles = css`
 
     .filters {
         display: flex;
+        align-items: center;
         gap: 12px;
         margin-bottom: 8px;
         flex-wrap: wrap;
diff --git a/studio/src/translation/mas-search-and-filters.js b/studio/src/translation/mas-search-and-filters.js
index fe7a7535a..b330dc524 100644
--- a/studio/src/translation/mas-search-and-filters.js
+++ b/studio/src/translation/mas-search-and-filters.js
@@ -129,17 +129,20 @@ class MasSearchAndFilters extends LitElement {
         this.productOptions = Array.from(products.values()).sort((a, b) => a.title.localeCompare(b.title));
     }
 
-    #handleSearchInput({ target: { value: query } }) {
-        this.searchQuery = query;
-        this.#applyFilters();
-    }
-
-    #handleSearchSubmit(e) {
-        e.preventDefault();
-        this.#applyFilters();
+    willUpdate(changed) {
+        if (
+            changed.has('searchQuery') ||
+            changed.has('templateFilter') ||
+            changed.has('marketSegmentFilter') ||
+            changed.has('customerSegmentFilter') ||
+            changed.has('productFilter')
+        ) {
+            this.#applyFilters();
+        }
     }
 
     #handleCheckboxChange(filterType, optionId, e) {
+        e.stopPropagation();
         let currentValues;
         switch (filterType) {
             case FILTER_TYPE.TEMPLATE:
@@ -180,7 +183,6 @@ class MasSearchAndFilters extends LitElement {
                 this.productFilter = currentValues;
                 break;
         }
-        this.#applyFilters();
     }
 
     #handleTagDelete({
@@ -202,7 +204,6 @@ class MasSearchAndFilters extends LitElement {
                 this.productFilter = this.productFilter.filter((filterId) => filterId !== id);
                 break;
         }
-        this.#applyFilters();
     }
 
     #clearAllFilters() {
@@ -210,7 +211,6 @@ class MasSearchAndFilters extends LitElement {
         this.marketSegmentFilter = [];
         this.customerSegmentFilter = [];
         this.productFilter = [];
-        this.#applyFilters();
     }
 
     #renderAppliedFilters() {
@@ -332,46 +332,28 @@ class MasSearchAndFilters extends LitElement {
     }
 
     render() {
+        if (this.searchOnly) {
+            return html`${this.renderCount()}`;
+        }
         return html`
-            <div class="search">
-                <sp-search
-                    size="m"
-                    placeholder="Search fragments..."
-                    value=${this.searchQuery}
-                    .disabled=${this.isLoading}
-                    @input=${this.#handleSearchInput}
-                    @submit=${this.#handleSearchSubmit}
-                ></sp-search>
+            <div class="filters">
                 ${this.renderCount()}
+                ${this.#renderFilterPicker('Template', this.templateOptions, this.templateFilter, FILTER_TYPE.TEMPLATE)}
+                ${this.#renderFilterPicker(
+                    'Market Segment',
+                    this.marketSegmentOptions,
+                    this.marketSegmentFilter,
+                    FILTER_TYPE.MARKET_SEGMENT,
+                )}
+                ${this.#renderFilterPicker(
+                    'Customer Segment',
+                    this.customerSegmentOptions,
+                    this.customerSegmentFilter,
+                    FILTER_TYPE.CUSTOMER_SEGMENT,
+                )}
+                ${this.#renderFilterPicker('Product', this.productOptions, this.productFilter, FILTER_TYPE.PRODUCT)}
             </div>
-
-            ${this.searchOnly
-                ? nothing
-                : html`
-                      <div class="filters">
-                          ${this.#renderFilterPicker(
-                              'Template',
-                              this.templateOptions,
-                              this.templateFilter,
-                              FILTER_TYPE.TEMPLATE,
-                          )}
-                          ${this.#renderFilterPicker(
-                              'Market Segment',
-                              this.marketSegmentOptions,
-                              this.marketSegmentFilter,
-                              FILTER_TYPE.MARKET_SEGMENT,
-                          )}
-                          ${this.#renderFilterPicker(
-                              'Customer Segment',
-                              this.customerSegmentOptions,
-                              this.customerSegmentFilter,
-                              FILTER_TYPE.CUSTOMER_SEGMENT,
-                          )}
-                          ${this.#renderFilterPicker('Product', this.productOptions, this.productFilter, FILTER_TYPE.PRODUCT)}
-                      </div>
-
-                      ${this.#renderAppliedFilters()}
-                  `}
+            ${this.#renderAppliedFilters()}
         `;
     }
 }
diff --git a/studio/src/translation/mas-select-items-table.css.js b/studio/src/translation/mas-select-items-table.css.js
index 197a1674d..37778408c 100644
--- a/studio/src/translation/mas-select-items-table.css.js
+++ b/studio/src/translation/mas-select-items-table.css.js
@@ -16,6 +16,27 @@ export const styles = [
     css`
         :host {
             width: 100%;
+            display: flex;
+            min-height: 0;
+        }
+
+        sp-table {
+            flex: 1;
+            min-height: 0;
+            overflow: auto;
+            border: 1px solid var(--spectrum-gray-300);
+            border-radius: 12px;
+        }
+
+        .fragments-table sp-table-head {
+            border: none;
+            border-radius: 0;
+        }
+
+        .fragments-table sp-table-head sp-table-head-cell:first-of-type,
+        .fragments-table sp-table-head sp-table-head-cell:last-of-type,
+        .fragments-table sp-table-head sp-table-checkbox-cell:first-of-type {
+            border-radius: 0;
         }
 
         :host([data-type='view-only']) {
@@ -23,6 +44,19 @@ export const styles = [
         }
 
         .fragments-table {
+            sp-table-head {
+                position: sticky;
+                top: -1px;
+                z-index: 10;
+                background: var(--spectrum-gray-75);
+                box-shadow: 0 -2px 0 0 var(--spectrum-gray-75);
+            }
+
+            sp-table-head sp-table-head-cell,
+            sp-table-head sp-table-checkbox-cell {
+                background: var(--spectrum-gray-75);
+            }
+
             sp-table-head sp-table-checkbox-cell:first-of-type {
                 border-top-left-radius: 12px;
             }
diff --git a/studio/src/translation/mas-select-items-table.js b/studio/src/translation/mas-select-items-table.js
index 9a3c5a063..d377e6797 100644
--- a/studio/src/translation/mas-select-items-table.js
+++ b/studio/src/translation/mas-select-items-table.js
@@ -32,7 +32,7 @@ class MasSelectItemsTable extends LitElement {
         super();
         this.dataSubscription = null;
         this.processAbortController = null;
-        this.dataState = { isProcessingCards: false, processAbortController: null };
+        this.dataState = { isProcessingCards: false, pendingCards: null, abortController: null };
         this.viewOnlyLoading = false;
         this.viewOnlyFragments = [];
         this.displayCardsStoreController = null;
@@ -47,6 +47,9 @@ class MasSelectItemsTable extends LitElement {
 
     connectedCallback() {
         super.connectedCallback();
+        this.dataState.abortController = new AbortController();
+        this.dataState.isProcessingCards = false;
+        this.dataState.pendingCards = null;
         if (this.viewOnly) {
             if (this.type === TABLE_TYPE.PLACEHOLDERS) {
                 this.viewOnlyLoading = !!Store.translationProjects.selectedPlaceholders.value?.length;
@@ -83,17 +86,6 @@ class MasSelectItemsTable extends LitElement {
                 this.dataSubscription = loadAllFragments(this.type, this.repository, this.dataState);
             }
         }
-        if (!this.viewOnly && this.type !== TABLE_TYPE.PLACEHOLDERS) {
-            this.scrollObserver = new IntersectionObserver(
-                (entries) => {
-                    if (entries[0]?.isIntersecting && this.hasMore.value && !this.loading.value) {
-                        this.repository?.loadNextPage();
-                    }
-                },
-                { rootMargin: '200px' },
-            );
-        }
-
         this[`selected${this.typeUppercased}StoreController`] = new ReactiveController(this, [
             Store.fragments.list.loading,
             Store.placeholders.list.loading,
@@ -118,6 +110,17 @@ class MasSelectItemsTable extends LitElement {
         this.wasLoading = this.loading.value;
 
         const sentinel = this.renderRoot.querySelector('.scroll-sentinel');
+        const scrollRoot = this.renderRoot.querySelector('sp-table');
+        if (!this.scrollObserver && scrollRoot && !this.viewOnly && this.type !== TABLE_TYPE.PLACEHOLDERS) {
+            this.scrollObserver = new IntersectionObserver(
+                (entries) => {
+                    if (entries[0]?.isIntersecting && this.hasMore.value && !this.loading.value) {
+                        this.repository?.loadNextPage();
+                    }
+                },
+                { root: scrollRoot, rootMargin: '200px' },
+            );
+        }
         if (sentinel && sentinel !== this.observedSentinel) {
             this.scrollObserver?.disconnect();
             this.scrollObserver?.observe(sentinel);
@@ -127,13 +130,14 @@ class MasSelectItemsTable extends LitElement {
             this.observedSentinel = null;
         } else if (loadingJustCompleted && this.hasMore.value) {
             this.scrollObserver?.unobserve(sentinel);
-            this.scrollObserver?.observe(sentinel);
+            requestAnimationFrame(() => this.scrollObserver?.observe(sentinel));
         }
     }
 
     disconnectedCallback() {
         super.disconnectedCallback();
         this.dataSubscription?.unsubscribe();
+        this.dataState.abortController?.abort();
         this.processAbortController?.abort();
         this.processAbortController = null;
         this.scrollObserver?.disconnect();
@@ -329,9 +333,10 @@ class MasSelectItemsTable extends LitElement {
                                 )}
                             </sp-table-head>
                             <sp-table-body>${this.#renderTableBody()}</sp-table-body>
+                            ${this.hasMore.value ? html`<div class="scroll-sentinel"></div>` : nothing}
+                            ${this.loadingMoreIndicator}
                         </sp-table>`
-                      : html`<p>No items found.</p>`}
-                  ${this.hasMore.value ? html`<div class="scroll-sentinel"></div>` : nothing} ${this.loadingMoreIndicator}`}
+                      : html`<p>No items found.</p>`}`}
         `;
     }
 }
diff --git a/studio/src/translation/mas-selected-items.css.js b/studio/src/translation/mas-selected-items.css.js
index 3911ebc82..2fb70e7f8 100644
--- a/studio/src/translation/mas-selected-items.css.js
+++ b/studio/src/translation/mas-selected-items.css.js
@@ -6,6 +6,8 @@ export const styles = [
     css`
         :host {
             display: flex;
+            min-height: 0;
+            max-height: 100%;
         }
 
         .selected-items {
@@ -17,6 +19,8 @@ export const styles = [
             border: 1px solid var(--spectrum-gray-300);
             border-radius: 12px;
             background: var(--spectrum-gray-50);
+            overflow-y: auto;
+            min-height: 0;
 
             .item {
                 display: grid;
diff --git a/studio/src/translation/mas-translation-editor.css.js b/studio/src/translation/mas-translation-editor.css.js
index d693bfa8b..a1a8a5d4b 100644
--- a/studio/src/translation/mas-translation-editor.css.js
+++ b/studio/src/translation/mas-translation-editor.css.js
@@ -113,8 +113,7 @@ export const styles = [
             border-radius: 10px;
         }
 
-        .add-langs-dialog,
-        .add-items-dialog {
+        .add-langs-dialog {
             --mod-dialog-confirm-buttongroup-padding-top: 82px;
         }
 
diff --git a/studio/src/translation/mas-translation-editor.js b/studio/src/translation/mas-translation-editor.js
index 6098d7527..91e4124a7 100644
--- a/studio/src/translation/mas-translation-editor.js
+++ b/studio/src/translation/mas-translation-editor.js
@@ -11,7 +11,7 @@ import '../mas-quick-actions.js';
 import './mas-translation-languages.js';
 import router from '../router.js';
 import { normalizeKey, showToast } from '../utils.js';
-import { PAGE_NAMES, TRANSLATION_PROJECT_MODEL_ID, QUICK_ACTION } from '../constants.js';
+import { PAGE_NAMES, TRANSLATION_PROJECT_MODEL_ID, QUICK_ACTION, TABLE_TYPE } from '../constants.js';
 
 class MasTranslationEditor extends LitElement {
     static styles = styles;
@@ -34,6 +34,7 @@ class MasTranslationEditor extends LitElement {
     #collectionsSnapshot = [];
     #placeholdersSnapshot = [];
     #targetLocalesSnapshot = [];
+    #itemsConfirmed = false;
 
     constructor() {
         super();
@@ -68,6 +69,9 @@ class MasTranslationEditor extends LitElement {
         if (this.repository?.loadPlaceholders) {
             this.repository.loadPlaceholders();
         }
+        if (this.repository?.loadAllCollections) {
+            this.repository.loadAllCollections();
+        }
 
         // reset locale to default
         Store.search.set((prev) => ({ ...prev, region: null }));
@@ -96,6 +100,7 @@ class MasTranslationEditor extends LitElement {
             Store.translationProjects.selectedPlaceholders,
             Store.translationProjects.targetLocales,
             Store.translationProjects.projectType,
+            Store.translationProjects.showSelected,
         ]);
         this.isProjectReadonly = !!this.translationProject?.getFieldValue('submissionDate');
         if (this.isProjectReadonly) {
@@ -121,11 +126,11 @@ class MasTranslationEditor extends LitElement {
     }
 
     get selectedCount() {
-        return [
-            ...Store.translationProjects.selectedCards.value,
-            ...Store.translationProjects.selectedPlaceholders.value,
-            ...Store.translationProjects.selectedCollections.value,
-        ].length;
+        return (
+            Store.translationProjects.selectedCards.value.length +
+            Store.translationProjects.selectedPlaceholders.value.length +
+            Store.translationProjects.selectedCollections.value.length
+        );
     }
 
     get targetLocalesCount() {
@@ -458,6 +463,7 @@ class MasTranslationEditor extends LitElement {
         this.#cardsSnapshot = [];
         this.#collectionsSnapshot = [];
         this.#placeholdersSnapshot = [];
+        this.#itemsConfirmed = true;
         this.#updateDisabledActions({ remove: [QUICK_ACTION.SAVE, QUICK_ACTION.DISCARD] });
         const closeEvent = new Event('close', { bubbles: true, composed: true });
         target.dispatchEvent(closeEvent);
@@ -468,14 +474,33 @@ class MasTranslationEditor extends LitElement {
         Store.translationProjects.selectedCollections.set(this.#collectionsSnapshot);
         Store.translationProjects.selectedPlaceholders.set(this.#placeholdersSnapshot);
         this.showSelectedEmptyState = this.selectedCount === 0;
+        this.#itemsConfirmed = true;
         const closeEvent = new Event('close', { bubbles: true, composed: true });
         target.dispatchEvent(closeEvent);
     };
 
-    #openAddItemsOverlay() {
+    #openAddItemsOverlay(e) {
+        if (e && e.target !== e.currentTarget) return;
+        this.#itemsConfirmed = false;
         this.#cardsSnapshot = Store.translationProjects.selectedCards.value;
         this.#placeholdersSnapshot = Store.translationProjects.selectedPlaceholders.value;
         this.#collectionsSnapshot = Store.translationProjects.selectedCollections.value;
+
+        const selector = this.renderRoot.querySelector('mas-items-selector');
+        if (selector) {
+            selector.searchQuery = '';
+            selector.selectedTab = TABLE_TYPE.CARDS;
+            const searchAndFilters = selector.renderRoot.querySelector('mas-search-and-filters');
+            if (searchAndFilters) {
+                searchAndFilters.templateFilter = [];
+                searchAndFilters.marketSegmentFilter = [];
+                searchAndFilters.customerSegmentFilter = [];
+                searchAndFilters.productFilter = [];
+            }
+        }
+        Store.translationProjects.displayCards.set(Store.translationProjects.allCards.get());
+        Store.translationProjects.displayCollections.set(Store.translationProjects.allCollections.get());
+        Store.translationProjects.displayPlaceholders.set(Store.translationProjects.allPlaceholders.get());
     }
 
     #openAddLanguagesOverlay() {
@@ -508,23 +533,57 @@ class MasTranslationEditor extends LitElement {
     };
 
     renderAddItemsDialog() {
+        const footerContent = html`
+            <sp-button-group>
+                <sp-button variant="secondary" treatment="outline" @click=${() => this.#dispatchDialogEvent('cancel')}
+                    >Cancel</sp-button
+                >
+                <sp-button variant="accent" @click=${() => this.#dispatchDialogEvent('confirm')}>Add selected items</sp-button>
+            </sp-button-group>
+        `;
         return html`
             <sp-dialog-wrapper
                 class="add-items-dialog"
                 slot="click-content"
                 headline="Select items"
-                confirm-label="Add selected items"
-                cancel-label="Cancel"
+                headline-visibility="none"
+                .footer=${footerContent}
                 underlay
+                dismissable
                 no-divider
+                @sp-opened=${this.#alignItemsDialogFooter}
                 @confirm=${this.#confirmItemSelection}
                 @cancel=${this.#cancelItemSelection}
+                @close=${this.#restoreItemsSnapshot}
             >
                 <mas-items-selector></mas-items-selector>
             </sp-dialog-wrapper>
         `;
     }
 
+    #alignItemsDialogFooter = ({ target }) => {
+        const slotDiv = target?.shadowRoot?.querySelector('div[slot="footer"]');
+        if (!slotDiv) return;
+        slotDiv.style.width = '100%';
+        slotDiv.style.display = 'flex';
+        slotDiv.style.justifyContent = 'flex-end';
+    };
+
+    // Flag stays sticky across the duplicate close event sp-dialog-wrapper emits after confirm/cancel;
+    // it's cleared on the next #openAddItemsOverlay so a re-opened dialog starts fresh.
+    #restoreItemsSnapshot = () => {
+        if (this.#itemsConfirmed) return;
+        Store.translationProjects.selectedCards.set(this.#cardsSnapshot);
+        Store.translationProjects.selectedCollections.set(this.#collectionsSnapshot);
+        Store.translationProjects.selectedPlaceholders.set(this.#placeholdersSnapshot);
+        this.showSelectedEmptyState = this.selectedCount === 0;
+    };
+
+    #dispatchDialogEvent = (name) => {
+        const wrapper = this.renderRoot.querySelector('.add-items-dialog');
+        wrapper?.dispatchEvent(new CustomEvent(name, { bubbles: true, composed: true }));
+    };
+
     renderAddLanguagesDialog() {
         return html`
             <sp-dialog-wrapper
diff --git a/studio/src/translation/mas-translation.css.js b/studio/src/translation/mas-translation.css.js
index 23f2146c8..4199004db 100644
--- a/studio/src/translation/mas-translation.css.js
+++ b/studio/src/translation/mas-translation.css.js
@@ -1,8 +1,9 @@
 import { css } from 'lit';
-import { loadingContainerCenteredStyles, tableHeaderBaseStyles, tableCellBaseStyles } from './translation-common-styles.css.js';
+import { tableHeaderBaseStyles, tableCellBaseStyles } from './translation-common-styles.css.js';
+import { skeletonStyles } from '../common/skeleton-styles.css.js';
 
 export const styles = [
-    loadingContainerCenteredStyles,
+    skeletonStyles,
     tableHeaderBaseStyles,
     tableCellBaseStyles,
     css`
@@ -32,6 +33,10 @@ export const styles = [
                 sp-table-cell:last-child {
                     max-width: 100px;
                 }
+
+                sp-table-head-cell.align-right {
+                    text-align: right;
+                }
             }
 
             .action-cell {
diff --git a/studio/src/translation/mas-translation.js b/studio/src/translation/mas-translation.js
index b52a74126..f819743d4 100644
--- a/studio/src/translation/mas-translation.js
+++ b/studio/src/translation/mas-translation.js
@@ -7,6 +7,14 @@ import ReactiveController from '../reactivity/reactive-controller.js';
 import { PAGE_NAMES, TRANSLATIONS_ALLOWED_SURFACES } from '../constants.js';
 import { showToast } from '../utils.js';
 
+const translationSkeletonRow = () =>
+    html`<sp-table-row class="skeleton-row">
+        <sp-table-cell class="title"><div class="skeleton-element skeleton-table-cell"></div></sp-table-cell>
+        <sp-table-cell class="lastUpdatedBy"><div class="skeleton-element skeleton-table-cell"></div></sp-table-cell>
+        <sp-table-cell class="sentOn"><div class="skeleton-element skeleton-table-cell"></div></sp-table-cell>
+        <sp-table-cell class="actions"></sp-table-cell>
+    </sp-table-row>`;
+
 class MasTranslation extends LitElement {
     static styles = styles;
 
@@ -77,30 +85,35 @@ class MasTranslation extends LitElement {
         `;
     }
 
+    get translationProjectsTableHead() {
+        return html`<sp-table-head>
+            ${[...this.columns].map(
+                ({ key, label, align }) => html`
+                    <sp-table-head-cell
+                        class="${key}${align === 'right' ? ' align-right' : ''}"
+                        .sortable=${key === 'sentOn'}
+                        sort-direction="asc"
+                        sort-key="sentOn"
+                        @sorted=${this.#sortBySentOn}
+                    >
+                        ${label}
+                    </sp-table-head-cell>
+                `,
+            )}
+        </sp-table-head>`;
+    }
+
     get translationsProjectsContent() {
-        if (Store.translationProjects?.list?.loading?.get()) {
-            return html`<div class="loading-container--absolute">
-                <sp-progress-circle indeterminate size="l"></sp-progress-circle>
-            </div>`;
+        const isLoading = Store.translationProjects?.list?.loading?.get();
+        if (isLoading && !this.translationProjectsData.length) {
+            return html` <sp-table emphasized .scroller=${true} class="translation-table">
+                ${this.translationProjectsTableHead}
+                <sp-table-body> ${Array.from({ length: 5 }, translationSkeletonRow)} </sp-table-body>
+            </sp-table>`;
         }
         if (this.translationProjectsData.length) {
             return html` <sp-table emphasized .scroller=${true} class="translation-table">
-                <sp-table-head>
-                    ${[...this.columns].map(
-                        ({ key, label, align }) => html`
-                            <sp-table-head-cell
-                                class=${key}
-                                style="${align === 'right' ? 'text-align: right;' : ''}"
-                                .sortable=${key === 'sentOn'}
-                                sort-direction="asc"
-                                sort-key="sentOn"
-                                @sorted=${this.#sortBySentOn}
-                            >
-                                ${label}
-                            </sp-table-head-cell>
-                        `,
-                    )}
-                </sp-table-head>
+                ${this.translationProjectsTableHead}
                 <sp-table-body>
                     ${repeat(
                         this.translationProjectsData,
diff --git a/studio/src/translation/translation-items-loader.js b/studio/src/translation/translation-items-loader.js
index 5ee3a1a62..d6e7b44c3 100644
--- a/studio/src/translation/translation-items-loader.js
+++ b/studio/src/translation/translation-items-loader.js
@@ -1,5 +1,5 @@
 import Store from '../store.js';
-import { CARD_MODEL_PATH, COLLECTION_MODEL_PATH, TABLE_TYPE } from '../constants.js';
+import { CARD_MODEL_PATH, TABLE_TYPE } from '../constants.js';
 import { Fragment } from '../aem/fragment.js';
 import { getFragmentName } from './translation-utils.js';
 import { getService } from '../utils.js';
@@ -196,42 +196,36 @@ export function setCardVariationsByPaths(groupedVariationsByParentValue) {
 }
 
 /**
- * Parses fragments from store into cards and collections with studioPath
+ * Extracts card fragments from the shared fragment store, decorating each with studioPath.
+ * Collections come from repository.loadAllCollections() — not this stream.
  * @param {Array} allFragments - Array of fragment store objects
- * @returns {{ allCards: Array, allCollections: Array }}
+ * @returns {Array} Array of card objects
  */
-function parseFragmentsFromStore(allFragments) {
-    return (allFragments || []).reduce(
-        (acc, fragment) => {
-            const withPath = {
-                ...fragment.value,
-                studioPath: getFragmentName(fragment.value),
-            };
-            if (fragment.value.model.path === CARD_MODEL_PATH) {
-                acc.allCards.push(withPath);
-            } else if (fragment.value.model.path === COLLECTION_MODEL_PATH) {
-                acc.allCollections.push(withPath);
-            }
-            return acc;
-        },
-        { allCards: [], allCollections: [] },
-    );
+function parseCardsFromStore(allFragments) {
+    return (allFragments || [])
+        .filter((fragment) => fragment.value.model.path === CARD_MODEL_PATH)
+        .map((fragment) => ({
+            ...fragment.value,
+            studioPath: getFragmentName(fragment.value),
+        }));
 }
 
 /**
- * Processes and enriches cards with offer data and grouped variations, writes to store
+ * Processes and enriches cards with offer data and grouped variations, writes to store.
+ * Re-entrant: if a call arrives while one is already in flight, the new payload is
+ * stashed in state.pendingCards and processed when the current call settles. This
+ * preserves the latest snapshot rather than dropping it on the floor.
  * @param {Array<Object>} allCards - Array of card objects
  * @param {Object} repository - MasRepository instance
- * @param {AbortSignal} signal - Abort signal for cancellation
- * @param {Object} state - Mutable state { isProcessingCards, processAbortController }
+ * @param {Object} state - Mutable state { isProcessingCards, pendingCards, abortController }
  */
 async function processCardsData(allCards, repository, state) {
     if (state.isProcessingCards) {
-        state.processAbortController?.abort();
+        state.pendingCards = allCards;
+        return;
     }
     state.isProcessingCards = true;
-    state.processAbortController = new AbortController();
-    const { signal: currentSignal } = state.processAbortController;
+    const signal = state.abortController?.signal;
 
     try {
         const existingCards = Store.translationProjects.allCards.get() || [];
@@ -248,10 +242,10 @@ async function processCardsData(allCards, repository, state) {
         if (cardsNeedingOfferData.length > 0) {
             const offerDataResults = await processConcurrently(
                 cardsNeedingOfferData,
-                (card) => loadOfferData(card, currentSignal),
+                (card) => loadOfferData(card, signal),
                 OFFER_DATA_CONCURRENCY_LIMIT,
             );
-            if (currentSignal.aborted) return;
+            if (signal?.aborted) return;
             await yieldToMain();
             cardsNeedingOfferData.forEach((card, i) => {
                 existingOfferDataByPath.set(card.path, offerDataResults[i]);
@@ -262,17 +256,17 @@ async function processCardsData(allCards, repository, state) {
         if (cardsNeedingGroupedVariations.length > 0 && repository) {
             const groupedVariationsResults = await processConcurrently(
                 cardsNeedingGroupedVariations,
-                (card) => loadGroupedVariations(card, repository, currentSignal),
+                (card) => loadGroupedVariations(card, repository, signal),
                 OFFER_DATA_CONCURRENCY_LIMIT,
             );
-            if (currentSignal.aborted) return;
+            if (signal?.aborted) return;
             await yieldToMain();
             cardsNeedingGroupedVariations.forEach((card, i) => {
                 existingGroupedVariationsByPath.set(card.path, groupedVariationsResults[i] ?? []);
             });
         }
 
-        if (currentSignal.aborted) return;
+        if (signal?.aborted) return;
 
         const enrichedCards = allCards.map((card) => ({
             ...card,
@@ -283,7 +277,7 @@ async function processCardsData(allCards, repository, state) {
         if (enrichedCards.length > 50) {
             await yieldToMain();
         }
-        if (currentSignal.aborted) return;
+        if (signal?.aborted) return;
 
         const cardsByPaths = new Map(enrichedCards.map((card) => [card.path, card]));
         const prefetchedVariations = new Map(
@@ -304,20 +298,14 @@ async function processCardsData(allCards, repository, state) {
         Store.translationProjects.cardsByPaths.set(cardsByPaths);
     } finally {
         state.isProcessingCards = false;
+        if (state.pendingCards && !signal?.aborted) {
+            const next = state.pendingCards;
+            state.pendingCards = null;
+            await processCardsData(next, repository, state);
+        }
     }
 }
 
-/**
- * Processes collections and writes to store
- * @param {Array<Object>} allCollections - Array of collection objects
- */
-function processCollectionsData(allCollections) {
-    Store.translationProjects.displayCollections.set(allCollections);
-    Store.translationProjects.allCollections.set(allCollections);
-    const collectionsByPaths = new Map(allCollections.map((f) => [f.path, f]));
-    Store.translationProjects.collectionsByPaths.set(collectionsByPaths);
-}
-
 /**
  * Loads all placeholders. Subscribes to placeholders list and populates store.
  * @returns {{ unsubscribe: () => void }}
@@ -345,20 +333,27 @@ export function loadAllPlaceholders() {
  * @returns {{ unsubscribe: () => void }}
  */
 export function loadAllFragments(type, repository, state = {}) {
-    const typeUppercased = type.charAt(0).toUpperCase() + type.slice(1);
-    if (Store.translationProjects[`all${typeUppercased}`].get()?.length) {
+    // Collections load via repository.loadAllCollections() with a dedicated model-filtered
+    // query; partitioning the shared card stream misses collections that sit deep in the
+    // cursor on large surfaces (acom, nala) where cards dominate the first pages.
+    if (type === TABLE_TYPE.COLLECTIONS) {
+        return { unsubscribe: () => {} };
+    }
+    if (state.subscribed) {
         return { unsubscribe: () => {} };
     }
+    state.subscribed = true;
     const callback = async () => {
-        const { allCards, allCollections } = parseFragmentsFromStore(Store.fragments.list.data.get() || []);
-        if (type === TABLE_TYPE.CARDS) {
-            await processCardsData(allCards, repository, state);
-        } else {
-            processCollectionsData(allCollections);
-        }
+        const allCards = parseCardsFromStore(Store.fragments.list.data.get() || []);
+        await processCardsData(allCards, repository, state);
     };
     Store.fragments.list.data.subscribe(callback);
-    return { unsubscribe: () => Store.fragments.list.data.unsubscribe(callback) };
+    return {
+        unsubscribe: () => {
+            Store.fragments.list.data.unsubscribe(callback);
+            state.subscribed = false;
+        },
+    };
 }
 
 /**
diff --git a/studio/test/mas-content.test.js b/studio/test/mas-content.test.js
index 1a65610a7..2c1b8bb8c 100644
--- a/studio/test/mas-content.test.js
+++ b/studio/test/mas-content.test.js
@@ -1,4 +1,5 @@
-import { expect, fixture, html } from '@open-wc/testing';
+import { expect, fixture, html, nextFrame } from '@open-wc/testing';
+import sinon from 'sinon';
 import '../src/swc.js';
 import { Fragment } from '../src/aem/fragment.js';
 import Store from '../src/store.js';
@@ -94,6 +95,36 @@ describe('MasContent table + personalization grouping', () => {
         expect(text).to.include('All other fragments (1)');
     });
 
+    it('uses requestAnimationFrame to re-observe sentinel after a page load completes', async () => {
+        Store.fragments.list.loading.set(true);
+        Store.fragments.list.firstPageLoaded.set(true);
+        Store.fragments.list.hasMore.set(true);
+        Store.fragments.list.data.value = [];
+
+        const el = await fixture(html`<mas-content></mas-content>`);
+        await el.updateComplete;
+
+        // Capture RAF callbacks without executing them — proves observe() is deferred
+        const rafCallbacks = [];
+        const rafStub = sinon.stub(window, 'requestAnimationFrame').callsFake((cb) => {
+            rafCallbacks.push(cb);
+            return rafCallbacks.length;
+        });
+
+        try {
+            Store.fragments.list.loading.set(false);
+            await el.updateComplete;
+
+            // RAF was scheduled
+            expect(rafStub.called).to.be.true;
+            // Callback was NOT yet executed (observe is deferred)
+            expect(rafCallbacks).to.have.length(1);
+        } finally {
+            rafStub.restore();
+            Store.fragments.list.hasMore.set(false);
+        }
+    });
+
     it('narrows the personalization group when selected filter tags are non-country PZN ids', async () => {
         const withGeneral = makeFragment({
             id: 'g',
diff --git a/studio/test/mas-repository.test.js b/studio/test/mas-repository.test.js
index fa1dcc237..013ddc1be 100644
--- a/studio/test/mas-repository.test.js
+++ b/studio/test/mas-repository.test.js
@@ -1665,7 +1665,9 @@ describe('MasRepository dictionary helpers', () => {
         });
 
         it('loadNextPage appends fragments and updates data store', async () => {
-            const page1 = Array.from({ length: 10 }, (_, i) =>
+            // First page has MIN_FILTERED_PAGE_RESULTS items so the refill loop does not fire,
+            // keeping loadNextPage as the only path that extends the list.
+            const page1 = Array.from({ length: MasRepository.MIN_FILTERED_PAGE_RESULTS }, (_, i) =>
                 createFragment({ id: `p1-${i}`, path: `${ROOT_PATH}/acom/en_US/p1-${i}`, fields: [] }),
             );
             const page2 = Array.from({ length: 10 }, (_, i) =>
@@ -1678,13 +1680,13 @@ describe('MasRepository dictionary helpers', () => {
                 const { default: Store } = await import('../src/store.js');
                 const firstSetCalls = Store.fragments.list.data.set.getCalls();
                 const firstCount = firstSetCalls[firstSetCalls.length - 1].args[0].length;
-                expect(firstCount).to.equal(10);
+                expect(firstCount).to.equal(MasRepository.MIN_FILTERED_PAGE_RESULTS);
                 expect(Store.fragments.list.hasMore.value).to.be.true;
 
                 await repository.loadNextPage();
                 const allSetCalls = Store.fragments.list.data.set.getCalls();
                 const lastCall = allSetCalls[allSetCalls.length - 1];
-                expect(lastCall.args[0].length).to.equal(20);
+                expect(lastCall.args[0].length).to.equal(MasRepository.MIN_FILTERED_PAGE_RESULTS + 10);
             } finally {
                 cleanup();
             }
@@ -1807,7 +1809,7 @@ describe('MasRepository dictionary helpers', () => {
         });
 
         it('sets loading false after successful loadNextPage', async () => {
-            const page1 = Array.from({ length: 10 }, (_, i) =>
+            const page1 = Array.from({ length: MasRepository.MIN_FILTERED_PAGE_RESULTS }, (_, i) =>
                 createFragment({ id: `l-${i}`, path: `${ROOT_PATH}/acom/en_US/l-${i}`, fields: [] }),
             );
             const page2 = Array.from({ length: 5 }, (_, i) =>
@@ -1828,7 +1830,7 @@ describe('MasRepository dictionary helpers', () => {
         });
 
         it('paginates results when page is TRANSLATION_EDITOR', async () => {
-            const page1 = Array.from({ length: 20 }, (_, i) =>
+            const page1 = Array.from({ length: MasRepository.MIN_FILTERED_PAGE_RESULTS }, (_, i) =>
                 createFragment({ id: `t1-${i}`, path: `${ROOT_PATH}/acom/en_US/t1-${i}`, fields: [] }),
             );
             const page2 = Array.from({ length: 5 }, (_, i) =>
@@ -1842,12 +1844,293 @@ describe('MasRepository dictionary helpers', () => {
                 const { default: Store } = await import('../src/store.js');
                 const setCalls = Store.fragments.list.data.set.getCalls();
                 const firstCall = setCalls[setCalls.length - 1];
-                expect(firstCall.args[0].length).to.equal(20);
+                expect(firstCall.args[0].length).to.equal(MasRepository.MIN_FILTERED_PAGE_RESULTS);
                 expect(Store.fragments.list.hasMore.value).to.be.true;
                 await repository.loadNextPage();
                 const nextCalls = Store.fragments.list.data.set.getCalls();
                 const lastCall = nextCalls[nextCalls.length - 1];
-                expect(lastCall.args[0].length).to.equal(25);
+                expect(lastCall.args[0].length).to.equal(MasRepository.MIN_FILTERED_PAGE_RESULTS + 5);
+            } finally {
+                cleanup();
+            }
+        });
+    });
+
+    describe('eagerLoadAllPznPages cap', () => {
+        const setupPznSearchTest = async (pageCount) => {
+            const repository = createFullRepository();
+            repository.page = { value: PAGE_NAMES.CONTENT };
+            repository.search = { value: { path: 'acom', query: '' } };
+            repository.filters = {
+                value: {
+                    locale: 'en_US',
+                    tags: '',
+                    personalizationFilterEnabled: true,
+                },
+            };
+            // Each page has MIN_PAGE_SIZE items so each #fillPage call consumes exactly 1 page
+            const pages = Array.from({ length: pageCount }, (_, p) =>
+                Array.from({ length: MasRepository.MIN_PAGE_SIZE }, (_, i) =>
+                    createFragment({
+                        id: `pzn-${p}-${i}`,
+                        path: `${ROOT_PATH}/acom/en_US/pzn-${p}-${i}`,
+                        tags: [{ id: 'mas:pzn/general' }],
+                        fields: [],
+                    }),
+                ),
+            );
+            let index = 0;
+            const mockCursor = {
+                next: async () => {
+                    if (index >= pages.length) return { done: true };
+                    const page = pages[index++];
+                    return {
+                        done: false,
+                        value: {
+                            [Symbol.asyncIterator]: async function* () {
+                                for (const item of page) yield item;
+                            },
+                        },
+                    };
+                },
+            };
+            const searchStub = sandbox.stub().resolves(mockCursor);
+            repository.aem = createAemMock({ fragments: { search: searchStub } });
+            const { default: Store } = await import('../src/store.js');
+            const originalProfile = Store.profile.value;
+            Store.profile.set({ name: 'test-user' });
+            Store.createdByUsers.set([]);
+            const mockDataStore = {
+                get: sandbox.stub().returns([]),
+                getMeta: sandbox.stub().returns(null),
+                set: sandbox.stub(),
+                setMeta: sandbox.stub(),
+            };
+            const originalData = Store.fragments.list.data;
+            Store.fragments.list.data = mockDataStore;
+            return {
+                repository,
+                mockDataStore,
+                cleanup: () => {
+                    Store.profile.set(originalProfile);
+                    Store.fragments.list.data = originalData;
+                },
+            };
+        };
+
+        it('stops eager loading after MAX_EAGER_PZN_PAGES and sets hasMore true', async () => {
+            const pageCount = MasRepository.MAX_EAGER_PZN_PAGES + 5;
+            const { repository, cleanup } = await setupPznSearchTest(pageCount);
+            try {
+                await repository.searchFragments();
+                const { default: Store } = await import('../src/store.js');
+                // Wait for the async eager-load loop to complete
+                await new Promise((resolve) => setTimeout(resolve, 50));
+                expect(Store.fragments.list.hasMore.value).to.be.true;
+            } finally {
+                cleanup();
+            }
+        });
+
+        it('does not set hasMore when all pages fit within MAX_EAGER_PZN_PAGES', async () => {
+            const pageCount = 2;
+            const { repository, cleanup } = await setupPznSearchTest(pageCount);
+            try {
+                await repository.searchFragments();
+                await new Promise((resolve) => setTimeout(resolve, 50));
+                const { default: Store } = await import('../src/store.js');
+                expect(Store.fragments.list.hasMore.value).to.be.false;
+            } finally {
+                cleanup();
+            }
+        });
+    });
+
+    describe('refillBelowThreshold', () => {
+        const setupRefillSearchTest = async ({ pages, personalizationFilterEnabled = false }) => {
+            const repository = createFullRepository();
+            repository.page = { value: PAGE_NAMES.CONTENT };
+            repository.search = { value: { path: 'acom', query: '' } };
+            repository.filters = {
+                value: {
+                    locale: 'en_US',
+                    tags: '',
+                    personalizationFilterEnabled,
+                },
+            };
+            let index = 0;
+            const mockCursor = {
+                next: async () => {
+                    if (index >= pages.length) return { done: true };
+                    const page = pages[index++];
+                    return {
+                        done: false,
+                        value: {
+                            [Symbol.asyncIterator]: async function* () {
+                                for (const item of page) yield item;
+                            },
+                        },
+                    };
+                },
+            };
+            const searchStub = sandbox.stub().resolves(mockCursor);
+            repository.aem = createAemMock({ fragments: { search: searchStub } });
+            const { default: Store } = await import('../src/store.js');
+            const originalProfile = Store.profile.value;
+            Store.profile.set({ name: 'test-user' });
+            Store.createdByUsers.set([]);
+            const mockDataStore = {
+                get: sandbox.stub().returns([]),
+                getMeta: sandbox.stub().returns(null),
+                set: sandbox.stub(),
+                setMeta: sandbox.stub(),
+            };
+            const originalData = Store.fragments.list.data;
+            Store.fragments.list.data = mockDataStore;
+            return {
+                repository,
+                mockDataStore,
+                cleanup: () => {
+                    Store.profile.set(originalProfile);
+                    Store.fragments.list.data = originalData;
+                },
+            };
+        };
+
+        // Build a page of MIN_PAGE_SIZE (10) items where `visibleCount` are non-pzn
+        // (pass the filter) and the rest carry mas:pzn/general (dropped when pzn filter is off).
+        const mixedPage = (pageIndex, visibleCount) =>
+            Array.from({ length: MasRepository.MIN_PAGE_SIZE }, (_, i) => {
+                const isVisible = i < visibleCount;
+                return createFragment({
+                    id: `p${pageIndex}-${i}`,
+                    path: `${ROOT_PATH}/acom/en_US/p${pageIndex}-${i}`,
+                    tags: isVisible ? [] : [{ id: 'mas:pzn/general' }],
+                    fields: [],
+                });
+            });
+
+        const lastSetCount = (mockDataStore) => {
+            const calls = mockDataStore.set.getCalls();
+            return calls[calls.length - 1]?.args[0]?.length ?? 0;
+        };
+
+        it('refills when filtered count is below threshold until threshold is met', async () => {
+            // Each page contributes 5 visible items. 5 pages → 25 visible, threshold reached.
+            const pages = Array.from({ length: 8 }, (_, p) => mixedPage(p, 5));
+            const { repository, mockDataStore, cleanup } = await setupRefillSearchTest({ pages });
+            try {
+                await repository.searchFragments();
+                await new Promise((resolve) => setTimeout(resolve, 50));
+                expect(lastSetCount(mockDataStore)).to.be.at.least(MasRepository.MIN_FILTERED_PAGE_RESULTS);
+            } finally {
+                cleanup();
+            }
+        });
+
+        it('does not refill when first page already has threshold visible items', async () => {
+            // First fetch fills via #fillPage until it has MIN_PAGE_SIZE (10) items. After filter,
+            // all 10 remain visible (no pzn tags). Threshold is 25, so refill DOES kick in here —
+            // unless we make the first page large enough. Make each page contribute 30 visible items.
+            const pages = [mixedPage(0, 10), mixedPage(1, 10), mixedPage(2, 10), mixedPage(3, 10)];
+            const { repository, mockDataStore, cleanup } = await setupRefillSearchTest({ pages });
+            try {
+                await repository.searchFragments();
+                await new Promise((resolve) => setTimeout(resolve, 50));
+                // #fillPage fills until it reaches MIN_PAGE_SIZE items via cursor.next() calls.
+                // With all-visible pages, #fillPage consumes 1 page (10 items) and returns.
+                // Then refill runs because 10 < 25. It should loop until threshold or cursor end.
+                expect(lastSetCount(mockDataStore)).to.be.at.least(MasRepository.MIN_FILTERED_PAGE_RESULTS);
+            } finally {
+                cleanup();
+            }
+        });
+
+        it('terminates and sets hasMore=false when cursor is exhausted before threshold', async () => {
+            // Only 2 pages, each with 5 visible → 10 visible total, cursor exhausted.
+            const pages = [mixedPage(0, 5), mixedPage(1, 5)];
+            const { repository, mockDataStore, cleanup } = await setupRefillSearchTest({ pages });
+            try {
+                await repository.searchFragments();
+                await new Promise((resolve) => setTimeout(resolve, 50));
+                const { default: Store } = await import('../src/store.js');
+                expect(lastSetCount(mockDataStore)).to.equal(10);
+                expect(Store.fragments.list.hasMore.value).to.be.false;
+            } finally {
+                cleanup();
+            }
+        });
+
+        it('terminates on extremely narrow filter without infinite loop', async () => {
+            // 20 pages with only 1 visible item each → 20 visible total, cursor exhausted.
+            const pages = Array.from({ length: 20 }, (_, p) => mixedPage(p, 1));
+            const { repository, mockDataStore, cleanup } = await setupRefillSearchTest({ pages });
+            try {
+                await repository.searchFragments();
+                await new Promise((resolve) => setTimeout(resolve, 100));
+                const { default: Store } = await import('../src/store.js');
+                expect(lastSetCount(mockDataStore)).to.equal(20);
+                expect(Store.fragments.list.hasMore.value).to.be.false;
+            } finally {
+                cleanup();
+            }
+        });
+
+        it('skips refill when personalization is on (eager-pzn path runs instead)', async () => {
+            // Pages of all-pzn items so #filterStoresByPersonalizationEnabled (with pzn ON)
+            // returns everything. We just want to confirm the refill method is NOT the one
+            // running; #eagerLoadAllPznPages handles this path.
+            const pages = Array.from({ length: 3 }, (_, p) =>
+                Array.from({ length: MasRepository.MIN_PAGE_SIZE }, (_, i) =>
+                    createFragment({
+                        id: `pzn-${p}-${i}`,
+                        path: `${ROOT_PATH}/acom/en_US/pzn-${p}-${i}`,
+                        tags: [{ id: 'mas:pzn/general' }],
+                        fields: [],
+                    }),
+                ),
+            );
+            const { repository, mockDataStore, cleanup } = await setupRefillSearchTest({
+                pages,
+                personalizationFilterEnabled: true,
+            });
+            try {
+                await repository.searchFragments();
+                await new Promise((resolve) => setTimeout(resolve, 50));
+                const { default: Store } = await import('../src/store.js');
+                expect(Store.fragments.list.hasMore.value).to.be.false;
+                expect(lastSetCount(mockDataStore)).to.equal(30);
+            } finally {
+                cleanup();
+            }
+        });
+
+        it('stops refill after MAX_REFILL_ROUNDS and leaves hasMore=true', async () => {
+            // Many pages all fail the pzn filter so refill never reaches threshold.
+            // After MAX_REFILL_ROUNDS, refill bails and leaves hasMore=true so
+            // loadNextPage can continue on scroll.
+            const pages = Array.from({ length: MasRepository.MAX_REFILL_ROUNDS + 10 }, (_, p) => mixedPage(p, 0));
+            const { repository, cleanup } = await setupRefillSearchTest({ pages });
+            try {
+                await repository.searchFragments();
+                await new Promise((resolve) => setTimeout(resolve, 100));
+                const { default: Store } = await import('../src/store.js');
+                expect(Store.fragments.list.hasMore.value).to.be.true;
+            } finally {
+                cleanup();
+            }
+        });
+
+        it('sets loading=true during refill and resets to false when done', async () => {
+            // 3 pages with 5 visible each — refill runs for a few rounds.
+            // loading should be true during refill and false afterward.
+            const pages = [mixedPage(0, 5), mixedPage(1, 5), mixedPage(2, 5)];
+            const { repository, cleanup } = await setupRefillSearchTest({ pages });
+            try {
+                await repository.searchFragments();
+                await new Promise((resolve) => setTimeout(resolve, 50));
+                const { default: Store } = await import('../src/store.js');
+                expect(Store.fragments.list.loading.value).to.be.false;
             } finally {
                 cleanup();
             }
diff --git a/studio/test/placeholders/mas-placeholders.test.html.js b/studio/test/placeholders/mas-placeholders.test.html.js
index aea7ed8b1..46838e565 100644
--- a/studio/test/placeholders/mas-placeholders.test.html.js
+++ b/studio/test/placeholders/mas-placeholders.test.html.js
@@ -82,25 +82,18 @@ runTests(async () => {
             expect(element.shadowRoot).to.exist;
         });
 
-        // Loading state test
-        it('should display loading indicator when loading', async function () {
-            // Set loading state via Store
+        it('should display skeleton rows when loading', async function () {
             Store.placeholders.list.loading.set(true);
             await elementUpdated(element);
-
-            // Check for progress circle
             await new Promise((r) => setTimeout(r, 50));
-            const progressCircle = element.shadowRoot.querySelector('sp-progress-circle');
-            expect(progressCircle).to.exist;
+            const skeletonRows = element.shadowRoot.querySelectorAll('.skeleton-row');
+            expect(skeletonRows.length).to.be.greaterThan(0);
 
-            // Reset state
             Store.placeholders.list.loading.set(false);
             await elementUpdated(element);
             await new Promise((r) => setTimeout(r, 50));
-
-            // Check progress circle is gone
-            const progressAfter = element.shadowRoot.querySelector('sp-progress-circle');
-            expect(progressAfter).to.not.exist;
+            const skeletonAfter = element.shadowRoot.querySelectorAll('.skeleton-row');
+            expect(skeletonAfter.length).to.equal(0);
         });
 
         // Error display test
diff --git a/studio/test/settings/settings-store.test.js b/studio/test/settings/settings-store.test.js
index b7e921252..0de8cc387 100644
--- a/studio/test/settings/settings-store.test.js
+++ b/studio/test/settings/settings-store.test.js
@@ -956,7 +956,7 @@ describe('Settings Store Namespace', () => {
                         },
                         create: async (payload) => {
                             createCalls.push(payload);
-                            return { id: 'new-index', path: payload.parentPath + '/' + payload.name, fields: payload.fields };
+                            return { id: 'new-index', path: `${payload.parentPath}/${payload.name}`, fields: payload.fields };
                         },
                         getWithEtag: async (id) => ({ id, etag: 'test-etag' }),
                         publish: async (fragment) => {
diff --git a/studio/test/translation/mas-search-and-filters.test.js b/studio/test/translation/mas-search-and-filters.test.js
index 5d306467e..8306fa033 100644
--- a/studio/test/translation/mas-search-and-filters.test.js
+++ b/studio/test/translation/mas-search-and-filters.test.js
@@ -203,11 +203,10 @@ describe('MasSearchAndFilters', () => {
     });
 
     describe('rendering', () => {
-        it('should render search input', async () => {
+        it('should render result count', async () => {
             const el = await fixture(html`<mas-search-and-filters type="cards"></mas-search-and-filters>`);
-            const search = el.shadowRoot.querySelector('sp-search');
-            expect(search).to.exist;
-            expect(search.placeholder).to.equal('Search fragments...');
+            const resultCount = el.shadowRoot.querySelector('.result-count');
+            expect(resultCount).to.exist;
         });
 
         it('should render progress circle when loading', async () => {
@@ -216,13 +215,6 @@ describe('MasSearchAndFilters', () => {
             const progressCircle = el.shadowRoot.querySelector('sp-progress-circle');
             expect(progressCircle).to.exist;
         });
-
-        it('should disable search when loading', async () => {
-            Store.fragments.list.loading.set(true);
-            const el = await fixture(html`<mas-search-and-filters type="cards"></mas-search-and-filters>`);
-            const search = el.shadowRoot.querySelector('sp-search');
-            expect(search.disabled).to.be.true;
-        });
     });
 
     describe('filters rendering', () => {
@@ -284,6 +276,19 @@ describe('MasSearchAndFilters', () => {
                 expect(trigger.disabled).to.be.true;
             });
         });
+
+        it('should stop filter checkbox change events from bubbling to ancestors', async () => {
+            const el = await fixture(html`<mas-search-and-filters type="cards" .searchOnly=${false}></mas-search-and-filters>`);
+            el.templateOptions = [{ id: 'plans', title: 'Plans' }];
+            await el.updateComplete;
+            let ancestorSawChange = false;
+            el.addEventListener('change', () => {
+                ancestorSawChange = true;
+            });
+            const checkbox = el.shadowRoot.querySelector('sp-checkbox');
+            checkbox.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
+            expect(ancestorSawChange).to.be.false;
+        });
     });
 
     describe('applied filters rendering', () => {
@@ -335,13 +340,12 @@ describe('MasSearchAndFilters', () => {
     });
 
     describe('search functionality', () => {
-        it('should update searchQuery on input', async () => {
+        it('should apply filters when searchQuery property is set', async () => {
+            Store.translationProjects.allCards.set([createMockFragment({ title: 'Test Card' })]);
             const el = await fixture(html`<mas-search-and-filters type="cards"></mas-search-and-filters>`);
-            const search = el.shadowRoot.querySelector('sp-search');
-            search.value = 'test query';
-            search.dispatchEvent(new InputEvent('input', { bubbles: true }));
+            el.searchQuery = 'test';
             await el.updateComplete;
-            expect(el.searchQuery).to.equal('test query');
+            expect(Store.translationProjects.displayCards.get().length).to.equal(1);
         });
 
         it('should filter cards by title', async () => {
@@ -351,9 +355,7 @@ describe('MasSearchAndFilters', () => {
                 createMockFragment({ title: 'Another Photoshop' }),
             ]);
             const el = await fixture(html`<mas-search-and-filters type="cards"></mas-search-and-filters>`);
-            const search = el.shadowRoot.querySelector('sp-search');
-            search.value = 'photoshop';
-            search.dispatchEvent(new InputEvent('input', { bubbles: true }));
+            el.searchQuery = 'photoshop';
             await el.updateComplete;
             expect(Store.translationProjects.displayCards.get().length).to.equal(2);
         });
@@ -365,9 +367,7 @@ describe('MasSearchAndFilters', () => {
                 createMockFragment({ title: 'Illustrator Card' }),
             ]);
             const el = await fixture(html`<mas-search-and-filters type="cards"></mas-search-and-filters>`);
-            const search = el.shadowRoot.querySelector('sp-search');
-            search.value = 'Photoshop';
-            search.dispatchEvent(new InputEvent('input', { bubbles: true }));
+            el.searchQuery = 'Photoshop';
             await el.updateComplete;
             expect(Store.translationProjects.displayCards.get().length).to.equal(2);
         });
@@ -381,9 +381,7 @@ describe('MasSearchAndFilters', () => {
                 createMockFragment({ title: 'Card 2', tags: [] }),
             ]);
             const el = await fixture(html`<mas-search-and-filters type="cards"></mas-search-and-filters>`);
-            const search = el.shadowRoot.querySelector('sp-search');
-            search.value = 'photoshop';
-            search.dispatchEvent(new InputEvent('input', { bubbles: true }));
+            el.searchQuery = 'photoshop';
             await el.updateComplete;
             expect(Store.translationProjects.displayCards.get().length).to.equal(1);
         });
@@ -397,9 +395,7 @@ describe('MasSearchAndFilters', () => {
                 createMockFragment({ title: 'Card 2' }),
             ]);
             const el = await fixture(html`<mas-search-and-filters type="cards"></mas-search-and-filters>`);
-            const search = el.shadowRoot.querySelector('sp-search');
-            search.value = '12345';
-            search.dispatchEvent(new InputEvent('input', { bubbles: true }));
+            el.searchQuery = '12345';
             await el.updateComplete;
             expect(Store.translationProjects.displayCards.get().length).to.equal(1);
         });
@@ -410,9 +406,7 @@ describe('MasSearchAndFilters', () => {
                 createMockPlaceholder({ key: 'learn-more', value: 'Learn More' }),
             ]);
             const el = await fixture(html`<mas-search-and-filters type="placeholders"></mas-search-and-filters>`);
-            const search = el.shadowRoot.querySelector('sp-search');
-            search.value = 'buy';
-            search.dispatchEvent(new InputEvent('input', { bubbles: true }));
+            el.searchQuery = 'buy';
             await el.updateComplete;
             expect(Store.translationProjects.displayPlaceholders.get().length).to.equal(1);
         });
@@ -423,22 +417,20 @@ describe('MasSearchAndFilters', () => {
                 createMockPlaceholder({ key: 'cta-2', value: 'Learn More' }),
             ]);
             const el = await fixture(html`<mas-search-and-filters type="placeholders"></mas-search-and-filters>`);
-            const search = el.shadowRoot.querySelector('sp-search');
-            search.value = 'Learn';
-            search.dispatchEvent(new InputEvent('input', { bubbles: true }));
+            el.searchQuery = 'Learn';
             await el.updateComplete;
             expect(Store.translationProjects.displayPlaceholders.get().length).to.equal(1);
         });
 
-        it('should handle search submit event', async () => {
+        it('should apply filters when searchQuery changes', async () => {
             Store.translationProjects.allCards.set([createMockFragment({ title: 'Test Card' })]);
             const el = await fixture(html`<mas-search-and-filters type="cards"></mas-search-and-filters>`);
             el.searchQuery = 'test';
-            const search = el.shadowRoot.querySelector('sp-search');
-            const submitEvent = new Event('submit', { bubbles: true, cancelable: true });
-            search.dispatchEvent(submitEvent);
             await el.updateComplete;
             expect(Store.translationProjects.displayCards.get().length).to.equal(1);
+            el.searchQuery = 'nonexistent';
+            await el.updateComplete;
+            expect(Store.translationProjects.displayCards.get().length).to.equal(0);
         });
     });
 
@@ -567,8 +559,6 @@ describe('MasSearchAndFilters', () => {
             ]);
             const el = await fixture(html`<mas-search-and-filters type="cards" .searchOnly=${false}></mas-search-and-filters>`);
             el.templateFilter = ['plans'];
-            const search = el.shadowRoot.querySelector('sp-search');
-            search.dispatchEvent(new InputEvent('input', { bubbles: true }));
             await el.updateComplete;
             expect(Store.translationProjects.displayCards.get().length).to.equal(1);
         });
@@ -584,8 +574,6 @@ describe('MasSearchAndFilters', () => {
             ]);
             const el = await fixture(html`<mas-search-and-filters type="cards" .searchOnly=${false}></mas-search-and-filters>`);
             el.marketSegmentFilter = ['mas:market_segment/com'];
-            const search = el.shadowRoot.querySelector('sp-search');
-            search.dispatchEvent(new InputEvent('input', { bubbles: true }));
             await el.updateComplete;
             expect(Store.translationProjects.displayCards.get().length).to.equal(1);
         });
@@ -601,8 +589,6 @@ describe('MasSearchAndFilters', () => {
             ]);
             const el = await fixture(html`<mas-search-and-filters type="cards" .searchOnly=${false}></mas-search-and-filters>`);
             el.customerSegmentFilter = ['mas:customer_segment/individual'];
-            const search = el.shadowRoot.querySelector('sp-search');
-            search.dispatchEvent(new InputEvent('input', { bubbles: true }));
             await el.updateComplete;
             expect(Store.translationProjects.displayCards.get().length).to.equal(1);
         });
@@ -618,8 +604,6 @@ describe('MasSearchAndFilters', () => {
             ]);
             const el = await fixture(html`<mas-search-and-filters type="cards" .searchOnly=${false}></mas-search-and-filters>`);
             el.productFilter = ['mas:product_code/photoshop'];
-            const search = el.shadowRoot.querySelector('sp-search');
-            search.dispatchEvent(new InputEvent('input', { bubbles: true }));
             await el.updateComplete;
             expect(Store.translationProjects.displayCards.get().length).to.equal(1);
         });
@@ -642,8 +626,6 @@ describe('MasSearchAndFilters', () => {
             const el = await fixture(html`<mas-search-and-filters type="cards" .searchOnly=${false}></mas-search-and-filters>`);
             el.marketSegmentFilter = ['mas:market_segment/com'];
             el.productFilter = ['mas:product_code/photoshop'];
-            const search = el.shadowRoot.querySelector('sp-search');
-            search.dispatchEvent(new InputEvent('input', { bubbles: true }));
             await el.updateComplete;
             expect(Store.translationProjects.displayCards.get().length).to.equal(1);
         });
@@ -656,8 +638,6 @@ describe('MasSearchAndFilters', () => {
             ]);
             const el = await fixture(html`<mas-search-and-filters type="cards" .searchOnly=${false}></mas-search-and-filters>`);
             el.templateFilter = ['plans'];
-            const search = el.shadowRoot.querySelector('sp-search');
-            search.dispatchEvent(new InputEvent('input', { bubbles: true }));
             await el.updateComplete;
             expect(Store.translationProjects.displayCards.get().length).to.equal(1);
         });
@@ -670,8 +650,6 @@ describe('MasSearchAndFilters', () => {
             ]);
             const el = await fixture(html`<mas-search-and-filters type="cards" .searchOnly=${false}></mas-search-and-filters>`);
             el.templateFilter = ['plans'];
-            const search = el.shadowRoot.querySelector('sp-search');
-            search.dispatchEvent(new InputEvent('input', { bubbles: true }));
             await el.updateComplete;
             expect(Store.translationProjects.displayCards.get().length).to.equal(0);
         });
@@ -684,8 +662,6 @@ describe('MasSearchAndFilters', () => {
             ]);
             const el = await fixture(html`<mas-search-and-filters type="cards" .searchOnly=${false}></mas-search-and-filters>`);
             el.templateFilter = ['plans'];
-            const search = el.shadowRoot.querySelector('sp-search');
-            search.dispatchEvent(new InputEvent('input', { bubbles: true }));
             await el.updateComplete;
             expect(Store.translationProjects.displayCards.get().length).to.equal(0);
         });
@@ -868,7 +844,7 @@ describe('MasSearchAndFilters', () => {
             const el = await fixture(html`<mas-search-and-filters type="placeholders"></mas-search-and-filters>`);
             Store.placeholders.list.data.set([createMockPlaceholder()]);
             await el.updateComplete;
-            expect(el.shadowRoot.querySelector('sp-search')).to.exist;
+            expect(el.shadowRoot.querySelector('.result-count')).to.exist;
         });
     });
 
@@ -880,8 +856,6 @@ describe('MasSearchAndFilters', () => {
             ]);
             const el = await fixture(html`<mas-search-and-filters type="cards"></mas-search-and-filters>`);
             el.searchQuery = '';
-            const search = el.shadowRoot.querySelector('sp-search');
-            search.dispatchEvent(new InputEvent('input', { bubbles: true }));
             await el.updateComplete;
             expect(Store.translationProjects.displayCards.get().length).to.equal(2);
         });
@@ -892,9 +866,7 @@ describe('MasSearchAndFilters', () => {
                 createMockFragment({ title: 'Has Title' }),
             ]);
             const el = await fixture(html`<mas-search-and-filters type="cards"></mas-search-and-filters>`);
-            const search = el.shadowRoot.querySelector('sp-search');
-            search.value = 'Has';
-            search.dispatchEvent(new InputEvent('input', { bubbles: true }));
+            el.searchQuery = 'Has';
             await el.updateComplete;
             expect(Store.translationProjects.displayCards.get().length).to.equal(1);
         });
@@ -905,9 +877,7 @@ describe('MasSearchAndFilters', () => {
                 createMockPlaceholder({ key: 'has-key', value: 'has-value' }),
             ]);
             const el = await fixture(html`<mas-search-and-filters type="placeholders"></mas-search-and-filters>`);
-            const search = el.shadowRoot.querySelector('sp-search');
-            search.value = 'has';
-            search.dispatchEvent(new InputEvent('input', { bubbles: true }));
+            el.searchQuery = 'has';
             await el.updateComplete;
             expect(Store.translationProjects.displayPlaceholders.get().length).to.equal(1);
         });
@@ -918,9 +888,7 @@ describe('MasSearchAndFilters', () => {
                 createMockFragment({ offerData: { offerId: 'ABC123' } }),
             ]);
             const el = await fixture(html`<mas-search-and-filters type="cards"></mas-search-and-filters>`);
-            const search = el.shadowRoot.querySelector('sp-search');
-            search.value = 'ABC';
-            search.dispatchEvent(new InputEvent('input', { bubbles: true }));
+            el.searchQuery = 'ABC';
             await el.updateComplete;
             expect(Store.translationProjects.displayCards.get().length).to.equal(1);
         });
@@ -929,8 +897,6 @@ describe('MasSearchAndFilters', () => {
             Store.translationProjects.allCards.set([]);
             const el = await fixture(html`<mas-search-and-filters type="cards"></mas-search-and-filters>`);
             el.searchQuery = 'test';
-            const search = el.shadowRoot.querySelector('sp-search');
-            search.dispatchEvent(new InputEvent('input', { bubbles: true }));
             await el.updateComplete;
             expect(Store.translationProjects.displayCards.get()).to.deep.equal([]);
         });
@@ -987,9 +953,7 @@ describe('MasSearchAndFilters', () => {
                 createMockFragment({ title: 'Illustrator Collection' }),
             ]);
             const el = await fixture(html`<mas-search-and-filters type="collections"></mas-search-and-filters>`);
-            const search = el.shadowRoot.querySelector('sp-search');
-            search.value = 'photoshop';
-            search.dispatchEvent(new InputEvent('input', { bubbles: true }));
+            el.searchQuery = 'photoshop';
             await el.updateComplete;
             expect(Store.translationProjects.displayCollections.get().length).to.equal(1);
         });
diff --git a/studio/test/translation/mas-select-items-table.test.js b/studio/test/translation/mas-select-items-table.test.js
index e199cb1bd..ac373db11 100644
--- a/studio/test/translation/mas-select-items-table.test.js
+++ b/studio/test/translation/mas-select-items-table.test.js
@@ -122,100 +122,128 @@ describe('MasSelectItemsTable', () => {
 
     describe('initialization', () => {
         it('should initialize with default values', async () => {
-            setupCardsInStore([createMockCard('/path/card1', 'Card 1')]);
             const el = await fixture(html`<mas-select-items-table type="cards"></mas-select-items-table>`);
+            await el.updateComplete;
+            setupCardsInStore([createMockCard('/path/card1', 'Card 1')]);
+            await el.updateComplete;
             expect(el.selectedInTable).to.deep.equal(new Set());
             expect(el.viewOnly).to.not.equal(true);
         });
 
         it('should accept type property for cards', async () => {
-            setupCardsInStore([createMockCard('/path/card1', 'Card 1')]);
             const el = await fixture(html`<mas-select-items-table type="cards"></mas-select-items-table>`);
+            await el.updateComplete;
+            setupCardsInStore([createMockCard('/path/card1', 'Card 1')]);
+            await el.updateComplete;
             expect(el.type).to.equal('cards');
         });
 
         it('should accept type property for collections', async () => {
-            setupCollectionsInStore([createMockCollection('/path/collection1', 'Collection 1')]);
             const el = await fixture(html`<mas-select-items-table type="collections"></mas-select-items-table>`);
+            await el.updateComplete;
+            setupCollectionsInStore([createMockCollection('/path/collection1', 'Collection 1')]);
+            await el.updateComplete;
             expect(el.type).to.equal('collections');
         });
 
         it('should accept type property for placeholders', async () => {
-            setupPlaceholdersInStore([createMockPlaceholder('/path/placeholder1', 'key1', 'value1')]);
             const el = await fixture(html`<mas-select-items-table type="placeholders"></mas-select-items-table>`);
+            await el.updateComplete;
+            setupPlaceholdersInStore([createMockPlaceholder('/path/placeholder1', 'key1', 'value1')]);
+            await el.updateComplete;
             expect(el.type).to.equal('placeholders');
         });
 
         it('should accept viewOnly property', async () => {
+            const el = await fixture(html`<mas-select-items-table type="cards" .viewOnly=${true}></mas-select-items-table>`);
+            await el.updateComplete;
             const card = createMockCard('/path/card1', 'Card 1');
             setupCardsInStore([card]);
             Store.translationProjects.selectedCards.set(['/path/card1']);
-            const el = await fixture(html`<mas-select-items-table type="cards" .viewOnly=${true}></mas-select-items-table>`);
+            await el.updateComplete;
             expect(el.viewOnly).to.be.true;
         });
     });
 
     describe('typeUppercased getter', () => {
         it('should return Cards for cards type', async () => {
-            setupCardsInStore([createMockCard('/path/card1', 'Card 1')]);
             const el = await fixture(html`<mas-select-items-table type="cards"></mas-select-items-table>`);
+            await el.updateComplete;
+            setupCardsInStore([createMockCard('/path/card1', 'Card 1')]);
+            await el.updateComplete;
             expect(el.typeUppercased).to.equal('Cards');
         });
 
         it('should return Collections for collections type', async () => {
-            setupCollectionsInStore([createMockCollection('/path/collection1', 'Collection 1')]);
             const el = await fixture(html`<mas-select-items-table type="collections"></mas-select-items-table>`);
+            await el.updateComplete;
+            setupCollectionsInStore([createMockCollection('/path/collection1', 'Collection 1')]);
+            await el.updateComplete;
             expect(el.typeUppercased).to.equal('Collections');
         });
 
         it('should return Placeholders for placeholders type', async () => {
-            setupPlaceholdersInStore([createMockPlaceholder('/path/placeholder1', 'key1', 'value1')]);
             const el = await fixture(html`<mas-select-items-table type="placeholders"></mas-select-items-table>`);
+            await el.updateComplete;
+            setupPlaceholdersInStore([createMockPlaceholder('/path/placeholder1', 'key1', 'value1')]);
+            await el.updateComplete;
             expect(el.typeUppercased).to.equal('Placeholders');
         });
     });
 
     describe('isLoading getter', () => {
         it('should return true for cards when firstPageLoaded is false', async () => {
+            const el = await fixture(html`<mas-select-items-table type="cards"></mas-select-items-table>`);
+            await el.updateComplete;
             Store.fragments.list.firstPageLoaded.set(false);
             setupCardsInStore([createMockCard('/path/card1', 'Card 1')]);
-            const el = await fixture(html`<mas-select-items-table type="cards"></mas-select-items-table>`);
+            await el.updateComplete;
             expect(el.isLoading).to.be.true;
         });
 
         it('should return false for cards when firstPageLoaded is true', async () => {
+            const el = await fixture(html`<mas-select-items-table type="cards"></mas-select-items-table>`);
+            await el.updateComplete;
             Store.fragments.list.firstPageLoaded.set(true);
             setupCardsInStore([createMockCard('/path/card1', 'Card 1')]);
-            const el = await fixture(html`<mas-select-items-table type="cards"></mas-select-items-table>`);
+            await el.updateComplete;
             expect(el.isLoading).to.be.false;
         });
 
         it('should return true for collections when firstPageLoaded is false', async () => {
+            const el = await fixture(html`<mas-select-items-table type="collections"></mas-select-items-table>`);
+            await el.updateComplete;
             Store.fragments.list.firstPageLoaded.set(false);
             setupCollectionsInStore([createMockCollection('/path/collection1', 'Collection 1')]);
-            const el = await fixture(html`<mas-select-items-table type="collections"></mas-select-items-table>`);
+            await el.updateComplete;
             expect(el.isLoading).to.be.true;
         });
 
         it('should return true for placeholders when placeholders are loading', async () => {
+            const el = await fixture(html`<mas-select-items-table type="placeholders"></mas-select-items-table>`);
+            await el.updateComplete;
             Store.placeholders.list.loading.set(true);
             setupPlaceholdersInStore([createMockPlaceholder('/path/placeholder1', 'key1', 'value1')]);
-            const el = await fixture(html`<mas-select-items-table type="placeholders"></mas-select-items-table>`);
+            await el.updateComplete;
             expect(el.isLoading).to.be.true;
         });
 
         it('should return false for placeholders when not loading', async () => {
+            const el = await fixture(html`<mas-select-items-table type="placeholders"></mas-select-items-table>`);
+            await el.updateComplete;
             Store.placeholders.list.loading.set(false);
             setupPlaceholdersInStore([createMockPlaceholder('/path/placeholder1', 'key1', 'value1')]);
-            const el = await fixture(html`<mas-select-items-table type="placeholders"></mas-select-items-table>`);
+            await el.updateComplete;
             expect(el.isLoading).to.be.false;
         });
 
         it('should return viewOnlyLoading for cards when viewOnly is true', async () => {
+            const el = await fixture(html`<mas-select-items-table type="cards" .viewOnly=${true}></mas-select-items-table>`);
+            await el.updateComplete;
             const card = createMockCard('/path/card1', 'Card 1');
             setupCardsInStore([card]);
             Store.translationProjects.selectedCards.set(['/path/card1']);
-            const el = await fixture(html`<mas-select-items-table type="cards" .viewOnly=${true}></mas-select-items-table>`);
+            await el.updateComplete;
             el.viewOnlyLoading = true;
             expect(el.isLoading).to.be.true;
             el.viewOnlyLoading = false;
@@ -223,12 +251,14 @@ describe('MasSelectItemsTable', () => {
         });
 
         it('should return viewOnlyLoading for collections when viewOnly is true', async () => {
-            const collection = createMockCollection('/path/collection1', 'Collection 1');
-            setupCollectionsInStore([collection]);
-            Store.translationProjects.selectedCollections.set(['/path/collection1']);
             const el = await fixture(
                 html`<mas-select-items-table type="collections" .viewOnly=${true}></mas-select-items-table>`,
             );
+            await el.updateComplete;
+            const collection = createMockCollection('/path/collection1', 'Collection 1');
+            setupCollectionsInStore([collection]);
+            Store.translationProjects.selectedCollections.set(['/path/collection1']);
+            await el.updateComplete;
             el.viewOnlyLoading = true;
             expect(el.isLoading).to.be.true;
         });
@@ -236,25 +266,31 @@ describe('MasSelectItemsTable', () => {
 
     describe('itemsToDisplay getter', () => {
         it('should return displayCards from store when not viewOnly', async () => {
+            const el = await fixture(html`<mas-select-items-table type="cards"></mas-select-items-table>`);
+            await el.updateComplete;
             const cards = [createMockCard('/path/card1', 'Card 1')];
             setupCardsInStore(cards);
-            const el = await fixture(html`<mas-select-items-table type="cards"></mas-select-items-table>`);
+            await el.updateComplete;
             expect(el.itemsToDisplay.length).to.equal(1);
             expect(el.itemsToDisplay[0].path).to.equal('/path/card1');
         });
 
         it('should return displayCollections from store when not viewOnly', async () => {
+            const el = await fixture(html`<mas-select-items-table type="collections"></mas-select-items-table>`);
+            await el.updateComplete;
             const collections = [createMockCollection('/path/collection1', 'Collection 1')];
             setupCollectionsInStore(collections);
-            const el = await fixture(html`<mas-select-items-table type="collections"></mas-select-items-table>`);
+            await el.updateComplete;
             expect(el.itemsToDisplay.length).to.equal(1);
             expect(el.itemsToDisplay[0].path).to.equal('/path/collection1');
         });
 
         it('should return displayPlaceholders from store when not viewOnly', async () => {
+            const el = await fixture(html`<mas-select-items-table type="placeholders"></mas-select-items-table>`);
+            await el.updateComplete;
             const placeholders = [createMockPlaceholder('/path/placeholder1', 'key1', 'value1')];
             setupPlaceholdersInStore(placeholders);
-            const el = await fixture(html`<mas-select-items-table type="placeholders"></mas-select-items-table>`);
+            await el.updateComplete;
             expect(el.itemsToDisplay.length).to.equal(1);
             expect(el.itemsToDisplay[0].path).to.equal('/path/placeholder1');
         });
@@ -278,9 +314,11 @@ describe('MasSelectItemsTable', () => {
 
     describe('rendering - loading state', () => {
         it('should render loading indicator when loading', async () => {
+            const el = await fixture(html`<mas-select-items-table type="cards"></mas-select-items-table>`);
+            await el.updateComplete;
             Store.fragments.list.firstPageLoaded.set(false);
             setupCardsInStore([createMockCard('/path/card1', 'Card 1')]);
-            const el = await fixture(html`<mas-select-items-table type="cards"></mas-select-items-table>`);
+            await el.updateComplete;
             const loadingContainer = el.shadowRoot.querySelector('.loading-container--flex');
             const progressCircle = el.shadowRoot.querySelector('sp-progress-circle');
             expect(loadingContainer).to.exist;
@@ -288,9 +326,11 @@ describe('MasSelectItemsTable', () => {
         });
 
         it('should not render loading indicator when not loading', async () => {
+            const el = await fixture(html`<mas-select-items-table type="cards"></mas-select-items-table>`);
+            await el.updateComplete;
             Store.fragments.list.firstPageLoaded.set(true);
             setupCardsInStore([createMockCard('/path/card1', 'Card 1')]);
-            const el = await fixture(html`<mas-select-items-table type="cards"></mas-select-items-table>`);
+            await el.updateComplete;
             const loadingContainer = el.shadowRoot.querySelector('.loading-container--flex');
             expect(loadingContainer).to.be.null;
         });
@@ -298,8 +338,10 @@ describe('MasSelectItemsTable', () => {
 
     describe('rendering - empty state', () => {
         it('should render "No items found" when no items to display', async () => {
-            setupCardsInStore([]);
             const el = await fixture(html`<mas-select-items-table type="cards"></mas-select-items-table>`);
+            await el.updateComplete;
+            setupCardsInStore([]);
+            await el.updateComplete;
             const emptyMessage = el.shadowRoot.querySelector('p');
             expect(emptyMessage).to.exist;
             expect(emptyMessage.textContent).to.equal('No items found.');
@@ -308,17 +350,21 @@ describe('MasSelectItemsTable', () => {
 
     describe('rendering - table structure', () => {
         it('should render table when items exist', async () => {
+            const el = await fixture(html`<mas-select-items-table type="cards"></mas-select-items-table>`);
+            await el.updateComplete;
             const cards = [createMockCard('/path/card1', 'Card 1')];
             setupCardsInStore(cards);
-            const el = await fixture(html`<mas-select-items-table type="cards"></mas-select-items-table>`);
+            await el.updateComplete;
             const table = el.shadowRoot.querySelector('sp-table');
             expect(table).to.exist;
         });
 
         it('should render table headers for cards', async () => {
+            const el = await fixture(html`<mas-select-items-table type="cards"></mas-select-items-table>`);
+            await el.updateComplete;
             const cards = [createMockCard('/path/card1', 'Card 1')];
             setupCardsInStore(cards);
-            const el = await fixture(html`<mas-select-items-table type="cards"></mas-select-items-table>`);
+            await el.updateComplete;
             const headers = el.shadowRoot.querySelectorAll('sp-table-head-cell');
             expect(headers.length).to.equal(7);
             expect(headers[2].textContent.trim()).to.include('Offer');
@@ -329,9 +375,11 @@ describe('MasSelectItemsTable', () => {
         });
 
         it('should render table headers for collections', async () => {
+            const el = await fixture(html`<mas-select-items-table type="collections"></mas-select-items-table>`);
+            await el.updateComplete;
             const collections = [createMockCollection('/path/collection1', 'Collection 1')];
             setupCollectionsInStore(collections);
-            const el = await fixture(html`<mas-select-items-table type="collections"></mas-select-items-table>`);
+            await el.updateComplete;
             const headers = el.shadowRoot.querySelectorAll('sp-table-head-cell');
             expect(headers.length).to.equal(4);
             expect(headers[1].textContent.trim()).to.include('Collection title');
@@ -340,9 +388,11 @@ describe('MasSelectItemsTable', () => {
         });
 
         it('should render table headers for placeholders', async () => {
+            const el = await fixture(html`<mas-select-items-table type="placeholders"></mas-select-items-table>`);
+            await el.updateComplete;
             const placeholders = [createMockPlaceholder('/path/placeholder1', 'key1', 'value1')];
             setupPlaceholdersInStore(placeholders);
-            const el = await fixture(html`<mas-select-items-table type="placeholders"></mas-select-items-table>`);
+            await el.updateComplete;
             const headers = el.shadowRoot.querySelectorAll('sp-table-head-cell');
             expect(headers.length).to.equal(4);
             expect(headers[1].textContent.trim()).to.include('Key');
@@ -353,6 +403,8 @@ describe('MasSelectItemsTable', () => {
 
     describe('rendering - cards table body', () => {
         it('should render card rows with correct data', async () => {
+            const el = await fixture(html`<mas-select-items-table type="cards"></mas-select-items-table>`);
+            await el.updateComplete;
             const cards = [
                 createMockCard('/path/card1', 'Test Card', {
                     tags: [{ id: 'mas:product_code/photoshop', title: 'Photoshop' }],
@@ -361,7 +413,7 @@ describe('MasSelectItemsTable', () => {
                 }),
             ];
             setupCardsInStore(cards);
-            const el = await fixture(html`<mas-select-items-table type="cards"></mas-select-items-table>`);
+            await el.updateComplete;
             const collapsibleRow = el.shadowRoot.querySelector('mas-collapsible-table-row');
             expect(collapsibleRow).to.exist;
             const cells = collapsibleRow.shadowRoot.querySelectorAll('sp-table-cell');
@@ -370,9 +422,11 @@ describe('MasSelectItemsTable', () => {
         });
 
         it('should display placeholder when no product tag exists', async () => {
+            const el = await fixture(html`<mas-select-items-table type="cards"></mas-select-items-table>`);
+            await el.updateComplete;
             const cards = [createMockCard('/path/card1', 'Test Card')];
             setupCardsInStore(cards);
-            const el = await fixture(html`<mas-select-items-table type="cards"></mas-select-items-table>`);
+            await el.updateComplete;
             const collapsibleRow = el.shadowRoot.querySelector('mas-collapsible-table-row');
             const cells = collapsibleRow.shadowRoot.querySelectorAll('sp-table-cell');
             const offerCell = cells[2]?.textContent?.trim() || '';
@@ -380,22 +434,26 @@ describe('MasSelectItemsTable', () => {
         });
 
         it('should render copy button when offer data exists', async () => {
+            const el = await fixture(html`<mas-select-items-table type="cards"></mas-select-items-table>`);
+            await el.updateComplete;
             const cards = [
                 createMockCard('/path/card1', 'Test Card', {
                     offerData: { offerId: 'offer-123' },
                 }),
             ];
             setupCardsInStore(cards);
-            const el = await fixture(html`<mas-select-items-table type="cards"></mas-select-items-table>`);
+            await el.updateComplete;
             const collapsibleRow = el.shadowRoot.querySelector('mas-collapsible-table-row');
             const copyButton = collapsibleRow.shadowRoot.querySelector('sp-action-button');
             expect(copyButton).to.exist;
         });
 
         it('should display "no offer data" when offerData is null', async () => {
+            const el = await fixture(html`<mas-select-items-table type="cards"></mas-select-items-table>`);
+            await el.updateComplete;
             const cards = [createMockCard('/path/card1', 'Test Card')];
             setupCardsInStore(cards);
-            const el = await fixture(html`<mas-select-items-table type="cards"></mas-select-items-table>`);
+            await el.updateComplete;
             const collapsibleRow = el.shadowRoot.querySelector('mas-collapsible-table-row');
             const cells = collapsibleRow.shadowRoot.querySelectorAll('sp-table-cell');
             expect(cells[4].textContent).to.include('no offer data');
@@ -404,13 +462,15 @@ describe('MasSelectItemsTable', () => {
 
     describe('rendering - collections table body', () => {
         it('should render collection rows with correct data', async () => {
+            const el = await fixture(html`<mas-select-items-table type="collections"></mas-select-items-table>`);
+            await el.updateComplete;
             const collections = [
                 createMockCollection('/path/collection1', 'Test Collection', {
                     studioPath: 'merch-card-collection: ACOM / Test Collection',
                 }),
             ];
             setupCollectionsInStore(collections);
-            const el = await fixture(html`<mas-select-items-table type="collections"></mas-select-items-table>`);
+            await el.updateComplete;
             const rows = el.shadowRoot.querySelectorAll('sp-table-row');
             expect(rows.length).to.equal(1);
             const cells = rows[0].querySelectorAll('sp-table-cell');
@@ -418,9 +478,11 @@ describe('MasSelectItemsTable', () => {
         });
 
         it('should display "-" for collection with no title', async () => {
+            const el = await fixture(html`<mas-select-items-table type="collections"></mas-select-items-table>`);
+            await el.updateComplete;
             const collections = [createMockCollection('/path/collection1', null)];
             setupCollectionsInStore(collections);
-            const el = await fixture(html`<mas-select-items-table type="collections"></mas-select-items-table>`);
+            await el.updateComplete;
             const rows = el.shadowRoot.querySelectorAll('sp-table-row');
             const cells = rows[0].querySelectorAll('sp-table-cell');
             expect(cells[1].textContent.trim()).to.equal('-');
@@ -429,9 +491,11 @@ describe('MasSelectItemsTable', () => {
 
     describe('rendering - placeholders table body', () => {
         it('should render placeholder rows with correct data', async () => {
+            const el = await fixture(html`<mas-select-items-table type="placeholders"></mas-select-items-table>`);
+            await el.updateComplete;
             const placeholders = [createMockPlaceholder('/path/placeholder1', 'test-key', 'test-value')];
             setupPlaceholdersInStore(placeholders);
-            const el = await fixture(html`<mas-select-items-table type="placeholders"></mas-select-items-table>`);
+            await el.updateComplete;
             const rows = el.shadowRoot.querySelectorAll('sp-table-row');
             expect(rows.length).to.equal(1);
             const cells = rows[0].querySelectorAll('sp-table-cell');
@@ -440,28 +504,34 @@ describe('MasSelectItemsTable', () => {
         });
 
         it('should display "-" for placeholder with no key', async () => {
+            const el = await fixture(html`<mas-select-items-table type="placeholders"></mas-select-items-table>`);
+            await el.updateComplete;
             const placeholders = [createMockPlaceholder('/path/placeholder1', null, 'test-value')];
             setupPlaceholdersInStore(placeholders);
-            const el = await fixture(html`<mas-select-items-table type="placeholders"></mas-select-items-table>`);
+            await el.updateComplete;
             const rows = el.shadowRoot.querySelectorAll('sp-table-row');
             const cells = rows[0].querySelectorAll('sp-table-cell');
             expect(cells[1].textContent.trim()).to.equal('-');
         });
 
         it('should truncate long placeholder values to 100 characters', async () => {
+            const el = await fixture(html`<mas-select-items-table type="placeholders"></mas-select-items-table>`);
+            await el.updateComplete;
             const longValue = 'A'.repeat(150);
             const placeholders = [createMockPlaceholder('/path/placeholder1', 'key', longValue)];
             setupPlaceholdersInStore(placeholders);
-            const el = await fixture(html`<mas-select-items-table type="placeholders"></mas-select-items-table>`);
+            await el.updateComplete;
             const rows = el.shadowRoot.querySelectorAll('sp-table-row');
             const cells = rows[0].querySelectorAll('sp-table-cell');
             expect(cells[2].textContent.trim()).to.equal(`${'A'.repeat(100)}...`);
         });
 
         it('should display "-" for placeholder with no value', async () => {
+            const el = await fixture(html`<mas-select-items-table type="placeholders"></mas-select-items-table>`);
+            await el.updateComplete;
             const placeholders = [createMockPlaceholder('/path/placeholder1', 'key', null)];
             setupPlaceholdersInStore(placeholders);
-            const el = await fixture(html`<mas-select-items-table type="placeholders"></mas-select-items-table>`);
+            await el.updateComplete;
             const rows = el.shadowRoot.querySelectorAll('sp-table-row');
             const cells = rows[0].querySelectorAll('sp-table-cell');
             expect(cells[2].textContent.trim()).to.equal('-');
@@ -470,9 +540,11 @@ describe('MasSelectItemsTable', () => {
 
     describe('rendering - status cell', () => {
         it('should render Published status with green dot', async () => {
+            const el = await fixture(html`<mas-select-items-table type="cards"></mas-select-items-table>`);
+            await el.updateComplete;
             const cards = [createMockCard('/path/card1', 'Card 1', { status: FRAGMENT_STATUS.PUBLISHED })];
             setupCardsInStore(cards);
-            const el = await fixture(html`<mas-select-items-table type="cards"></mas-select-items-table>`);
+            await el.updateComplete;
             const collapsibleRow = el.shadowRoot.querySelector('mas-collapsible-table-row');
             const statusCell = collapsibleRow.shadowRoot.querySelector('.status-cell');
             const statusDot = statusCell.querySelector('.status-dot');
@@ -481,9 +553,11 @@ describe('MasSelectItemsTable', () => {
         });
 
         it('should render Modified status with blue dot', async () => {
+            const el = await fixture(html`<mas-select-items-table type="cards"></mas-select-items-table>`);
+            await el.updateComplete;
             const cards = [createMockCard('/path/card1', 'Card 1', { status: FRAGMENT_STATUS.MODIFIED })];
             setupCardsInStore(cards);
-            const el = await fixture(html`<mas-select-items-table type="cards"></mas-select-items-table>`);
+            await el.updateComplete;
             const collapsibleRow = el.shadowRoot.querySelector('mas-collapsible-table-row');
             const statusCell = collapsibleRow.shadowRoot.querySelector('.status-cell');
             const statusDot = statusCell.querySelector('.status-dot');
@@ -492,9 +566,11 @@ describe('MasSelectItemsTable', () => {
         });
 
         it('should render Draft status without color class', async () => {
+            const el = await fixture(html`<mas-select-items-table type="cards"></mas-select-items-table>`);
+            await el.updateComplete;
             const cards = [createMockCard('/path/card1', 'Card 1', { status: FRAGMENT_STATUS.DRAFT })];
             setupCardsInStore(cards);
-            const el = await fixture(html`<mas-select-items-table type="cards"></mas-select-items-table>`);
+            await el.updateComplete;
             const collapsibleRow = el.shadowRoot.querySelector('mas-collapsible-table-row');
             const statusCell = collapsibleRow.shadowRoot.querySelector('.status-cell');
             const statusDot = statusCell.querySelector('.status-dot');
@@ -506,17 +582,20 @@ describe('MasSelectItemsTable', () => {
 
     describe('table selection behavior', () => {
         it('should render checkboxes when not viewOnly', async () => {
+            const el = await fixture(html`<mas-select-items-table type="cards"></mas-select-items-table>`);
+            await el.updateComplete;
             const cards = [createMockCard('/path/card1', 'Card 1')];
             setupCardsInStore(cards);
-            const el = await fixture(html`<mas-select-items-table type="cards"></mas-select-items-table>`);
+            await el.updateComplete;
             const row = el.shadowRoot.querySelector('mas-collapsible-table-row');
             const checkbox = row?.shadowRoot?.querySelector('sp-checkbox');
             expect(checkbox).to.exist;
         });
 
         it('should not render checkboxes when viewOnly', async () => {
-            const card = createMockCard('/path/card1', 'Card 1');
             const el = await fixture(html`<mas-select-items-table type="cards" .viewOnly=${true}></mas-select-items-table>`);
+            await el.updateComplete;
+            const card = createMockCard('/path/card1', 'Card 1');
             el.viewOnlyFragments = [card];
             await el.updateComplete;
             const row = el.shadowRoot.querySelector('mas-collapsible-table-row');
@@ -525,10 +604,11 @@ describe('MasSelectItemsTable', () => {
         });
 
         it('should reflect store selection in selectedInTable', async () => {
+            const el = await fixture(html`<mas-select-items-table type="cards"></mas-select-items-table>`);
+            await el.updateComplete;
             const cards = [createMockCard('/path/card1', 'Card 1'), createMockCard('/path/card2', 'Card 2')];
             setupCardsInStore(cards);
             Store.translationProjects.selectedCards.set(['/path/card1']);
-            const el = await fixture(html`<mas-select-items-table type="cards"></mas-select-items-table>`);
             await el.updateComplete;
             expect(el.selectedInTable).to.include('/path/card1');
         });
@@ -536,19 +616,21 @@ describe('MasSelectItemsTable', () => {
 
     describe('selection preselection', () => {
         it('should preselect items that are in the store selection', async () => {
+            const el = await fixture(html`<mas-select-items-table type="cards"></mas-select-items-table>`);
+            await el.updateComplete;
             const cards = [createMockCard('/path/card1', 'Card 1'), createMockCard('/path/card2', 'Card 2')];
             setupCardsInStore(cards);
             Store.translationProjects.selectedCards.set(['/path/card1']);
-            const el = await fixture(html`<mas-select-items-table type="cards"></mas-select-items-table>`);
             await el.updateComplete;
             expect(el.selectedInTable).to.include('/path/card1');
         });
 
         it('should reflect store selection in selectedInTable', async () => {
+            const el = await fixture(html`<mas-select-items-table type="cards"></mas-select-items-table>`);
+            await el.updateComplete;
             const cards = [createMockCard('/path/card1', 'Card 1')];
             setupCardsInStore(cards);
             Store.translationProjects.selectedCards.set(['/path/card1', '/path/card2']);
-            const el = await fixture(html`<mas-select-items-table type="cards"></mas-select-items-table>`);
             await el.updateComplete;
             expect(el.selectedInTable).to.include('/path/card1');
             expect(el.selectedInTable).to.include('/path/card2');
@@ -557,12 +639,14 @@ describe('MasSelectItemsTable', () => {
 
     describe('selection updates', () => {
         it('should update store when checkbox selection changes', async () => {
+            const el = await fixture(html`<mas-select-items-table type="cards"></mas-select-items-table>`);
+            await el.updateComplete;
             const cards = [createMockCard('/path/card1', 'Card 1'), createMockCard('/path/card2', 'Card 2')];
             setupCardsInStore(cards);
             Store.translationProjects.selectedCards.set(['/path/card1']);
-            const el = await fixture(html`<mas-select-items-table type="cards"></mas-select-items-table>`);
             await el.updateComplete;
             const row = el.shadowRoot.querySelector('mas-collapsible-table-row');
+            await row?.updateComplete;
             const checkbox = row?.shadowRoot?.querySelector('sp-checkbox');
             if (checkbox) {
                 checkbox.click();
@@ -574,6 +658,8 @@ describe('MasSelectItemsTable', () => {
 
     describe('copy to clipboard', () => {
         it('should dispatch show-toast event on successful copy', async () => {
+            const el = await fixture(html`<mas-select-items-table type="cards"></mas-select-items-table>`);
+            await el.updateComplete;
             const writeTextStub = sandbox.stub(navigator.clipboard, 'writeText').resolves();
             const cards = [
                 createMockCard('/path/card1', 'Test Card', {
@@ -581,7 +667,7 @@ describe('MasSelectItemsTable', () => {
                 }),
             ];
             setupCardsInStore(cards);
-            const el = await fixture(html`<mas-select-items-table type="cards"></mas-select-items-table>`);
+            await el.updateComplete;
 
             let toastEvent = null;
             el.addEventListener('show-toast', (e) => {
@@ -600,6 +686,8 @@ describe('MasSelectItemsTable', () => {
         });
 
         it('should dispatch negative toast on copy failure', async () => {
+            const el = await fixture(html`<mas-select-items-table type="cards"></mas-select-items-table>`);
+            await el.updateComplete;
             sandbox.stub(navigator.clipboard, 'writeText').rejects(new Error('Copy failed'));
             const cards = [
                 createMockCard('/path/card1', 'Test Card', {
@@ -607,7 +695,7 @@ describe('MasSelectItemsTable', () => {
                 }),
             ];
             setupCardsInStore(cards);
-            const el = await fixture(html`<mas-select-items-table type="cards"></mas-select-items-table>`);
+            await el.updateComplete;
 
             let toastEvent = null;
             el.addEventListener('show-toast', (e) => {
@@ -627,8 +715,10 @@ describe('MasSelectItemsTable', () => {
 
     describe('disconnectedCallback', () => {
         it('should unsubscribe from data subscription on disconnect', async () => {
-            setupCardsInStore([createMockCard('/path/card1', 'Card 1')]);
             const el = await fixture(html`<mas-select-items-table type="cards"></mas-select-items-table>`);
+            await el.updateComplete;
+            setupCardsInStore([createMockCard('/path/card1', 'Card 1')]);
+            await el.updateComplete;
             const unsubscribeSpy = sandbox.spy();
             el.dataSubscription = { unsubscribe: unsubscribeSpy };
 
@@ -638,8 +728,10 @@ describe('MasSelectItemsTable', () => {
         });
 
         it('should abort process controller on disconnect', async () => {
-            setupCardsInStore([createMockCard('/path/card1', 'Card 1')]);
             const el = await fixture(html`<mas-select-items-table type="cards"></mas-select-items-table>`);
+            await el.updateComplete;
+            setupCardsInStore([createMockCard('/path/card1', 'Card 1')]);
+            await el.updateComplete;
             const abortSpy = sandbox.spy();
             el.processAbortController = { abort: abortSpy };
 
@@ -649,8 +741,10 @@ describe('MasSelectItemsTable', () => {
         });
 
         it('should set processAbortController to null on disconnect', async () => {
-            setupCardsInStore([createMockCard('/path/card1', 'Card 1')]);
             const el = await fixture(html`<mas-select-items-table type="cards"></mas-select-items-table>`);
+            await el.updateComplete;
+            setupCardsInStore([createMockCard('/path/card1', 'Card 1')]);
+            await el.updateComplete;
             el.processAbortController = { abort: () => {} };
 
             el.disconnectedCallback();
@@ -661,46 +755,58 @@ describe('MasSelectItemsTable', () => {
 
     describe('store controllers', () => {
         it('should initialize display store controller when not viewOnly', async () => {
-            setupCardsInStore([createMockCard('/path/card1', 'Card 1')]);
             const el = await fixture(html`<mas-select-items-table type="cards"></mas-select-items-table>`);
+            await el.updateComplete;
+            setupCardsInStore([createMockCard('/path/card1', 'Card 1')]);
+            await el.updateComplete;
             expect(el.displayCardsStoreController).to.exist;
         });
 
         it('should initialize selected store controller for cards', async () => {
-            setupCardsInStore([createMockCard('/path/card1', 'Card 1')]);
             const el = await fixture(html`<mas-select-items-table type="cards"></mas-select-items-table>`);
+            await el.updateComplete;
+            setupCardsInStore([createMockCard('/path/card1', 'Card 1')]);
+            await el.updateComplete;
             expect(el.selectedCardsStoreController).to.exist;
         });
 
         it('should initialize selected store controller for collections', async () => {
-            setupCollectionsInStore([createMockCollection('/path/collection1', 'Collection 1')]);
             const el = await fixture(html`<mas-select-items-table type="collections"></mas-select-items-table>`);
+            await el.updateComplete;
+            setupCollectionsInStore([createMockCollection('/path/collection1', 'Collection 1')]);
+            await el.updateComplete;
             expect(el.selectedCollectionsStoreController).to.exist;
         });
 
         it('should initialize selected store controller for placeholders', async () => {
-            setupPlaceholdersInStore([createMockPlaceholder('/path/placeholder1', 'key1', 'value1')]);
             const el = await fixture(html`<mas-select-items-table type="placeholders"></mas-select-items-table>`);
+            await el.updateComplete;
+            setupPlaceholdersInStore([createMockPlaceholder('/path/placeholder1', 'key1', 'value1')]);
+            await el.updateComplete;
             expect(el.selectedPlaceholdersStoreController).to.exist;
         });
 
         it('should initialize display store controller when viewOnly (for consistent reactivity)', async () => {
+            const el = await fixture(html`<mas-select-items-table type="cards" .viewOnly=${true}></mas-select-items-table>`);
+            await el.updateComplete;
             const card = createMockCard('/path/card1', 'Card 1');
             setupCardsInStore([card]);
             Store.translationProjects.selectedCards.set(['/path/card1']);
-            const el = await fixture(html`<mas-select-items-table type="cards" .viewOnly=${true}></mas-select-items-table>`);
+            await el.updateComplete;
             expect(el.displayCardsStoreController).to.exist;
         });
     });
 
     describe('hidden selection preservation', () => {
         it('should preserve hidden selections when deselecting visible item', async () => {
+            const el = await fixture(html`<mas-select-items-table type="cards"></mas-select-items-table>`);
+            await el.updateComplete;
             const cards = [createMockCard('/path/card1', 'Card 1')];
             setupCardsInStore(cards);
             Store.translationProjects.selectedCards.set(['/path/card1', '/path/hidden-card']);
-            const el = await fixture(html`<mas-select-items-table type="cards"></mas-select-items-table>`);
             await el.updateComplete;
             const row = el.shadowRoot.querySelector('mas-collapsible-table-row');
+            await row?.updateComplete;
             const checkbox = row?.shadowRoot?.querySelector('sp-checkbox');
             checkbox?.click();
             await el.updateComplete;
@@ -711,35 +817,41 @@ describe('MasSelectItemsTable', () => {
 
     describe('multiple rows rendering', () => {
         it('should render multiple card rows', async () => {
+            const el = await fixture(html`<mas-select-items-table type="cards"></mas-select-items-table>`);
+            await el.updateComplete;
             const cards = [
                 createMockCard('/path/card1', 'Card 1'),
                 createMockCard('/path/card2', 'Card 2'),
                 createMockCard('/path/card3', 'Card 3'),
             ];
             setupCardsInStore(cards);
-            const el = await fixture(html`<mas-select-items-table type="cards"></mas-select-items-table>`);
+            await el.updateComplete;
             const rows = el.shadowRoot.querySelectorAll('mas-collapsible-table-row');
             expect(rows.length).to.equal(3);
         });
 
         it('should render multiple collection rows', async () => {
+            const el = await fixture(html`<mas-select-items-table type="collections"></mas-select-items-table>`);
+            await el.updateComplete;
             const collections = [
                 createMockCollection('/path/collection1', 'Collection 1'),
                 createMockCollection('/path/collection2', 'Collection 2'),
             ];
             setupCollectionsInStore(collections);
-            const el = await fixture(html`<mas-select-items-table type="collections"></mas-select-items-table>`);
+            await el.updateComplete;
             const rows = el.shadowRoot.querySelectorAll('sp-table-row');
             expect(rows.length).to.equal(2);
         });
 
         it('should render multiple placeholder rows', async () => {
+            const el = await fixture(html`<mas-select-items-table type="placeholders"></mas-select-items-table>`);
+            await el.updateComplete;
             const placeholders = [
                 createMockPlaceholder('/path/placeholder1', 'key1', 'value1'),
                 createMockPlaceholder('/path/placeholder2', 'key2', 'value2'),
             ];
             setupPlaceholdersInStore(placeholders);
-            const el = await fixture(html`<mas-select-items-table type="placeholders"></mas-select-items-table>`);
+            await el.updateComplete;
             const rows = el.shadowRoot.querySelectorAll('sp-table-row');
             expect(rows.length).to.equal(2);
         });
@@ -747,18 +859,22 @@ describe('MasSelectItemsTable', () => {
 
     describe('row value attribute', () => {
         it('should set row value attribute to fragment path for cards', async () => {
+            const el = await fixture(html`<mas-select-items-table type="cards"></mas-select-items-table>`);
+            await el.updateComplete;
             const cards = [createMockCard('/path/card1', 'Card 1')];
             setupCardsInStore(cards);
-            const el = await fixture(html`<mas-select-items-table type="cards"></mas-select-items-table>`);
+            await el.updateComplete;
             const collapsibleRow = el.shadowRoot.querySelector('mas-collapsible-table-row');
             const row = collapsibleRow?.shadowRoot?.querySelector('sp-table-row');
             expect(row?.getAttribute('value')).to.equal('/path/card1');
         });
 
         it('should set row value attribute to fragment path for placeholders', async () => {
+            const el = await fixture(html`<mas-select-items-table type="placeholders"></mas-select-items-table>`);
+            await el.updateComplete;
             const placeholders = [createMockPlaceholder('/path/placeholder1', 'key1', 'value1')];
             setupPlaceholdersInStore(placeholders);
-            const el = await fixture(html`<mas-select-items-table type="placeholders"></mas-select-items-table>`);
+            await el.updateComplete;
             const row = el.shadowRoot.querySelector('sp-table-row');
             expect(row.getAttribute('value')).to.equal('/path/placeholder1');
         });
@@ -766,40 +882,48 @@ describe('MasSelectItemsTable', () => {
 
     describe('edge cases', () => {
         it('should handle empty value in placeholder gracefully', async () => {
+            const el = await fixture(html`<mas-select-items-table type="placeholders"></mas-select-items-table>`);
+            await el.updateComplete;
             const placeholders = [createMockPlaceholder('/path/placeholder1', 'key', '')];
             setupPlaceholdersInStore(placeholders);
-            const el = await fixture(html`<mas-select-items-table type="placeholders"></mas-select-items-table>`);
+            await el.updateComplete;
             const row = el.shadowRoot.querySelector('sp-table-row');
             const cells = row?.querySelectorAll('sp-table-cell');
             expect(cells?.[2]?.textContent.trim()).to.equal('-');
         });
 
         it('should handle undefined status gracefully', async () => {
+            const el = await fixture(html`<mas-select-items-table type="cards"></mas-select-items-table>`);
+            await el.updateComplete;
             const cards = [{ ...createMockCard('/path/card1', 'Card 1'), status: undefined }];
             setupCardsInStore(cards);
-            const el = await fixture(html`<mas-select-items-table type="cards"></mas-select-items-table>`);
+            await el.updateComplete;
             const collapsibleRow = el.shadowRoot.querySelector('mas-collapsible-table-row');
             expect(collapsibleRow).to.exist;
         });
 
         it('should handle placeholder value exactly 100 characters', async () => {
+            const el = await fixture(html`<mas-select-items-table type="placeholders"></mas-select-items-table>`);
+            await el.updateComplete;
             const exactValue = 'B'.repeat(100);
             const placeholders = [createMockPlaceholder('/path/placeholder1', 'key', exactValue)];
             setupPlaceholdersInStore(placeholders);
-            const el = await fixture(html`<mas-select-items-table type="placeholders"></mas-select-items-table>`);
+            await el.updateComplete;
             const row = el.shadowRoot.querySelector('sp-table-row');
             const cells = row?.querySelectorAll('sp-table-cell');
             expect(cells?.[2]?.textContent.trim()).to.equal(exactValue);
         });
 
         it('should handle card with only non-product tags', async () => {
+            const el = await fixture(html`<mas-select-items-table type="cards"></mas-select-items-table>`);
+            await el.updateComplete;
             const cards = [
                 createMockCard('/path/card1', 'Card 1', {
                     tags: [{ id: 'mas:other/tag', title: 'Other' }],
                 }),
             ];
             setupCardsInStore(cards);
-            const el = await fixture(html`<mas-select-items-table type="cards"></mas-select-items-table>`);
+            await el.updateComplete;
             const collapsibleRow = el.shadowRoot.querySelector('mas-collapsible-table-row');
             const cells = collapsibleRow?.shadowRoot?.querySelectorAll('sp-table-cell');
             const offerCell = Array.from(cells || []).find((c) => c.textContent.includes('no offer') || c.textContent === '-');
@@ -807,6 +931,8 @@ describe('MasSelectItemsTable', () => {
         });
 
         it('should handle card with multiple tags including product code', async () => {
+            const el = await fixture(html`<mas-select-items-table type="cards"></mas-select-items-table>`);
+            await el.updateComplete;
             const cards = [
                 createMockCard('/path/card1', 'Card 1', {
                     tags: [
@@ -816,7 +942,7 @@ describe('MasSelectItemsTable', () => {
                 }),
             ];
             setupCardsInStore(cards);
-            const el = await fixture(html`<mas-select-items-table type="cards"></mas-select-items-table>`);
+            await el.updateComplete;
             const collapsibleRow = el.shadowRoot.querySelector('mas-collapsible-table-row');
             const cells = collapsibleRow?.shadowRoot?.querySelectorAll('sp-table-cell');
             expect(cells?.[2]?.textContent.trim()).to.equal('Illustrator');
@@ -858,13 +984,15 @@ describe('MasSelectItemsTable', () => {
 
     describe('studioPath display', () => {
         it('should display studioPath for cards', async () => {
+            const el = await fixture(html`<mas-select-items-table type="cards"></mas-select-items-table>`);
+            await el.updateComplete;
             const cards = [
                 createMockCard('/path/card1', 'Card 1', {
                     studioPath: 'merch-card: ACOM / Plans / Consumer',
                 }),
             ];
             setupCardsInStore(cards);
-            const el = await fixture(html`<mas-select-items-table type="cards"></mas-select-items-table>`);
+            await el.updateComplete;
             const row = el.shadowRoot.querySelector('mas-collapsible-table-row');
             const cells = row?.shadowRoot?.querySelectorAll('sp-table-cell');
             const pathCell = Array.from(cells || []).find((c) => c.textContent.includes('merch-card: ACOM'));
@@ -872,13 +1000,15 @@ describe('MasSelectItemsTable', () => {
         });
 
         it('should display studioPath for collections', async () => {
+            const el = await fixture(html`<mas-select-items-table type="collections"></mas-select-items-table>`);
+            await el.updateComplete;
             const collections = [
                 createMockCollection('/path/collection1', 'Collection 1', {
                     studioPath: 'merch-card-collection: ACOM / Collection 1',
                 }),
             ];
             setupCollectionsInStore(collections);
-            const el = await fixture(html`<mas-select-items-table type="collections"></mas-select-items-table>`);
+            await el.updateComplete;
             const row = el.shadowRoot.querySelector('sp-table-row');
             const cells = row?.querySelectorAll('sp-table-cell');
             expect(cells?.[2]?.textContent.trim()).to.equal('merch-card-collection: ACOM / Collection 1');
@@ -887,25 +1017,31 @@ describe('MasSelectItemsTable', () => {
 
     describe('data loading early returns', () => {
         it('should not create real subscription when allPlaceholders already has data', async () => {
+            const el = await fixture(html`<mas-select-items-table type="placeholders"></mas-select-items-table>`);
+            await el.updateComplete;
             const placeholders = [createMockPlaceholder('/path/placeholder1', 'key1', 'value1')];
             setupPlaceholdersInStore(placeholders);
-            const el = await fixture(html`<mas-select-items-table type="placeholders"></mas-select-items-table>`);
+            await el.updateComplete;
             expect(el.dataSubscription).to.exist;
             expect(el.dataSubscription.unsubscribe).to.be.a('function');
         });
 
         it('should not create real subscription when allCards already has data', async () => {
+            const el = await fixture(html`<mas-select-items-table type="cards"></mas-select-items-table>`);
+            await el.updateComplete;
             const cards = [createMockCard('/path/card1', 'Card 1')];
             setupCardsInStore(cards);
-            const el = await fixture(html`<mas-select-items-table type="cards"></mas-select-items-table>`);
+            await el.updateComplete;
             expect(el.dataSubscription).to.exist;
             expect(el.dataSubscription.unsubscribe).to.be.a('function');
         });
 
         it('should not create real subscription when allCollections already has data', async () => {
+            const el = await fixture(html`<mas-select-items-table type="collections"></mas-select-items-table>`);
+            await el.updateComplete;
             const collections = [createMockCollection('/path/collection1', 'Collection 1')];
             setupCollectionsInStore(collections);
-            const el = await fixture(html`<mas-select-items-table type="collections"></mas-select-items-table>`);
+            await el.updateComplete;
             expect(el.dataSubscription).to.exist;
             expect(el.dataSubscription.unsubscribe).to.be.a('function');
         });
@@ -933,10 +1069,11 @@ describe('MasSelectItemsTable', () => {
 
     describe('preselection edge cases', () => {
         it('should handle preselection when selectedInTable equals visible selections', async () => {
+            const el = await fixture(html`<mas-select-items-table type="cards"></mas-select-items-table>`);
+            await el.updateComplete;
             const cards = [createMockCard('/path/card1', 'Card 1')];
             setupCardsInStore(cards);
             Store.translationProjects.selectedCards.set(['/path/card1']);
-            const el = await fixture(html`<mas-select-items-table type="cards"></mas-select-items-table>`);
             await el.updateComplete;
             Store.translationProjects.displayCards.set([...cards]);
             await el.updateComplete;
@@ -944,10 +1081,11 @@ describe('MasSelectItemsTable', () => {
         });
 
         it('should not update selectedInTable when already equal', async () => {
+            const el = await fixture(html`<mas-select-items-table type="cards"></mas-select-items-table>`);
+            await el.updateComplete;
             const cards = [createMockCard('/path/card1', 'Card 1')];
             setupCardsInStore(cards);
             Store.translationProjects.selectedCards.set(['/path/card1']);
-            const el = await fixture(html`<mas-select-items-table type="cards"></mas-select-items-table>`);
             await el.updateComplete;
             const initialSelected = el.selectedInTable;
             Store.translationProjects.displayCards.set([...cards]);
@@ -989,38 +1127,48 @@ describe('MasSelectItemsTable', () => {
 
     describe('display store controller', () => {
         it('should initialize displayCardsStoreController when not viewOnly for cards', async () => {
-            setupCardsInStore([createMockCard('/path/card1', 'Card 1')]);
             const el = await fixture(html`<mas-select-items-table type="cards"></mas-select-items-table>`);
+            await el.updateComplete;
+            setupCardsInStore([createMockCard('/path/card1', 'Card 1')]);
+            await el.updateComplete;
             expect(el.displayCardsStoreController).to.not.be.null;
         });
 
         it('should initialize displayCollectionsStoreController when not viewOnly for collections', async () => {
-            setupCollectionsInStore([createMockCollection('/path/collection1', 'Collection 1')]);
             const el = await fixture(html`<mas-select-items-table type="collections"></mas-select-items-table>`);
+            await el.updateComplete;
+            setupCollectionsInStore([createMockCollection('/path/collection1', 'Collection 1')]);
+            await el.updateComplete;
             expect(el.displayCollectionsStoreController).to.not.be.null;
         });
 
         it('should initialize displayPlaceholdersStoreController when not viewOnly for placeholders', async () => {
-            setupPlaceholdersInStore([createMockPlaceholder('/path/placeholder1', 'key1', 'value1')]);
             const el = await fixture(html`<mas-select-items-table type="placeholders"></mas-select-items-table>`);
+            await el.updateComplete;
+            setupPlaceholdersInStore([createMockPlaceholder('/path/placeholder1', 'key1', 'value1')]);
+            await el.updateComplete;
             expect(el.displayPlaceholdersStoreController).to.not.be.null;
         });
     });
 
     describe('dataState', () => {
         it('should have dataState with isProcessingCards false by default', async () => {
+            const el = await fixture(html`<mas-select-items-table type="cards"></mas-select-items-table>`);
+            await el.updateComplete;
             const cards = [createMockCard('/path/card1', 'Card 1')];
             setupCardsInStore(cards);
-            const el = await fixture(html`<mas-select-items-table type="cards"></mas-select-items-table>`);
+            await el.updateComplete;
             expect(el.dataState?.isProcessingCards).to.be.false;
         });
     });
 
     describe('rendering with different statuses', () => {
         it('should render null status gracefully', async () => {
+            const el = await fixture(html`<mas-select-items-table type="cards"></mas-select-items-table>`);
+            await el.updateComplete;
             const cards = [{ ...createMockCard('/path/card1', 'Card 1'), status: null }];
             setupCardsInStore(cards);
-            const el = await fixture(html`<mas-select-items-table type="cards"></mas-select-items-table>`);
+            await el.updateComplete;
             const statusCell = el.shadowRoot.querySelector('.status-cell');
             expect(statusCell).to.be.null;
         });
@@ -1028,10 +1176,11 @@ describe('MasSelectItemsTable', () => {
 
     describe('fallback value handling', () => {
         it('should render without error when selectedCards is empty array', async () => {
+            const el = await fixture(html`<mas-select-items-table type="cards"></mas-select-items-table>`);
+            await el.updateComplete;
             const cards = [createMockCard('/path/card1', 'Card 1')];
             setupCardsInStore(cards);
             Store.translationProjects.selectedCards.set([]);
-            const el = await fixture(html`<mas-select-items-table type="cards"></mas-select-items-table>`);
             await el.updateComplete;
             expect(el.selectedInTable).to.deep.equal(new Set());
         });
@@ -1039,8 +1188,10 @@ describe('MasSelectItemsTable', () => {
 
     describe('constructor default values', () => {
         it('should initialize with correct default values', async () => {
-            setupCardsInStore([createMockCard('/path/card1', 'Card 1')]);
             const el = await fixture(html`<mas-select-items-table type="cards"></mas-select-items-table>`);
+            await el.updateComplete;
+            setupCardsInStore([createMockCard('/path/card1', 'Card 1')]);
+            await el.updateComplete;
             expect(el.selectedInTable).to.be.an('Set');
             expect(el.dataState).to.exist;
         });
@@ -1048,11 +1199,13 @@ describe('MasSelectItemsTable', () => {
 
     describe('multiple selection scenarios', () => {
         it('should add item to selection when checkbox is clicked', async () => {
+            const el = await fixture(html`<mas-select-items-table type="cards"></mas-select-items-table>`);
+            await el.updateComplete;
             const cards = [createMockCard('/path/card1', 'Card 1'), createMockCard('/path/card2', 'Card 2')];
             setupCardsInStore(cards);
-            const el = await fixture(html`<mas-select-items-table type="cards"></mas-select-items-table>`);
             await el.updateComplete;
             const row = el.shadowRoot.querySelector('mas-collapsible-table-row');
+            await row?.updateComplete;
             const checkbox = row?.shadowRoot?.querySelector('sp-checkbox');
             if (checkbox && !Store.translationProjects.selectedCards.get().includes('/path/card1')) {
                 checkbox.click();
@@ -1062,13 +1215,15 @@ describe('MasSelectItemsTable', () => {
         });
 
         it('should remove item from selection when checkbox is clicked', async () => {
+            const el = await fixture(html`<mas-select-items-table type="cards"></mas-select-items-table>`);
+            await el.updateComplete;
             const cards = [createMockCard('/path/card1', 'Card 1'), createMockCard('/path/card2', 'Card 2')];
             setupCardsInStore(cards);
             Store.translationProjects.selectedCards.set(['/path/card1', '/path/card2']);
-            const el = await fixture(html`<mas-select-items-table type="cards"></mas-select-items-table>`);
             await el.updateComplete;
             const rows = el.shadowRoot.querySelectorAll('mas-collapsible-table-row');
             const card2Row = Array.from(rows).find((row) => row.getAttribute('value') === '/path/card2');
+            await card2Row?.updateComplete;
             const checkbox = card2Row?.shadowRoot?.querySelector('sp-checkbox');
             checkbox?.click();
             await el.updateComplete;
@@ -1090,31 +1245,35 @@ describe('MasSelectItemsTable', () => {
 
     describe('repository getter', () => {
         it('should return null when mas-repository does not exist', async () => {
-            setupCardsInStore([createMockCard('/path/card1', 'Card 1')]);
             const el = await fixture(html`<mas-select-items-table type="cards"></mas-select-items-table>`);
+            await el.updateComplete;
+            setupCardsInStore([createMockCard('/path/card1', 'Card 1')]);
+            await el.updateComplete;
             expect(el.repository).to.be.null;
         });
     });
 
     describe('fetchSelectedFragments early returns', () => {
         it('should return early when repository is not available', async () => {
+            const el = await fixture(html`<mas-select-items-table type="cards" .viewOnly=${true}></mas-select-items-table>`);
+            await el.updateComplete;
             const card = createMockCard('/path/card1', 'Card 1');
             setupCardsInStore([card]);
             Store.translationProjects.selectedCards.set(['/path/card1']);
-            const el = await fixture(html`<mas-select-items-table type="cards" .viewOnly=${true}></mas-select-items-table>`);
             await el.updateComplete;
             // Since repository is null, it returns early and viewOnlyLoading stays false
             expect(el.viewOnlyLoading).to.be.false;
         });
 
         it('should not fetch for placeholders in viewOnly mode', async () => {
-            const placeholder = createMockPlaceholder('/path/placeholder1', 'key1', 'value1');
-            setupPlaceholdersInStore([placeholder]);
-            Store.translationProjects.selectedPlaceholders.set(['/path/placeholder1']);
             const el = await fixture(
                 html`<mas-select-items-table type="placeholders" .viewOnly=${true}></mas-select-items-table>`,
             );
             await el.updateComplete;
+            const placeholder = createMockPlaceholder('/path/placeholder1', 'key1', 'value1');
+            setupPlaceholdersInStore([placeholder]);
+            Store.translationProjects.selectedPlaceholders.set(['/path/placeholder1']);
+            await el.updateComplete;
             // Placeholders don't trigger fetchSelectedFragments
             expect(el.viewOnlyLoading).to.be.false;
         });
@@ -1122,17 +1281,62 @@ describe('MasSelectItemsTable', () => {
 
     describe('viewOnlyLoading property', () => {
         it('should initialize viewOnlyLoading to false', async () => {
-            setupCardsInStore([createMockCard('/path/card1', 'Card 1')]);
             const el = await fixture(html`<mas-select-items-table type="cards"></mas-select-items-table>`);
+            await el.updateComplete;
+            setupCardsInStore([createMockCard('/path/card1', 'Card 1')]);
+            await el.updateComplete;
             expect(el.viewOnlyLoading).to.be.false;
         });
 
         it('should affect isLoading in viewOnly mode', async () => {
+            const el = await fixture(html`<mas-select-items-table type="cards" .viewOnly=${true}></mas-select-items-table>`);
+            await el.updateComplete;
             const card = createMockCard('/path/card1', 'Card 1');
             setupCardsInStore([card]);
             Store.translationProjects.selectedCards.set(['/path/card1']);
-            const el = await fixture(html`<mas-select-items-table type="cards" .viewOnly=${true}></mas-select-items-table>`);
+            await el.updateComplete;
             expect(el.isLoading).to.equal(el.viewOnlyLoading);
         });
     });
+
+    describe('scroll sentinel', () => {
+        it('should not render sentinel when items list is empty even if hasMore is true', async () => {
+            Store.fragments.list.hasMore.set(true);
+            Store.fragments.list.firstPageLoaded.set(true);
+            Store.translationProjects.displayCards.set([]);
+
+            const el = await fixture(html`<mas-select-items-table type="cards"></mas-select-items-table>`);
+            await el.updateComplete;
+
+            const sentinel = el.renderRoot.querySelector('.scroll-sentinel');
+            expect(sentinel).to.be.null;
+        });
+
+        it('should render sentinel when items are present and hasMore is true', async () => {
+            Store.fragments.list.hasMore.set(true);
+            Store.fragments.list.firstPageLoaded.set(true);
+
+            const el = await fixture(html`<mas-select-items-table type="cards"></mas-select-items-table>`);
+            await el.updateComplete;
+
+            // Set displayCards after initial subscription fires (which overwrites with empty data)
+            setupCardsInStore([createMockCard('/card/1', 'Card 1')]);
+            await el.updateComplete;
+
+            const sentinel = el.renderRoot.querySelector('.scroll-sentinel');
+            expect(sentinel).to.not.be.null;
+        });
+
+        it('should not render sentinel when hasMore is false even if items are present', async () => {
+            Store.fragments.list.hasMore.set(false);
+            Store.fragments.list.firstPageLoaded.set(true);
+            setupCardsInStore([createMockCard('/card/1', 'Card 1')]);
+
+            const el = await fixture(html`<mas-select-items-table type="cards"></mas-select-items-table>`);
+            await el.updateComplete;
+
+            const sentinel = el.renderRoot.querySelector('.scroll-sentinel');
+            expect(sentinel).to.be.null;
+        });
+    });
 });
diff --git a/studio/test/translation/mas-translation-editor.test.js b/studio/test/translation/mas-translation-editor.test.js
index 15d710636..c479316e6 100644
--- a/studio/test/translation/mas-translation-editor.test.js
+++ b/studio/test/translation/mas-translation-editor.test.js
@@ -1366,6 +1366,41 @@ describe('MasTranslationEditor', () => {
             expect(closeEventFired).to.be.true;
             expect(Store.translationProjects.selectedCards.get()).to.deep.equal(['card1']);
         });
+
+        it('should keep confirmed selection when sp-dialog-wrapper emits a duplicate close event', async () => {
+            Store.translationProjects.selectedCards.set([]);
+            const el = await fixture(html`<mas-translation-editor></mas-translation-editor>`);
+            el.showSelectedEmptyState = true;
+            await el.updateComplete;
+            const overlayTrigger = el.shadowRoot.querySelector('#add-items-overlay');
+            overlayTrigger.dispatchEvent(new CustomEvent('sp-opened'));
+            await el.updateComplete;
+            Store.translationProjects.selectedCards.set(['card-new']);
+            const dialogWrapper = el.shadowRoot.querySelector('.add-items-dialog');
+            dialogWrapper.dispatchEvent(new CustomEvent('confirm'));
+            await el.updateComplete;
+            // Spectrum dispatches an additional close event after confirm; the sticky
+            // #itemsConfirmed guard must not let it wipe the newly-committed selection.
+            dialogWrapper.dispatchEvent(new CustomEvent('close'));
+            await el.updateComplete;
+            expect(Store.translationProjects.selectedCards.get()).to.deep.equal(['card-new']);
+        });
+
+        it('should ignore sp-opened events bubbling from nested overlay-triggers', async () => {
+            Store.translationProjects.selectedCards.set(['card-outer']);
+            const el = await fixture(html`<mas-translation-editor></mas-translation-editor>`);
+            el.showSelectedEmptyState = true;
+            await el.updateComplete;
+            const overlayTrigger = el.shadowRoot.querySelector('#add-items-overlay');
+            overlayTrigger.dispatchEvent(new CustomEvent('sp-opened', { bubbles: true, composed: true }));
+            await el.updateComplete;
+            // Now emit a bubbling sp-opened from a nested descendant (simulating a filter
+            // popover opening). The outer handler must early-return, not reset state.
+            const innerSource = el.shadowRoot.querySelector('mas-items-selector') ?? overlayTrigger;
+            innerSource.dispatchEvent(new CustomEvent('sp-opened', { bubbles: true, composed: true }));
+            await el.updateComplete;
+            expect(Store.translationProjects.selectedCards.get()).to.deep.equal(['card-outer']);
+        });
     });
 
     describe('language selection dialog', () => {
diff --git a/studio/test/translation/mas-translation.test.js b/studio/test/translation/mas-translation.test.js
index 18496d3f3..f63048522 100644
--- a/studio/test/translation/mas-translation.test.js
+++ b/studio/test/translation/mas-translation.test.js
@@ -129,20 +129,20 @@ describe('MasTranslation', () => {
     });
 
     describe('loading state', () => {
-        it('should render loading indicator when loading', async () => {
+        it('should render skeleton rows when loading and no data is present', async () => {
             Store.translationProjects.list.loading.value = true;
+            Store.translationProjects.list.data.value = [];
             const el = await fixture(html`<mas-translation></mas-translation>`);
-            const loadingContainer = el.shadowRoot.querySelector('.loading-container--absolute');
-            const progressCircle = el.shadowRoot.querySelector('sp-progress-circle');
-            expect(loadingContainer).to.exist;
-            expect(progressCircle).to.exist;
+            const skeletonRows = el.shadowRoot.querySelectorAll('.skeleton-row');
+            expect(skeletonRows.length).to.equal(5);
         });
 
-        it('should not render loading indicator when not loading', async () => {
+        it('should not render skeleton rows when not loading', async () => {
             Store.translationProjects.list.loading.value = false;
+            Store.translationProjects.list.data.value = [];
             const el = await fixture(html`<mas-translation></mas-translation>`);
-            const loadingContainer = el.shadowRoot.querySelector('.loading-container--absolute');
-            expect(loadingContainer).to.be.null;
+            const skeletonRows = el.shadowRoot.querySelectorAll('.skeleton-row');
+            expect(skeletonRows.length).to.equal(0);
         });
     });
 
diff --git a/studio/test/translation/translation-items-loader.test.js b/studio/test/translation/translation-items-loader.test.js
index 0cd857a2e..a2d7442ad 100644
--- a/studio/test/translation/translation-items-loader.test.js
+++ b/studio/test/translation/translation-items-loader.test.js
@@ -115,21 +115,8 @@ describe('translation-items-loader', () => {
     });
 
     describe('loadAllFragments', () => {
-        it('should return no-op subscription when allCards already has data', () => {
-            Store.translationProjects.allCards.set([{ path: '/card1', title: 'Card 1' }]);
-            const result = loadAllFragments(TABLE_TYPE.CARDS, null, {});
-            expect(result.unsubscribe).to.be.a('function');
-            expect(Store.translationProjects.allCards.get()).to.have.lengthOf(1);
-        });
-
-        it('should return no-op subscription when allCollections already has data', () => {
-            Store.translationProjects.allCollections.set([{ path: '/col1', title: 'Col 1' }]);
-            const result = loadAllFragments(TABLE_TYPE.COLLECTIONS, null, {});
-            expect(result.unsubscribe).to.be.a('function');
-            expect(Store.translationProjects.allCollections.get()).to.have.lengthOf(1);
-        });
-
-        it('should subscribe and process collections when fragments list updates', async () => {
+        it('should not subscribe for collections (loaded via repository.loadAllCollections)', async () => {
+            const before = Store.translationProjects.allCollections.get();
             const result = loadAllFragments(TABLE_TYPE.COLLECTIONS, null, {});
 
             const mockCollection = {
@@ -142,8 +129,8 @@ describe('translation-items-loader', () => {
             Store.fragments.list.data.set([mockCollection]);
             await new Promise((r) => setTimeout(r, 50));
 
-            expect(Store.translationProjects.allCollections.get()).to.have.lengthOf(1);
-            expect(Store.translationProjects.displayCollections.get()).to.have.lengthOf(1);
+            // Collections store is NOT touched by the shared fragment stream anymore.
+            expect(Store.translationProjects.allCollections.get()).to.equal(before);
 
             result.unsubscribe();
         });
@@ -187,35 +174,40 @@ describe('translation-items-loader', () => {
             result.unsubscribe();
         });
 
-        it('should use existing card data when already in store', async () => {
-            const existingCard = {
-                path: '/content/dam/mas/acom/en_US/cards/existing',
-                title: 'Existing',
-                offerData: { offerId: 'cached' },
-                groupedVariations: [],
+        it('should not re-fetch grouped variations for a card already enriched in a prior page', async () => {
+            const state = {};
+            const cardPath = '/content/dam/mas/acom/en_US/cards/card1';
+            const variationPath = `${cardPath}/pzn/var1`;
+            const repo = {
+                aem: {
+                    getFragmentByPath: sinon.stub().resolves({
+                        path: variationPath,
+                        fieldTags: [{ id: 't1', name: 'T1' }],
+                        fields: [],
+                        tags: [],
+                    }),
+                },
             };
-            Store.translationProjects.allCards.set([existingCard]);
+            const mockCardFragment = new Fragment({
+                path: cardPath,
+                model: { path: CARD_MODEL_PATH },
+                tags: [],
+                fields: [{ name: 'variations', values: [variationPath] }],
+                references: [{ path: variationPath }],
+            });
 
-            const state = {};
-            const repo = { aem: { getFragmentByPath: sinon.stub() } };
             const result = loadAllFragments(TABLE_TYPE.CARDS, repo, state);
 
-            const mockCardStore = {
-                value: new Fragment({
-                    path: '/content/dam/mas/acom/en_US/cards/existing',
-                    title: 'Existing',
-                    model: { path: CARD_MODEL_PATH },
-                    tags: [],
-                    fields: [],
-                }),
-            };
-            Store.fragments.list.data.set([mockCardStore]);
-            await new Promise((r) => setTimeout(r, 100));
+            Store.fragments.list.data.set([{ value: mockCardFragment }]);
+            await new Promise((r) => setTimeout(r, 200));
 
-            const cards = Store.translationProjects.allCards.get();
-            expect(cards).to.have.lengthOf(1);
-            expect(cards[0].offerData).to.deep.equal({ offerId: 'cached' });
-            expect(repo.aem.getFragmentByPath.called).to.be.false;
+            const callCountAfterFirst = repo.aem.getFragmentByPath.callCount;
+            expect(callCountAfterFirst).to.be.greaterThan(0);
+
+            Store.fragments.list.data.set([{ value: mockCardFragment }]);
+            await new Promise((r) => setTimeout(r, 200));
+
+            expect(repo.aem.getFragmentByPath.callCount).to.equal(callCountAfterFirst);
 
             result.unsubscribe();
         });
@@ -647,4 +639,65 @@ describe('translation-items-loader', () => {
             expect(variation).to.not.exist;
         });
     });
+
+    describe('loadAllFragments subscription persistence', () => {
+        it('should subscribe to fragment store updates even when allCards already has data', async () => {
+            const existingCard = {
+                path: '/card/existing',
+                model: { path: CARD_MODEL_PATH },
+                studioPath: 'existing',
+                tags: [],
+                fields: [],
+            };
+            Store.translationProjects.allCards.set([existingCard]);
+
+            const state = {};
+            const { unsubscribe } = loadAllFragments(TABLE_TYPE.CARDS, null, state);
+
+            const newCardData = {
+                path: '/card/new',
+                model: { path: CARD_MODEL_PATH },
+                title: 'New Card',
+                tags: [],
+                fields: [],
+                fieldTags: [],
+            };
+            Store.fragments.list.data.set([{ value: new Fragment(newCardData) }]);
+            await new Promise((r) => setTimeout(r, 50));
+
+            expect(Store.translationProjects.allCards.get().length).to.be.greaterThan(0);
+            unsubscribe();
+        });
+
+        it('should not register duplicate subscriptions when called twice with the same state', () => {
+            const state = {};
+            const sub1 = loadAllFragments(TABLE_TYPE.CARDS, null, state);
+            const sub2 = loadAllFragments(TABLE_TYPE.CARDS, null, state);
+
+            expect(sub1.unsubscribe).to.be.a('function');
+            expect(sub2.unsubscribe).to.be.a('function');
+
+            sub1.unsubscribe();
+            sub2.unsubscribe();
+        });
+    });
+
+    describe('processCardsData re-entrancy', () => {
+        it('should reset isProcessingCards to false after processing completes', async () => {
+            const state = {};
+            const card = {
+                path: '/card/1',
+                model: { path: CARD_MODEL_PATH },
+                tags: [],
+                fields: [],
+            };
+
+            const { unsubscribe } = loadAllFragments(TABLE_TYPE.CARDS, null, state);
+            Store.fragments.list.data.set([{ value: new Fragment(card) }]);
+            await new Promise((r) => setTimeout(r, 100));
+
+            expect(state.isProcessingCards).to.be.false;
+            unsubscribe();
+        });
+    });
 });