fix(studio): wait for organization before loading regions (#50572)

## Problem

The new-project page can request available regions with a paid compute
size before the selected organization plan resolves. For free
organizations, this produces a failed request followed by a successful
request without the size.

## Fix

Delay both available-regions query observers until the selected
organization resolves, while preserving size-dependent refetches. Add
request-level coverage for the initial free- and paid-plan behavior.

## How to test

- Run `pnpm --filter studio exec vitest --run
'tests/pages/new/[slug].test.tsx'`.
- Open the new-project page for a free organization and inspect the
available-regions request.
- Expected result: one initial request is sent without
`desired_instance_size`; paid organizations send one initial request
with `desired_instance_size=micro`.

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **Bug Fixes**
- Improved project creation so available regions are loaded only after
an organization is selected.
- Ensured region availability requests use the appropriate instance size
for the organization’s plan: no size parameter for free plans and
`micro` for paid plans.
- Prevented unnecessary region-availability requests when no
organization has been selected.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

apps/studio/components/interfaces/ProjectCreation/ProjectCreationForm.tsx

@@ -122,6 +122,7 @@ export const ProjectCreationForm = ({
   const surface = isVercelIntegrationFlow ? 'vercel' : 'main'
 
   const { data: currentOrg } = useSelectedOrganizationQuery()
+  const hasSelectedOrganization = currentOrg !== undefined
   const isFreePlan = currentOrg?.plan?.id === 'free'
   const canChooseInstanceSize = !isFreePlan
 
@@ -283,7 +284,7 @@ export const ProjectCreationForm = ({
         desiredInstanceSize: instanceSize as DesiredInstanceSize,
       },
       {
-        enabled: flagsLoaded && smartRegionEnabled,
+        enabled: flagsLoaded && smartRegionEnabled && hasSelectedOrganization,
         refetchOnMount: false,
         refetchOnWindowFocus: false,
         refetchInterval: false,
@@ -792,6 +793,7 @@ export const ProjectCreationForm = ({
 
                     <RegionSelector
                       form={form}
+                      hasSelectedOrganization={hasSelectedOrganization}
                       instanceSize={instanceSize as DesiredInstanceSize}
                       showBestAvailableRegionOption={showBestAvailableRegionOption}
                       isBestAvailableSelected={isBestAvailableSelected}

apps/studio/components/interfaces/ProjectCreation/RegionSelector.tsx

@@ -43,6 +43,7 @@ import type { DesiredInstanceSize } from '@/data/projects/new-project.constants'
 
 interface RegionSelectorProps {
   form: UseFormReturn<CreateProjectForm>
+  hasSelectedOrganization: boolean
   instanceSize?: DesiredInstanceSize
   layout?: 'vertical' | 'horizontal'
   showBestAvailableRegionOption: boolean
@@ -84,6 +85,7 @@ const BestAvailableRegionIcon = () => (
 
 export const RegionSelector = ({
   form,
+  hasSelectedOrganization,
   instanceSize,
   layout = 'horizontal',
   showBestAvailableRegionOption,
@@ -116,7 +118,10 @@ export const RegionSelector = ({
     error: errorAvailableRegions,
   } = useOrganizationAvailableRegionsQuery(
     { slug, cloudProvider, desiredInstanceSize: instanceSize },
-    { enabled: smartRegionEnabled, staleTime: 1000 * 60 * 5 } // 5 minutes
+    {
+      enabled: smartRegionEnabled && hasSelectedOrganization,
+      staleTime: 1000 * 60 * 5,
+    }
   )
 
   const allSmartRegions = availableRegionsData?.all.smartGroup ?? []