cleaner loading state

Author: izadoesdev

apps/dashboard/app/(main)/billing/cost-breakdown/components/usage-breakdown-table.tsx

@@ -88,7 +88,7 @@ export function UsageBreakdownTable({
 		);
 	}
 
-	if (!usageData || usageData.eventTypeBreakdown.length === 0) {
+	if (!usageData || !usageData.eventTypeBreakdown || usageData.eventTypeBreakdown.length === 0) {
 		return (
 			<div className="flex h-full items-center justify-center">
 				<div className="text-center">

apps/dashboard/app/(main)/billing/cost-breakdown/page.tsx

@@ -31,12 +31,15 @@ export default function CostBreakdownPage() {
 		[dateRange, activeOrganization?.id]
 	);
 
-	const { data: organizationUsage } = trpc.organizations.getUsage.useQuery();
 	const { data: usageData, isLoading: isLoadingUsage } =
 		trpc.billing.getUsage.useQuery(usageQueryInput, {
 			enabled: !isLoadingOrganizations,
 		});
 
+	const { data: organizationUsage } = trpc.organizations.getUsage.useQuery();
+
+	const isLoading = isLoadingUsage;
+
 	const handleDateRangeChange = (startDate: string, endDate: string) => {
 		setDateRange({ startDate, endDate });
 	};
@@ -92,7 +95,7 @@ export default function CostBreakdownPage() {
 				<div className="flex-[3]">
 					<Suspense fallback={<Skeleton className="h-full w-full" />}>
 						<ConsumptionChart
-							isLoading={isLoadingUsage}
+							isLoading={isLoading}
 							onDateRangeChange={handleDateRangeChange}
 							overageInfo={overageInfo}
 							usageData={usageData}
@@ -102,7 +105,7 @@ export default function CostBreakdownPage() {
 				<div className="flex-[2]">
 					<Suspense fallback={<Skeleton className="h-full w-full" />}>
 						<UsageBreakdownTable
-							isLoading={isLoadingUsage}
+							isLoading={isLoading}
 							overageInfo={overageInfo}
 							usageData={usageData}
 						/>