ProjectUsageSection.tsx38 lines · main

1	import { AlertCircle } from 'lucide-react'
2
3	import ProjectUsage from './ProjectUsage'
4	import { ProjectUsageLoadingState } from '@/components/layouts/ProjectLayout/LoadingState'
5	import InformationBox from '@/components/ui/InformationBox'
6	import { useProjectLogRequestsCountQuery } from '@/data/analytics/project-log-requests-count-query'
7	import { useProjectLogStatsQuery } from '@/data/analytics/project-log-stats-query'
8	import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
9
10	export const ProjectUsageSection = () => {
11	const { data: project } = useSelectedProjectQuery()
12	const { error, isPending: isLoading } = useProjectLogRequestsCountQuery({
13	projectRef: project?.ref,
14	})
15
16	// wait for the stats to load before showing the usage section to eliminate multiple spinners
17	const { isPending: isLogsStatsLoading } = useProjectLogStatsQuery({
18	projectRef: project?.ref,
19	interval: '1hr',
20	})
21
22	if (isLoading || isLogsStatsLoading) {
23	return <ProjectUsageLoadingState />
24	}
25
26	if (error) {
27	return (
28	<InformationBox
29	hideCollapse
30	defaultVisibility
31	icon={<AlertCircle size={18} strokeWidth={2} />}
32	title="There was an issue loading the usage details of your project"
33	/>
34	)
35	}
36
37	return <ProjectUsage />
38	}