chore: do not preload plan change data on page load (#44562)

The data is preloaded even though the modal is never visible

apps/studio/components/interfaces/Billing/NoProjectsOnPaidOrgInfo.tsx

@@ -8,22 +8,18 @@ interface NoProjectsOnPaidOrgInfoProps {
   organization?: Organization
 }
 
+const EXCLUDED_PLANS = ['free', 'platform', 'enterprise']
+
 export const NoProjectsOnPaidOrgInfo = ({ organization }: NoProjectsOnPaidOrgInfoProps) => {
-  const isPlatformOrg = organization?.plan?.id === 'platform'
+  const isEligible = organization != null && !EXCLUDED_PLANS.includes(organization.plan.id ?? '')
+
   const { data } = useOrgProjectsInfiniteQuery(
     { slug: organization?.slug },
-    { enabled: !isPlatformOrg }
+    { enabled: isEligible }
   )
   const projectCount = data?.pages[0].pagination.count ?? 0
 
-  if (
-    projectCount > 0 ||
-    organization?.plan === undefined ||
-    organization.plan.id === 'free' ||
-    organization.plan.id === 'enterprise' ||
-    isPlatformOrg
-  )
-    return null
+  if (!isEligible || projectCount > 0) return null
 
   return (
     <Admonition

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

@@ -67,7 +67,10 @@ export const PlanUpdateSidePanel = () => {
     'stripe.subscriptions'
   )
 
-  const { data: orgProjectsData } = useOrgProjectsInfiniteQuery({ slug })
+  const snap = useOrgSettingsPageStateSnapshot()
+  const visible = snap.panelKey === 'subscriptionPlan'
+
+  const { data: orgProjectsData } = useOrgProjectsInfiniteQuery({ slug }, { enabled: visible })
   const orgProjects =
     useMemo(
       () => orgProjectsData?.pages.flatMap((page) => page.projects),
@@ -77,8 +80,6 @@ export const PlanUpdateSidePanel = () => {
   const { data } = useOrganizationQuery({ slug })
   const hasOrioleProjects = !!data?.has_oriole_project
 
-  const snap = useOrgSettingsPageStateSnapshot()
-  const visible = snap.panelKey === 'subscriptionPlan'
   const onClose = () => {
     const { panel, ...queryWithoutPanel } = router.query
     router.push({ pathname: router.pathname, query: queryWithoutPanel }, undefined, {
@@ -90,8 +91,14 @@ export const PlanUpdateSidePanel = () => {
   const { data: subscription, isSuccess: isSuccessSubscription } = useOrgSubscriptionQuery({
     orgSlug: slug,
   })
-  const { data: plans, isPending: isLoadingPlans } = useOrgPlansQuery({ orgSlug: slug })
-  const { data: membersExceededLimit } = useFreeProjectLimitCheckQuery({ slug })
+  const { data: plans, isPending: isLoadingPlans } = useOrgPlansQuery(
+    { orgSlug: slug },
+    { enabled: visible }
+  )
+  const { data: membersExceededLimit } = useFreeProjectLimitCheckQuery(
+    { slug },
+    { enabled: visible }
+  )
 
   const {
     data: subscriptionPreview,