Repository: supabase/supabase
File: apps/studio/components/interfaces/Organization/Usage/UsageSection/DiskUsage.tsx (TypeScript)

Code before:
import { SectionContent } from '../SectionContent'
import { CategoryAttribute } from '../Usage.constants'

export interface DiskUsageProps {
  slug: string
  projectRef?: string
  attribute: CategoryAttribute
  subscription?: OrgSubscription
  usage?: OrgUsageResponse

  currentBillingCycleSelected: boolean
}

export const DiskUsage = ({
  slug,
  projectRef,
  attribute,
  subscription,
  usage,
  currentBillingCycleSelected,
}: DiskUsageProps) => {
  const { data, isError, isLoading, isSuccess, error } = useOrgProjectsInfiniteQuery(
    { slug },
    { enabled: currentBillingCycleSelected }
  )
  const projects = useMemo(() => data?.pages.flatMap((page) => page.projects), [data?.pages]) || []

  const relevantProjects = useMemo(() => {
    return isSuccess
      ? projects
          .filter((project) => {
            // We do want to show branches that are exceeding the 8 GB limit, as people could have persistent or very long-living branches
            const isBranchExceedingFreeQuota =
              project.is_branch && project.databases.some((db) => (db.disk_volume_size_gb ?? 8) > 8)

            const isActiveProject = project.status !== PROJECT_STATUS.INACTIVE

            const isHostedOnAws = project.databases.every((db) => db.cloud_provider === 'AWS')

            return (
              (!project.is_branch || isBranchExceedingFreeQuota) && isActiveProject && isHostedOnAws
            )
          })
          .filter((it) => it.ref === projectRef || !projectRef)
      : []
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [isSuccess, projectRef])

  const hasProjectsExceedingDiskSize = useMemo(() => {
    return relevantProjects.some((it) =>
      it.databases.some(

Review comment (suggestion):
nit:
```suggestion
  const projects = useMemo(() => data?.pages.flatMap((page) => page.projects) || [], [data?.pages])
```

Code after:
import { SectionContent } from '../SectionContent'
import { CategoryAttribute } from '../Usage.constants'

export interface DiskUsageProps {
  slug: string
  projectRef?: string
  attribute: CategoryAttribute
  subscription?: OrgSubscription
  usage?: OrgUsageResponse

  currentBillingCycleSelected: boolean
}

export const DiskUsage = ({
  slug,
  projectRef,
  attribute,
  subscription,
  usage,
  currentBillingCycleSelected,
}: DiskUsageProps) => {
  const { data, isError, isLoading, isSuccess, error } = useOrgProjectsInfiniteQuery(
    { slug },
    { enabled: currentBillingCycleSelected }
  )
  const projects = useMemo(() => data?.pages.flatMap((page) => page.projects) || [], [data?.pages])

  const relevantProjects = useMemo(() => {
    return isSuccess
      ? projects
          .filter((project) => {
            // We do want to show branches that are exceeding the 8 GB limit, as people could have persistent or very long-living branches
            const isBranchExceedingFreeQuota =
              project.is_branch && project.databases.some((db) => (db.disk_volume_size_gb ?? 8) > 8)

            const isActiveProject = project.status !== PROJECT_STATUS.INACTIVE

            const isHostedOnAws = project.databases.every((db) => db.cloud_provider === 'AWS')

            return (
              (!project.is_branch || isBranchExceedingFreeQuota) && isActiveProject && isHostedOnAws
            )
          })
          .filter((it) => it.ref === projectRef || !projectRef)
      : []
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [isSuccess, projects, projectRef])

  const hasProjectsExceedingDiskSize = useMemo(() => {
    return relevantProjects.some((it) =>
      it.databases.some(