Fix UI Suspense loader fallbacks

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

@@ -59,7 +59,7 @@
 
 const test = base.extend<{ page: Page }>({
   page: async ({ browser }, use) => {
     const page = await browser.newPage();
     await adminUser.login(page);
     await use(page);
     await page.close();
@@ -254,18 +254,16 @@
     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 page
-      .getByTestId('loader')
-      .waitFor({
-        state: 'detached',
-        timeout: 10000,
-      })
-      .catch(() => {
-        /* ignore if loader not found */
-      });
+    await dataProductAssetsResponse;
 
     let hasAssets = true;
     while (hasAssets) {

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

@@ -238,6 +238,12 @@
   return false;
 };
 
+const isLandingPageWidgetLoading = async (widget: Locator) =>
+  widget
+    .getByTestId('entity-list-skeleton')
+    .isVisible()
+    .catch(() => false);
+
 export const waitForLandingPageWidget = async (
   page: Page,
   widgetKey: string
@@ -601,7 +607,7 @@
 
       return false;
     }),
     page.waitForTimeout(10000),
   ]);
 
   await redirectToHomePage(page);
@@ -730,6 +736,10 @@
         }
 
         const domainWidget = page.getByTestId('KnowledgePanel.Domains');
+        if (await isLandingPageWidgetLoading(domainWidget)) {
+          return null;
+        }
+
         const card = domainWidget.locator(widgetCardSelector).first();
         const isCardVisible = await card.isVisible().catch(() => false);
 
@@ -771,6 +781,10 @@
         const dataProductWidget = page.getByTestId(
           'KnowledgePanel.DataProducts'
         );
+        if (await isLandingPageWidgetLoading(dataProductWidget)) {
+          return null;
+        }
+
         const card = dataProductWidget.locator(widgetCardSelector).first();
         const isCardVisible = await card.isVisible().catch(() => false);
 
@@ -798,6 +812,10 @@
   await expect
     .poll(
       async () => {
+        if (await isLandingPageWidgetLoading(widget)) {
+          return null;
+        }
+
         const element = widget.locator(selector).first();
         const isVisible = await element.isVisible().catch(() => false);
 

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

@@ -63,15 +63,29 @@ const waitForSearchDebounce = async (page: Page) => {
   }
 };
 
+const clickAvailableWidgetAction = async (
+  addBtn: Locator,
+  editBtn: Locator
+) => {
+  await addBtn.or(editBtn).first().waitFor({ state: 'visible' });
+
+  if (await addBtn.isVisible()) {
+    await addBtn.click();
+
+    return;
+  }
+
+  await editBtn.click();
+};
+
 export const addTierWidget = async (
   page: Page,
   tier: string,
   endpoint: string
 ) => {
   const addBtn = page.getByTestId('add-tier');
   const editBtn = page.getByTestId('edit-tier');
-  const isAdd = await addBtn.isVisible();
-  await (isAdd ? addBtn : editBtn).click();
+  await clickAvailableWidgetAction(addBtn, editBtn);
 
   await waitForAllLoadersToDisappear(page);
 
@@ -106,8 +120,7 @@ export const addCertificationWidget = async (
 ) => {
   const addBtn = page.getByTestId('add-certification');
   const editBtn = page.getByTestId('edit-certification');
-  const isAdd = await addBtn.isVisible();
-  await (isAdd ? addBtn : editBtn).click();
+  await clickAvailableWidgetAction(addBtn, editBtn);
 
   await page.locator('.certification-card-popover').waitFor({
     state: 'visible',
@@ -569,8 +582,7 @@ export const fillCommonFormItems = async (
 
 export const fillDomainForm = async (
   page: Page,
-  entity: Domain['data'] | SubDomain['data'],
-  isDomain = true
+  entity: Domain['data'] | SubDomain['data']
 ) => {
   await fillCommonFormItems(page, entity);
 
@@ -721,7 +733,7 @@ export const createSubDomain = async (
 
   await expect(page.getByText('Add Sub Domain')).toBeVisible();
 
-  await fillDomainForm(page, subDomain, false);
+  await fillDomainForm(page, subDomain);
   const saveRes = page.waitForResponse('/api/v1/domains');
   await page.getByTestId('save-btn').click();
   await saveRes;

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

@@ -21,13 +21,13 @@ import { useAppMode } from '../../hooks/useAppMode';
 import { useAppRoutesRegistry } from '../../hooks/useAppRoutesRegistry';
 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,
@@ -36,27 +36,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'))
 );