perf(storage menu): improve bucket list for users with many thousand buckets (supabase#39826)

* perf(storage menu): virtualize and memoize bucket rows

The Storage Menu fails to render properly when the user has thousands of
buckets. Virtualizing and memoizing BucketRows to reduce rendering work.

* refactor(bucket list): only virtualize bucket list when more than 50 buckets

* style(storage menu): improve styling for virtualized and unvirtualized lists

Author: charislam

apps/studio/components/interfaces/Storage/BucketRow.tsx

@@ -1,6 +1,7 @@
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { Columns3, Edit2, MoreVertical, Trash, XCircle } from 'lucide-react'
 import Link from 'next/link'
+import type { CSSProperties } from 'react'
 import { useState } from 'react'
 
 import { DeleteBucketModal } from 'components/interfaces/Storage/DeleteBucketModal'
@@ -26,19 +27,29 @@ export interface BucketRowProps {
   bucket: Bucket
   projectRef?: string
   isSelected: boolean
+  style?: CSSProperties
+  className?: string
 }
 
-export const BucketRow = ({ bucket, projectRef = '', isSelected = false }: BucketRowProps) => {
+export const BucketRow = ({
+  bucket,
+  projectRef = '',
+  isSelected = false,
+  style,
+  className,
+}: BucketRowProps) => {
   const { can: canUpdateBuckets } = useAsyncCheckPermissions(PermissionAction.STORAGE_WRITE, '*')
   const [modal, setModal] = useState<string | null>(null)
   const onClose = () => setModal(null)
 
   return (
     <div
       key={bucket.id}
+      style={style}
       className={cn(
         'group flex items-center justify-between rounded-md',
-        isSelected && 'text-foreground bg-surface-100'
+        isSelected && 'text-foreground bg-surface-100',
+        className
       )}
     >
       {/* Even though we trim whitespaces from bucket names, there may be some existing buckets with trailing whitespaces. */}

apps/studio/components/interfaces/Storage/StorageMenu.BucketList.tsx

@@ -0,0 +1,120 @@
+import type { CSSProperties } from 'react'
+import { memo, useLayoutEffect, useMemo, useRef, useState } from 'react'
+import type { ListChildComponentProps } from 'react-window'
+import { FixedSizeList as List, areEqual } from 'react-window'
+
+import type { Bucket } from 'data/storage/buckets-query'
+import { BucketRow } from './BucketRow'
+
+type BucketListProps = {
+  buckets: Bucket[]
+  selectedBucketId?: string
+  projectRef?: string
+}
+
+const BUCKET_ROW_HEIGHT = 'h-7'
+
+const VirtualizedBucketRow = memo(
+  ({ index, style, data }: ListChildComponentProps<BucketListProps>) => {
+    const bucket = data.buckets[index]
+    const isSelected = data.selectedBucketId === bucket.id
+
+    return (
+      <BucketRow
+        bucket={bucket}
+        isSelected={isSelected}
+        projectRef={data.projectRef}
+        style={style as CSSProperties}
+        className={BUCKET_ROW_HEIGHT}
+      />
+    )
+  },
+  (prev, next) => {
+    if (!areEqual(prev, next)) return false
+
+    const prevBucket = prev.data.buckets[prev.index]
+    const nextBucket = next.data.buckets[next.index]
+
+    if (prevBucket !== nextBucket) return false
+
+    const wasSelected = prev.data.selectedBucketId === prevBucket.id
+    const isSelected = next.data.selectedBucketId === nextBucket.id
+
+    return wasSelected === isSelected
+  }
+)
+VirtualizedBucketRow.displayName = 'VirtualizedBucketRow'
+
+const BucketListVirtualized = ({ buckets, selectedBucketId, projectRef = '' }: BucketListProps) => {
+  const [listHeight, setListHeight] = useState(500)
+  const sizerRef = useRef<HTMLDivElement>(null)
+
+  useLayoutEffect(() => {
+    if (sizerRef.current) {
+      const resizeObserver = new ResizeObserver(([entry]) => {
+        const { height } = entry.contentRect
+        setListHeight(height)
+      })
+
+      resizeObserver.observe(sizerRef.current)
+      setListHeight(sizerRef.current.getBoundingClientRect().height)
+
+      return () => {
+        resizeObserver.disconnect()
+      }
+    }
+  }, [])
+
+  const itemData = useMemo<BucketListProps>(
+    () => ({
+      buckets,
+      projectRef,
+      selectedBucketId,
+    }),
+    [buckets, projectRef, selectedBucketId]
+  )
+
+  return (
+    <div ref={sizerRef} className="flex-grow">
+      <List
+        itemCount={buckets.length}
+        itemData={itemData}
+        itemKey={(index) => buckets[index].id}
+        height={listHeight}
+        // itemSize should match the height of BucketRow + any gap/margin
+        itemSize={28}
+        width="100%"
+      >
+        {VirtualizedBucketRow}
+      </List>
+    </div>
+  )
+}
+
+export const BucketList = ({ buckets, selectedBucketId, projectRef = '' }: BucketListProps) => {
+  const numBuckets = buckets.length
+
+  if (numBuckets <= 50) {
+    return (
+      <div className="mr-3 mb-6">
+        {buckets.map((bucket) => (
+          <BucketRow
+            key={bucket.id}
+            bucket={bucket}
+            isSelected={selectedBucketId === bucket.id}
+            projectRef={projectRef}
+            className={BUCKET_ROW_HEIGHT}
+          />
+        ))}
+      </div>
+    )
+  }
+
+  return (
+    <BucketListVirtualized
+      buckets={buckets}
+      selectedBucketId={selectedBucketId}
+      projectRef={projectRef}
+    />
+  )
+}

apps/studio/components/interfaces/Storage/StorageMenu.tsx

@@ -1,6 +1,6 @@
 import Link from 'next/link'
 import { useRouter } from 'next/router'
-import { useState } from 'react'
+import { useMemo, useState } from 'react'
 
 import { useFlag, useParams } from 'common'
 import { CreateBucketModal } from 'components/interfaces/Storage/CreateBucketModal'
@@ -19,7 +19,7 @@ import {
   InnerSideBarFilterSortDropdown,
   InnerSideBarFilterSortDropdownItem,
 } from 'ui-patterns/InnerSideMenu'
-import { BucketRow } from './BucketRow'
+import { BucketList } from './StorageMenu.BucketList'
 
 export const StorageMenu = () => {
   const router = useRouter()
@@ -53,21 +53,31 @@ export const StorageMenu = () => {
     isError,
     isSuccess,
   } = useBucketsQuery({ projectRef: ref })
-  const sortedBuckets =
-    snap.sortBucket === 'alphabetical'
-      ? buckets.sort((a, b) =>
-          a.name.toLowerCase().trim().localeCompare(b.name.toLowerCase().trim())
-        )
-      : buckets.sort((a, b) => (new Date(b.created_at) > new Date(a.created_at) ? -1 : 1))
-  const filteredBuckets =
-    searchText.length > 1
-      ? sortedBuckets.filter((bucket) => bucket.name.includes(searchText.trim()))
-      : sortedBuckets
+  const sortedBuckets = useMemo(
+    () =>
+      snap.sortBucket === 'alphabetical'
+        ? buckets.sort((a, b) =>
+            a.name.toLowerCase().trim().localeCompare(b.name.toLowerCase().trim())
+          )
+        : buckets.sort((a, b) => (new Date(b.created_at) > new Date(a.created_at) ? -1 : 1)),
+    [buckets, snap.sortBucket]
+  )
+  const filteredBuckets = useMemo(
+    () =>
+      searchText.length > 1
+        ? sortedBuckets.filter((bucket) => bucket.name.includes(searchText.trim()))
+        : sortedBuckets,
+    [sortedBuckets, searchText]
+  )
   const tempNotSupported = error?.message.includes('Tenant config') && isBranch
 
   return (
     <>
-      <Menu type="pills" className="mt-6 flex flex-grow flex-col">
+      <Menu
+        type="pills"
+        className="pt-6 h-full flex flex-col"
+        ulClassName="flex flex-col flex-grow"
+      >
         <div className="mb-6 mx-5 flex flex-col gap-y-1.5">
           <CreateBucketModal />
 
@@ -100,8 +110,8 @@ export const StorageMenu = () => {
           </InnerSideBarFilters>
         </div>
 
-        <div className="space-y-6">
-          <div className="mx-3">
+        <div className="flex flex-col flex-grow">
+          <div className="flex-grow ml-3 flex flex-col">
             <Menu.Group title={<span className="uppercase font-mono">All buckets</span>} />
 
             {isLoading && (
@@ -145,17 +155,13 @@ export const StorageMenu = () => {
                     description={`Your search for "${searchText}" did not return any results`}
                   />
                 )}
-                {filteredBuckets.map((bucket, idx: number) => {
-                  const isSelected = bucketId === bucket.id
-                  return (
-                    <BucketRow
-                      key={`${idx}_${bucket.id}`}
-                      bucket={bucket}
-                      projectRef={ref}
-                      isSelected={isSelected}
-                    />
-                  )
-                })}
+                {filteredBuckets.length > 0 && (
+                  <BucketList
+                    buckets={filteredBuckets}
+                    selectedBucketId={bucketId}
+                    projectRef={ref}
+                  />
+                )}
               </>
             )}
           </div>