chore: cache time usage / do not preload invoice breakdown (#39278)

- Increase cache time of usage to 60m
- Ensure org is fully loaded before rendering invoice breakdown (this currently leads to starting to load this endpoint and then cancelling it when directly landing on the org billing page)

apps/studio/components/interfaces/Organization/BillingSettings/BillingSettings.tsx

@@ -57,7 +57,7 @@ export const BillingSettings = () => {
 
       <ScaffoldDivider />
 
-      {org?.plan.id !== 'free' && (
+      {org && org.plan.id !== 'free' && (
         <ScaffoldContainer id="breakdown">
           <BillingBreakdown />
         </ScaffoldContainer>

apps/studio/data/usage/org-usage-query.ts

@@ -44,7 +44,7 @@ export const useOrgUsageQuery = <TData = OrgUsageData>(
     ({ signal }) => getOrgUsage({ orgSlug, projectRef, start, end }, signal),
     {
       enabled: enabled && IS_PLATFORM && typeof orgSlug !== 'undefined',
-      staleTime: 1000 * 60 * 30, // 30 mins, underlying usage data only refreshes once an hour, so safe to cache for a while
+      staleTime: 1000 * 60 * 60, // 60 mins, underlying usage data only refreshes once an hour, so safe to cache for a while
       ...options,
     }
   )