ProjectUsageSection() — supabase Function Reference

Source Code

apps/studio/components/interfaces/Home/ProjectUsageSection.tsx lines 10–38

export const ProjectUsageSection = () => {
  const { data: project } = useSelectedProjectQuery()
  const { error, isPending: isLoading } = useProjectLogRequestsCountQuery({
    projectRef: project?.ref,
  })

  // wait for the stats to load before showing the usage section to eliminate multiple spinners
  const { isPending: isLogsStatsLoading } = useProjectLogStatsQuery({
    projectRef: project?.ref,
    interval: '1hr',
  })

  if (isLoading || isLogsStatsLoading) {
    return <ProjectUsageLoadingState />
  }

  if (error) {
    return (
      <InformationBox
        hideCollapse
        defaultVisibility
        icon={<AlertCircle size={18} strokeWidth={2} />}
        title="There was an issue loading the usage details of your project"
      />
    )
  }

  return <ProjectUsage />
}