InfiniteScroll
Marcador al final de una lista que pide la página siguiente antes de llegar al fondo.
Usar
import { InfiniteScroll } from "@unozero-ai/ui/react";
<InfiniteScroll></InfiniteScroll>En un panel con scroll
Pon el marcador justo después de la última fila. Cuando queda a menos de prefetchPx (300 px por defecto) del fondo, emite onLoadMore; tú pides la página siguiente, marcas loading mientras llega y bajas hasMore cuando no queda nada. Baja hasta el final del panel.
Si la lista vive en su propio contenedor con scroll, pásale ese contenedor en root; sin él, la distancia se mide contra la ventana. root recibe el elemento, no una ref: guárdalo en el estado con un ref de callback, como aquí. En el kit React este componente era InfiniteScrollSentinel, con onReach y rootRef. Úsalo para historiales que se recorren hacia abajo, como las reservas pasadas o una conversación; si el lector necesita volver a una página concreta, usa Pagination.
Un panel que se rellena solo
El marcador reacciona a su posición, no al evento de scroll. Si una página no llena el panel, el marcador sigue a la vista y pide otra en cuanto loading vuelve a false, hasta que el panel se llena o hasMore pasa a false. Aquí cada página trae solo tres leads y prefetchPx está a 0: el panel arranca vacío y pide lo justo para llenarse.
Páginas pedidas: 0 · leads cargados: 0 de 24
Error y reintento
Cuando una página falla, pon hasMore en false y ofrece un botón para reintentar. Si dejaras hasMore en true, el marcador seguiría a la vista y pediría la misma página en bucle contra una API caída. La tercera página de este registro falla la primera vez.
API
Generada del custom-elements.json que publica @unozero-ai/ui. Las partes se estilan desde tu CSS con el nombre del elemento: uz-button::part(base).