Puppeteer wait for lists coming up

Question

The site i am working on have a button.

when i click the button using puppeteer it makes 10 more lists on ul element.

At first time the site have already 10 lists on the ul element and whenever click the button 10 more lists added to the ul.

So here is the question

How do i wait for 10 more lists coming up on ul element after click the button using puppeteer ?

ex)

first state

<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

i want catch this moment after click the button

<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

I have tried below methods also but it's not working.

 await Promise.all([
        page.click('button#fetch-next-page'),
        page.waitFor('*'),
        // page.waitForSelector('div.loop-item', { hidden: true }),
      ])

Answer 1

 await Promise.all([
        page.click('button#fetch-next-page'),
        page.waitForFunction(
          prevLength => {
            const curLength = document.querySelectorAll('div.loop-item').length
            console.log(curLength)
            return curLength !== prevLength
          },
          {},
          prevLength,
        ),
      ])

keep previous lists length and pass it to page.waitForFunction's parameter works as i expected

Thanks a lot @ggorlen