Make the messages page test resilient to async data loading

ui/tests/playwright/MessagesPage.test.tsx

@@ -1,28 +1,52 @@
 import { expect, test } from "@playwright/test";
 
-test("Messages page", async ({page}) => {
+test("Messages page", async ({ page }) => {
   await test.step("Navigate to topics messages page", async () => {
     await page.goto("./");
     await page.click('text="Click to login anonymously"');
-    await page.click('text="Topics"');
-    await page.waitForSelector('text="Hide internal topics"', { timeout: 500000 });
-    await page.click('table[aria-label="Topics"] tbody tr:first-child td:first-child a');
-    await expect(page.getByText("Last updated").or(page.getByText("No messages data"))).toBeVisible();
-  })
+    await page.waitForURL(page.url().replace("login", "overview"));
+    const topicsLink = page.locator("a").locator('text="Topics"');
+    await topicsLink.click();
+    await page.waitForURL(await topicsLink.getAttribute("href"));
+    await page.waitForSelector('text="Loading data"', {
+      state: "hidden",
+    });
+    const link = page
+      .locator('table[aria-label="Topics"]')
+      .locator("tbody")
+      .locator("tr")
+      .first()
+      .locator("td")
+      .first()
+      .locator("a");
+
+    await link.click();
+    await page.waitForURL(await link.getAttribute("href"));
+    await page.waitForSelector('text="Loading data"', {
+      state: "hidden",
+    });
+    await expect(
+      page.getByText("Last updated").or(page.getByText("No messages data")),
+    ).toBeVisible();
+  });
   await test.step("Messages page should display table", async () => {
     if (await page.getByText("No messages data").isVisible()) {
-      expect(await page.innerText("body")).toContain("Data will appear shortly after we receive produced messages.");
+      expect(await page.innerText("body")).toContain(
+        "Data will appear shortly after we receive produced messages.",
+      );
       return;
     }
 
     expect(await page.innerText("body")).toContain("Key");
     await page.click('button[aria-label="Open advanced search"]');
     expect(await page.innerText("body")).toContain("All partitions");
-    const dataRows = await page.locator('table[aria-label="Messages table"] tbody tr').elementHandles();
+    const dataRows = await page
+      .locator('table[aria-label="Messages table"] tbody tr')
+      .elementHandles();
     expect(dataRows.length).toBeGreaterThan(0);
-    const dataCells = await page.locator('table[aria-label="Messages table"] tbody tr td').evaluateAll((tds) =>
-      tds.map((td) => td.textContent?.trim() ?? "")
-    );
+    const dataCells = await page
+      .locator('table[aria-label="Messages table"] tbody tr td')
+      .evaluateAll((tds) => tds.map((td) => td.textContent?.trim() ?? ""));
     expect(dataCells.length).toBeGreaterThan(0);
   });
 });