playwright: update loader and pagination size for CustomizeDetailPage spec (#23714)

* playwright: update loader and pagination size for CustomizeDetailPage spec

* fix(playwright): improve response handling in Search Index Application installation step

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

@@ -32,6 +32,7 @@ import {
   checkDefaultStateForNavigationTree,
   validateLeftSidebarWithHiddenItems,
 } from '../../utils/customizeNavigation';
+import { waitForAllLoadersToDisappear } from '../../utils/entity';
 import { navigateToPersonaWithPagination } from '../../utils/persona';
 import { settingClick } from '../../utils/sidebar';
 
@@ -148,9 +149,7 @@ test.describe('Persona customize UI tab', async () => {
     // Navigate to persona page
     await settingClick(adminPage, GlobalSettingOptions.PERSONA);
     await adminPage.waitForLoadState('networkidle');
-    await adminPage.waitForSelector('[data-testid="loader"]', {
-      state: 'detached',
-    });
+    await waitForAllLoadersToDisappear(adminPage, 'skeleton-card-loader');
     await adminPage.getByText(persona.responseData.displayName).click();
     await adminPage.getByRole('tab', { name: 'Customize UI' }).click();
   });
@@ -355,8 +354,7 @@ test.describe('Persona customization', () => {
           await navigateToPersonaWithPagination(
             adminPage,
             persona.data.name,
-            true,
-            3
+            true
           );
 
           await adminPage.getByRole('tab', { name: 'Customize UI' }).click();
@@ -465,8 +463,7 @@ test.describe('Persona customization', () => {
           await navigateToPersonaWithPagination(
             adminPage,
             persona.data.name,
-            true,
-            3
+            true
           );
           await adminPage.getByRole('tab', { name: 'Customize UI' }).click();
           await adminPage.waitForLoadState('networkidle');
@@ -564,12 +561,7 @@ test.describe('Persona customization', () => {
       await personaListResponse;
 
       // Need to find persona card and click as the list might get paginated
-      await navigateToPersonaWithPagination(
-        adminPage,
-        persona.data.name,
-        true,
-        3
-      );
+      await navigateToPersonaWithPagination(adminPage, persona.data.name, true);
       await adminPage.getByRole('tab', { name: 'Customize UI' }).click();
       await adminPage.waitForLoadState('networkidle');
       await adminPage.getByText('Governance').click();
@@ -637,12 +629,7 @@ test.describe('Persona customization', () => {
       await personaListResponse;
 
       // Need to find persona card and click as the list might get paginated
-      await navigateToPersonaWithPagination(
-        adminPage,
-        persona.data.name,
-        true,
-        3
-      );
+      await navigateToPersonaWithPagination(adminPage, persona.data.name, true);
       await adminPage.getByRole('tab', { name: 'Customize UI' }).click();
       await adminPage.waitForLoadState('networkidle');
       await adminPage.getByText('Data Assets').click();

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

@@ -187,14 +187,15 @@ test('Search Index Application', async ({ page }) => {
   });
 
   await test.step('Install application', async () => {
-    await page.click('[data-testid="add-application"]');
-
     // Verify response status code
-    const getMarketPlaceResponse = await page.waitForResponse(
+    const getMarketPlaceResponse = page.waitForResponse(
       '/api/v1/apps/marketplace?limit=15'
     );
+    await page.click('[data-testid="add-application"]');
 
-    expect(getMarketPlaceResponse.status()).toBe(200);
+    const response = await getMarketPlaceResponse;
+
+    expect(response.status()).toBe(200);
 
     // Check if search-indexing-application-card is visible, if not paginate through pages
     let cardFound = await page

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

@@ -113,7 +113,6 @@ export const removePersonaDefault = async (
   await removeDefaultResponse;
 };
 
-
 export const navigateToPersonaWithPagination = async (
   page: Page,
   personaName: string,
@@ -138,4 +137,4 @@ export const navigateToPersonaWithPagination = async (
     await nextBtn.click();
     await page.waitForLoadState('networkidle');
   }
-};
+};

openmetadata-ui/src/main/resources/ui/src/pages/Persona/PersonaListPage/PersonaPage.tsx

@@ -194,7 +194,10 @@ export const PersonaPage = ({ pageTitle }: { pageTitle: string }) => {
           <div className="persona-cards-grid">
             {isLoading
               ? [1, 2, 3].map((key) => (
-                  <div className="skeleton-card-item" key={key}>
+                  <div
+                    className="skeleton-card-item"
+                    data-testid="skeleton-card-loader"
+                    key={key}>
                     <Card>
                       <Skeleton active paragraph title />
                     </Card>