[POS UI Extension] <List /> `onEndReached` broken

[timvandam]

Please list the package(s) involved in the issue, and include the version you are using

@shopify/retail-ui-extensions-react @ 1.5.1

Describe the bug

The issue is twofold:

1. The component is calling the onEndReached prop before reaching the end of the list.
2. When the number of rows shrinks it will stop calling onEndReached, making the list incomplete

Steps to reproduce the behavior:

1. Create a list that shows a toast message in the onEndReached prop
2. Have the number of rows shrink and see the toasts stop

Expected behavior

It should call onEndReached when the end is reached, and it should support the number of rows decreasing

Screenshots

This video shows both issues

RPReplay_Final1711547958.mp4

Additional context

The only workaround I have found is to set key on List, but this makes it flicker :/ 

[timvandam]

Another work around is to ensure that data becomes an empty array. This seems to reset something internally that causes it to continuously call onEndReached again

[jordanfinners]

I've seen this as well 😢
See the exact same thing as you @timvandam

[timvandam]

I've seen this as well 😢 See the exact same thing as you @timvandam

I've added my own pagination buttons as a workaround. Without this the list would grow large enough to cause lag