From b2d8772d753cbe21929ffd67c4cea5c9c009ffc4 Mon Sep 17 00:00:00 2001
From: "K-Dog (Kevin)" <k.grueneberg1994@gmail.com>
Date: Mon, 6 Apr 2026 17:26:02 +0800
Subject: [PATCH] chore: do not preload plan change data on page load (#44562)

The data is preloaded even though the modal is never visible
---
 .../Billing/NoProjectsOnPaidOrgInfo.tsx         | 16 ++++++----------
 .../Subscription/PlanUpdateSidePanel.tsx        | 17 ++++++++++++-----
 2 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/apps/studio/components/interfaces/Billing/NoProjectsOnPaidOrgInfo.tsx b/apps/studio/components/interfaces/Billing/NoProjectsOnPaidOrgInfo.tsx
index 81a6a2227f8..79006d1ab0a 100644
--- a/apps/studio/components/interfaces/Billing/NoProjectsOnPaidOrgInfo.tsx
+++ b/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
diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanUpdateSidePanel.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanUpdateSidePanel.tsx
index 581c9a95d34..0125853d98b 100644
--- a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanUpdateSidePanel.tsx
+++ b/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,