fix(ui): backport Suspense loader fallbacks to 1.13 (#31827)

* Fix UI Suspense loader fallbacks (#29746)

* fix(ui): reduce suspense loader flashes

* fix(ui): scope suspense loading states

* fix(ui): avoid lazy entity header title

* fix(ui): keep entity header title stable

* fix(ui): align entity page loading states

* fix multiple loaders

* address comments

* address comments

* nit

* address comments

* address comments

* address comments

* fix failing tests

* revert

* fix failing tests

* address comments and fix checkstyle

* fix(ui): add tab content suspense fallbacks

* address comments

* test(ui): preserve 1.13 landing page test setup

* test(ui): align backport tests with 1.13

* fix(ui): stabilize suspense fallback backport

* test(ui): wait for glossary term description

Author: shah-harshit

openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/GlobalPageSize.spec.ts

@@ -28,8 +28,18 @@ test.describe('Table & Data Model columns table pagination', () => {
     await waitForAllLoadersToDisappear(page);
 
     // Change page size to 25
-    await page.getByTestId('page-size-selection-dropdown').click();
-    await page.getByRole('menuitem', { name: '25 / Page' }).click();
+    const tablePageSizeDropdown = page.getByTestId(
+      'page-size-selection-dropdown'
+    );
+    await tablePageSizeDropdown.scrollIntoViewIfNeeded();
+    await expect(tablePageSizeDropdown).toBeVisible();
+    await tablePageSizeDropdown.hover();
+
+    const tablePageSizeOption = page
+      .locator('.ant-dropdown:not(.ant-dropdown-hidden)')
+      .getByRole('menuitem', { name: '25 / Page' });
+    await expect(tablePageSizeOption).toBeVisible();
+    await tablePageSizeOption.click();
 
     await waitForAllLoadersToDisappear(page);
 

openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/LandingPageWidgets/DomainDataProductsWidgets.spec.ts

@@ -342,59 +342,34 @@ test.describe.serial('Domain and Data Product Asset Counts', () => {
     await waitForAllLoadersToDisappear(page);
     await sidebarClick(page, SidebarItem.DATA_PRODUCT);
     await selectDataProduct(page, dataProduct.data);
+    await waitForAllLoadersToDisappear(page);
 
+    const dataProductAssetsResponse = page.waitForResponse(
+      (response) =>
+        response.url().includes('/api/v1/dataProducts/name/') &&
+        response.url().includes('fields=domains%2Cassets') &&
+        response.request().method() === 'GET'
+    );
     await page.getByTestId('assets').click();
+    await dataProductAssetsResponse;
 
-    await page
-      .getByTestId('loader')
-      .waitFor({
-        state: 'detached',
-        timeout: 10000,
-      })
-      .catch(() => {
-        /* ignore if loader not found */
-      });
-
-    let hasAssets = true;
-    while (hasAssets) {
-      const checkboxes = page.locator(
-        '[data-testid^="table-data-card_"] input[type="checkbox"]'
-      );
-      const count = await checkboxes.count();
-
-      if (count === 0) {
-        hasAssets = false;
-        break;
-      }
-
-      const selectAll = page.getByRole('checkbox', { name: 'Select All' });
-      if (await selectAll.isVisible()) {
-        await selectAll.check();
-      } else {
-        for (let i = 0; i < count; i++) {
-          await checkboxes.nth(i).check();
-        }
-      }
-
-      const previousCount = count;
-      const removeRes = page.waitForResponse('**/assets/remove');
-      await page.getByTestId('delete-all-button').click();
-      await removeRes;
-
-      await expect
-        .poll(
-          async () =>
-            page
-              .locator(
-                '[data-testid^="table-data-card_"] input[type="checkbox"]'
-              )
-              .count(),
-          { timeout: 10_000 }
-        )
-        .toBeLessThan(previousCount);
+    // The card list paints after the assets response resolves, and count()
+    // does not auto-wait. Wait for a card before selecting every attached asset.
+    await waitForAllLoadersToDisappear(page);
+    const assetCard = page.locator('[data-testid^="table-data-card_"]');
+    await assetCard.first().waitFor({ state: 'visible' });
+
+    const attachedCount = await assetCard.count();
+    for (let i = 0; i < attachedCount; i++) {
+      await assetCard.nth(i).locator('input[type="checkbox"]').check();
     }
 
+    const removeRes = page.waitForResponse('**/assets/remove');
+    await page.getByTestId('delete-all-button').click();
+    await removeRes;
+
     await page.reload();
+    await waitForAllLoadersToDisappear(page);
     await checkAssetsCount(page, 0);
 
     await redirectToHomePage(page);

openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/Glossary.spec.ts

@@ -1258,11 +1258,11 @@ test.describe('Glossary tests', () => {
       await selectActiveGlossary(page, glossary1.data.displayName);
       await selectActiveGlossaryTerm(page, glossaryTerm1.data.displayName);
 
-      const viewerContainerText = await page.textContent(
-        '[data-testid="viewer-container"]'
-      );
-
-      expect(viewerContainerText).toContain('Updated description');
+      // The description renders after the term page finishes loading, so assert
+      // on the locator rather than reading textContent once.
+      await expect(
+        page.locator('[data-testid="viewer-container"]')
+      ).toContainText('Updated description');
     } finally {
       await glossaryTerm1.delete(apiContext);
       await glossary1.delete(apiContext);

openmetadata-ui/src/main/resources/ui/playwright/utils/odcsImportExport.ts

@@ -10,7 +10,7 @@
  *  See the License for the specific language governing permissions and
  *  limitations under the License.
  */
-import { Page, Response } from '@playwright/test';
+import { expect, Page, Response } from '@playwright/test';
 import { TableClass } from '../support/entity/TableClass';
 import { toastNotification } from './common';
 import { waitForAllLoadersToDisappear } from './entity';
@@ -25,17 +25,22 @@ export const openODCSImportDropdown = async (page: Page) => {
   const addButton = page.getByTestId('add-contract-button');
   const manageButton = page.getByTestId('manage-contract-actions');
 
-  const addButtonVisible = await addButton.isVisible().catch(() => false);
-  const manageButtonVisible = await manageButton.isVisible().catch(() => false);
+  // Contract actions can render after the page loader disappears, so wait for
+  // either valid entry point instead of making a one-shot visibility decision.
+  await expect(addButton.or(manageButton)).toBeVisible({ timeout: 15000 });
 
-  if (addButtonVisible) {
+  if (await addButton.isVisible()) {
     await addButton.click();
     await page.getByTestId('add-contract-menu').waitFor({
       state: 'visible',
       timeout: 10000,
     });
-  } else if (manageButtonVisible) {
+  } else {
     await manageButton.click();
+    await page.locator('.contract-action-dropdown').waitFor({
+      state: 'visible',
+      timeout: 10000,
+    });
   }
 };
 

openmetadata-ui/src/main/resources/ui/playwright/utils/permission.ts

@@ -137,9 +137,12 @@ export const validateViewPermissions = async (
   await expect(page.locator('[data-testid="add-domain"]')).not.toBeVisible();
 
   if (permission?.editDisplayName) {
-    expect(
-      await page.locator('[data-testid="edit-displayName-button"]').count()
-    ).toBeGreaterThan(0);
+    const editDisplayNameButton = page.locator(
+      '[data-testid="edit-displayName-button"]'
+    );
+    await expect(editDisplayNameButton.first()).toBeVisible({
+      timeout: 30_000,
+    });
   } else {
     await expect(
       page.locator('[data-testid="edit-displayName-button"]')

openmetadata-ui/src/main/resources/ui/src/components/AppRouter/AppRouter.tsx

@@ -19,13 +19,13 @@ import { APP_ROUTER_ROUTES } from '../../constants/router.constants';
 import { useApplicationStore } from '../../hooks/useApplicationStore';
 import applicationRoutesClass from '../../utils/ApplicationRoutesClassBase';
 import Loader from '../common/Loader/Loader';
-import withSuspenseFallback from './withSuspenseFallback';
+import { withPageSuspenseFallback } from './withSuspenseFallback';
 
-const AuthenticatedApp = withSuspenseFallback(
+const AuthenticatedApp = withPageSuspenseFallback(
   lazy(() => import('./AuthenticatedApp'))
 );
 
-const AuthenticatedRoutes = withSuspenseFallback(
+const AuthenticatedRoutes = withPageSuspenseFallback(
   lazy(() =>
     import('./AuthenticatedRoutes').then((m) => ({
       default: m.AuthenticatedRoutes,
@@ -34,27 +34,27 @@ const AuthenticatedRoutes = withSuspenseFallback(
 );
 
 // Lazy-load infrequently-visited unauthenticated pages
-const AccessNotAllowedPage = withSuspenseFallback(
+const AccessNotAllowedPage = withPageSuspenseFallback(
   lazy(() => import('../../pages/AccessNotAllowedPage/AccessNotAllowedPage'))
 );
 
-const LogoutPage = withSuspenseFallback(
+const LogoutPage = withPageSuspenseFallback(
   lazy(() =>
     import('../../pages/LogoutPage/LogoutPage').then((m) => ({
       default: m.LogoutPage,
     }))
   )
 );
 
-const PageNotFound = withSuspenseFallback(
+const PageNotFound = withPageSuspenseFallback(
   lazy(() => import('../../pages/PageNotFound/PageNotFound'))
 );
 
-const SamlCallback = withSuspenseFallback(
+const SamlCallback = withPageSuspenseFallback(
   lazy(() => import('../../pages/SamlCallback'))
 );
 
-const SignUpPage = withSuspenseFallback(
+const SignUpPage = withPageSuspenseFallback(
   lazy(() => import('../../pages/SignUp/SignUpPage'))
 );