StorageSubsections() — supabase Function Reference

Source Code

apps/studio/components/interfaces/ProjectAPIDocs/FirstLevelNav.tsx lines 259–285

const StorageSubsections = (): ReactNode => {
  const { ref } = useParams()

  const { data, isLoading, isFetchingNextPage, hasNextPage, fetchNextPage } =
    usePaginatedBucketsQuery({
      projectRef: ref,
    })
  const buckets = data?.pages.flatMap((page) => page) ?? []

  return (
    <>
      {isLoading && <LoadingIndicator />}
      {buckets.length > 0 && <Separator />}
      <InfiniteListDefault
        className="max-h-80"
        items={buckets}
        getItemKey={(idx) => buckets[idx]?.name}
        getItemSize={() => 28}
        hasNextPage={!!hasNextPage}
        isLoadingNextPage={isFetchingNextPage}
        onLoadNextPage={fetchNextPage}
        ItemComponent={BucketButton}
        LoaderComponent={({ style }) => <LoadingIndicator style={{ ...style, width: '75%' }} />}
      />
    </>
  )
}