useInfiniteScroll

import { useInfiniteScroll } from '@partodata/ui'
import { Account, EntityCollection } from '@partodata/ui/social'

function InfluencerList() {
  const { data, fetchNextPage, hasNextPage, isFetchingNextPage } = useInfiniteQuery(...)

  const { sentinelRef } = useInfiniteScroll({
    onLoadMore: () => fetchNextPage(),
    hasMore: hasNextPage,
    isLoading: isFetchingNextPage,
  })

  return (
    <EntityCollection
      entity="account"
      items={data.pages.flat()}
      getId={(account) => account.id}
      // صفحهٔ بعد: موردها می‌مانند و اسکلت هم‌شکلشان زیرشان می‌آید
      loadingMore={isFetchingNextPage}
      label="اینفلوئنسرها"
      renderItem={(account, item) => <Account account={account} {...item} />}
      // المان sentinel — وقتی وارد viewport شود، صفحه بعدی بارگذاری می‌شود
      pagination={<div ref={sentinelRef} />}
    />
  )
}