useInfiniteLoadingBuckets() — supabase Function Reference

Architecture documentation for the useInfiniteLoadingBuckets() function in SecondLevelNav.StoragePicker.tsx from the supabase codebase.

Function tsx ContentManagement Collections called by 1

Entity Profile

ContentManagement→ Collections→ useInfiniteLoadingBuckets() — supabase Function Reference

Dependency Diagram

graph TD
  6dfe4cd7_4ccc_5812_d492_75144bb6ff05["useInfiniteLoadingBuckets()"]
  47fd6a9c_ce8d_aaeb_83e3_359aea4249e8["StorageResourceList()"]
  47fd6a9c_ce8d_aaeb_83e3_359aea4249e8 -->|calls| 6dfe4cd7_4ccc_5812_d492_75144bb6ff05
  style 6dfe4cd7_4ccc_5812_d492_75144bb6ff05 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/studio/components/interfaces/ProjectAPIDocs/SecondLevelNav.StoragePicker.tsx lines 41–77

const useInfiniteLoadingBuckets = ({
  projectRef,
  searchQuery,
  rawQuery,
}: UseInfiniteLoadingBucketsParams) => {
  const { data, isFetching, hasNextPage, fetchNextPage, isFetchingNextPage } =
    usePaginatedBucketsQuery(
      { projectRef, search: searchQuery },
      {
        enabled: !!projectRef,
        placeholderData: rawQuery.length === 0 ? keepPreviousData : undefined,
      }
    )
  const buckets = useMemo(() => data?.pages.flatMap((page) => page) ?? [], [data])

  const scrollContainerRef = useRef<HTMLDivElement | null>(null)
  const [sentinelRef, entry] = useIntersectionObserver({
    threshold: 1,
    root: scrollContainerRef.current,
    rootMargin: '0px',
  })

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

  return {
    isFetching,
    hasNextPage,
    isFetchingNextPage,
    buckets,
    scrollContainerRef,
    sentinelRef,
  }
}