Infinite Scroll Reviews Block for React

Replace the 700 millisecond timer in the effect with a request for the next BATCH reviews and append them to the list; shown, the status line, the button and the end note all follow from the array's length. The block sends nothing and holds no real data, and the summary counts the whole typed set, so with an API you would pass the totals in.

The scroll region is a named, focusable section: Tab reaches it and the arrow keys, Page Down and End scroll it, and reaching its end loads more. "Load more reviews" is a real button at the end of the list; after it adds five, focus moves to the first new review, which is scrolled to the top of the region. The status line announces "Loading 5 more reviews" and then the new count.

The scroll position has to be read and set, and the catalog ScrollArea wraps its content in a different viewport on each library. A native overflow-y-auto section behaves the same on all four, scrolls with touch momentum and overscroll-contain keeps it from dragging the page.

The header and parts fade up once on load, and the placeholder rows pulse while they wait. With reduced motion the entrances are off and the rows are still. New reviews simply appear below the old ones.

The summary (score, stars and the five rows) stacks above the region, which is 420 pixels tall so the summary and the first review are on screen together. The page itself scrolls past the region as usual.