LoadMoreRows() — supabase Function Reference

Source Code

apps/studio/components/interfaces/Home/ProjectList/LoadMoreRow.tsx lines 13–60

export const LoadMoreRows = ({ type, isFetchingNextPage, fetchNextPage }: LoadMoreRowProps) => {
  const [sentinelRef, entry] = useIntersectionObserver({
    threshold: 0,
    rootMargin: '200px 0px 200px 0px',
  })

  useEffect(() => {
    if (entry?.isIntersecting && !isFetchingNextPage) {
      fetchNextPage?.()
    }
  }, [entry?.isIntersecting, isFetchingNextPage, fetchNextPage])

  if (type === 'card') {
    return (
      <ul
        ref={sentinelRef}
        className={cn(
          'grid grid-cols-1 gap-2 md:gap-4',
          'sm:grid-cols-1 md:grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 pb-6'
        )}
      >
        {[...Array(2)].map((_, i) => (
          <ShimmeringCard key={i} />
        ))}
      </ul>
    )
  }

  return (
    <TableRow ref={sentinelRef}>
      <TableCell>
        <Skeleton className="bg-surface-400 h-4 w-32"></Skeleton>
      </TableCell>
      <TableCell>
        <Skeleton className="bg-surface-400 h-4 w-16"></Skeleton>
      </TableCell>
      <TableCell>
        <Skeleton className="bg-surface-400 h-4 w-20"></Skeleton>
      </TableCell>
      <TableCell>
        <Skeleton className="bg-surface-400 h-4 w-20"></Skeleton>
      </TableCell>
      <TableCell>
        <Skeleton className="bg-surface-400 h-4 w-24"></Skeleton>
      </TableCell>
    </TableRow>
  )
}