I have a table component that has pagination. I've added a data attribute on the <tbody> tag that changes when clicking the table page next button (e.g. data-id: table-page-one changes to data-id: table-page-two. I need to wait for this ID to chance before checking the row elements. The test is passing if I run it with SLOMO=true HEADLESS=false, but when I run it normally, after the pagination click, It gives the following error: thrown: Exceeded timeout of 20000 ms for a test. My code is similar to the follow:

if ('verify table row checkboxes are checked', async () => {
  await page.click(nextTablePageSelector);

  // gets stuck here
  await page. waitForSelector("[data-id='table-page-two']");

  // below works in SLOMO=true HEADLESS=false mode
  // checking each row using $$eval
}); 

I've with a custom delay method between the page.click and page.waitForSelector and it works, but the team doesn't want to uses delays, because it can lead to flakey tests.

What is the proper way to watch for part of the UI changing, or more specifically, watching for an attribute that you're already used to change?