Chore/fix redeem code UI (supabase#42615)

## Context

Main fix was to address the size of the `OrganizationCard` on the redeem
code page - was taking up the height of the flex div when the number of
cards is <= 3 (Main fix is `max-h-min` in `OrganizationCard`)

### Before
<img width="1270" height="411" alt="image"
src="https://github.com/user-attachments/assets/73228b62-f9db-43c8-813b-cb04c9f6cb2b"
/>

### After
<img width="1255" height="420" alt="image"
src="https://github.com/user-attachments/assets/a1d82753-daba-4c3d-a64d-3bb913ded161"
/>

## Other changes
- Small improvement to perceived loading speed by only rendering the
cards as loaders, text content on the left should render immediately on
page load
- Loading state to consider if the feature flag has been loaded as well
to prevent flicker of UI
- Hide the "Go to org" button when redeemed on the org page already


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

* **Bug Fixes**
* Improved loading/gating so the redemption UI waits for feature flags
and profile data before showing content.
* Disabled submit when the redemption form is invalid to prevent empty
submissions; submit button respects form validity, permissions, and
loading state.

* **UI**
* Conditionally shows upgrade and "Go to organization" options based on
organization plan and current path.
  * Adjusted card layout to better constrain content height.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Kevin Grüneberg <k.grueneberg1994@gmail.com>

Author: joshenlim

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

@@ -38,7 +38,7 @@ import { useLatest } from '@/hooks/misc/useLatest'
 const FORM_ID = 'credit-code-redemption'
 
 const FormSchema = z.object({
-  code: z.coerce.string(),
+  code: z.string().min(1, 'Code is required'),
 })
 
 type CreditCodeRedemptionForm = z.infer<typeof FormSchema>
@@ -78,6 +78,7 @@ export const CreditCodeRedemption = ({
     resolver: zodResolver(FormSchema),
     defaultValues: { code: '' },
   })
+  const { isValid } = form.formState
 
   const {
     mutate: redeemCode,
@@ -224,19 +225,24 @@ export const CreditCodeRedemption = ({
               </div>
             )}
 
-            <div className="mt-4 flex flex-col gap-y-4">
-              <Separator />
-              <div className="flex justify-center items-center gap-x-2">
-                {org?.plan.id === 'free' && (
-                  <UpgradePlanButton plan="Pro" source="code-redeem" slug={org.slug}>
-                    Upgrade organization
-                  </UpgradePlanButton>
-                )}
-                <Button asChild type="default">
-                  <Link href={`/org/${org?.slug}`}>Go to organization</Link>
-                </Button>
+            {(!router.pathname.includes('/org/') || org?.plan.id === 'free') && (
+              <div className="mt-4 flex flex-col gap-y-4">
+                <Separator />
+                <div className="flex justify-center items-center gap-x-2">
+                  {org?.plan.id === 'free' && (
+                    <UpgradePlanButton plan="Pro" source="code-redeem" slug={org.slug}>
+                      Upgrade organization
+                    </UpgradePlanButton>
+                  )}
+
+                  {!router.pathname.includes('/org/') && (
+                    <Button asChild type="default">
+                      <Link href={`/org/${org?.slug}`}>Go to organization</Link>
+                    </Button>
+                  )}
+                </div>
               </div>
-            </div>
+            )}
           </div>
         ) : (
           <>
@@ -265,7 +271,12 @@ export const CreditCodeRedemption = ({
                       control={form.control}
                       name="code"
                       render={({ field }) => (
-                        <FormItemLayout label="Code" className="gap-1" layout="horizontal">
+                        <FormItemLayout
+                          hideMessage
+                          label="Code"
+                          className="gap-1"
+                          layout="horizontal"
+                        >
                           <Input_Shadcn_
                             {...field}
                             className="uppercase w-56 ml-auto"
@@ -312,7 +323,7 @@ export const CreditCodeRedemption = ({
                       type="primary"
                       className="pointer-events-auto"
                       loading={redeemingCode}
-                      disabled={codeRedemptionDisabled}
+                      disabled={codeRedemptionDisabled || !isValid}
                       htmlType="submit"
                       tooltip={{
                         content: {

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

@@ -29,7 +29,7 @@ export const OrganizationCard = ({
     <ActionCard
       bgColor="bg border"
       className={cn(
-        'flex items-center min-h-[70px] [&>div]:w-full [&>div]:items-center',
+        'flex items-center min-h-[70px] [&>div]:w-full [&>div]:items-center max-h-min',
         className
       )}
       icon={<Boxes size={18} strokeWidth={1} className="text-foreground" />}

apps/studio/pages/redeem.tsx

@@ -1,6 +1,6 @@
-import { useFlag } from 'common'
+import { FeatureFlagContext, useFlag } from 'common'
 import Link from 'next/link'
-import { useState } from 'react'
+import { useContext, useState } from 'react'
 import { Button } from 'ui'
 import { Admonition, ShimmeringLoader } from 'ui-patterns'
 
@@ -15,10 +15,14 @@ import {
 } from '@/components/layouts/Scaffold'
 import AlertError from '@/components/ui/AlertError'
 import { useOrganizationsQuery } from '@/data/organizations/organizations-query'
+import { useProfile } from '@/lib/profile'
 import type { NextPageWithLayout } from '@/types'
 
 const RedeemCreditsContent = () => {
   const redeemCodeEnabled = useFlag('redeemCodeEnabled')
+  const { isLoading: isLoadingProfile } = useProfile()
+  const { hasLoaded } = useContext(FeatureFlagContext)
+
   const [selectedOrg, setSelectedOrg] = useState<string | null>(null)
 
   const {
@@ -28,18 +32,6 @@ const RedeemCreditsContent = () => {
     isError: isErrorOrganizations,
   } = useOrganizationsQuery()
 
-  if (isLoadingOrganizations) {
-    return (
-      <div className="grid md:grid-cols-2 pt-10 gap-8">
-        <ShimmeringLoader className="w-full" />
-        <div className="space-y-4">
-          <ShimmeringLoader className="w-full h-14" />
-          <ShimmeringLoader className="w-full h-14" />
-        </div>
-      </div>
-    )
-  }
-
   if (isErrorOrganizations) {
     return (
       <AlertError
@@ -74,7 +66,13 @@ const RedeemCreditsContent = () => {
       </div>
 
       <div className="flex flex-col gap-y-2">
-        {redeemCodeEnabled ? (
+        {/* [Joshen] Checking for profile as well as organizations query internally waits for profile to be loaded */}
+        {isLoadingProfile || isLoadingOrganizations || !hasLoaded ? (
+          <>
+            <ShimmeringLoader className="w-full h-[70px]" />
+            <ShimmeringLoader className="w-full h-[70px]" />
+          </>
+        ) : redeemCodeEnabled ? (
           organizations?.map((org) => (
             <OrganizationCard
               key={org.id}