address comments

Author: icecrasher321

apps/sim/app/account/settings/billing/credit-usage/page.test.ts

@@ -3,14 +3,19 @@
  */
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
-const { mockGetPersonalSubscription, mockGetSession, mockIsEnterprise, mockRedirect } = vi.hoisted(
-  () => ({
-    mockGetPersonalSubscription: vi.fn(),
-    mockGetSession: vi.fn(),
-    mockIsEnterprise: vi.fn(),
-    mockRedirect: vi.fn(),
-  })
-)
+const {
+  mockCreditUsageLoading,
+  mockGetPersonalSubscription,
+  mockGetSession,
+  mockIsEnterprise,
+  mockRedirect,
+} = vi.hoisted(() => ({
+  mockCreditUsageLoading: vi.fn(() => null),
+  mockGetPersonalSubscription: vi.fn(),
+  mockGetSession: vi.fn(),
+  mockIsEnterprise: vi.fn(),
+  mockRedirect: vi.fn(),
+}))
 
 vi.mock('next/navigation', () => ({
   redirect: mockRedirect,
@@ -34,6 +39,7 @@ vi.mock('@/app/workspace/[workspaceId]/settings/billing/credit-usage/credit-usag
 
 vi.mock('@/app/workspace/[workspaceId]/settings/billing/credit-usage/loading', () => ({
   default: () => null,
+  CreditUsageLoading: mockCreditUsageLoading,
 }))
 
 import AccountCreditUsagePage from '@/app/account/settings/billing/credit-usage/page'
@@ -52,4 +58,13 @@ describe('AccountCreditUsagePage', () => {
     expect(mockGetPersonalSubscription).toHaveBeenCalledWith('viewer-a')
     expect(mockRedirect).not.toHaveBeenCalled()
   })
+
+  it('uses an account-scoped back link while credit usage is loading', async () => {
+    const page = await AccountCreditUsagePage()
+
+    expect(page.props.fallback).toMatchObject({
+      type: mockCreditUsageLoading,
+      props: { backHref: '/account/settings/billing' },
+    })
+  })
 })

apps/sim/app/account/settings/billing/credit-usage/page.tsx

@@ -6,7 +6,7 @@ import { getSession } from '@/lib/auth'
 import { getHighestPriorityPersonalSubscription } from '@/lib/billing/core/plan'
 import { isEnterprise } from '@/lib/billing/plan-helpers'
 import { CreditUsageView } from '@/app/workspace/[workspaceId]/settings/billing/credit-usage/credit-usage-view'
-import CreditUsageLoading from '@/app/workspace/[workspaceId]/settings/billing/credit-usage/loading'
+import { CreditUsageLoading } from '@/app/workspace/[workspaceId]/settings/billing/credit-usage/loading'
 
 export const metadata: Metadata = {
   title: 'Credit usage - Account settings',
@@ -20,7 +20,7 @@ export default async function AccountCreditUsagePage() {
   if (isEnterprise(subscription?.plan)) redirect(getAccountSettingsHref('billing'))
 
   return (
-    <Suspense fallback={<CreditUsageLoading />}>
+    <Suspense fallback={<CreditUsageLoading backHref={getAccountSettingsHref('billing')} />}>
       <CreditUsageView />
     </Suspense>
   )

apps/sim/app/workspace/[workspaceId]/settings/billing/credit-usage/loading.tsx

@@ -4,25 +4,33 @@ import { ArrowLeft } from '@sim/emcn/icons'
 import { useParams, useRouter } from 'next/navigation'
 import { SettingsPanel } from '@/app/workspace/[workspaceId]/settings/components/settings-panel'
 
+interface CreditUsageLoadingProps {
+  backHref: string
+}
+
 /**
- * Route-level loading fallback (Next.js convention) and the `Suspense`
- * fallback in `page.tsx` — `CreditUsageView` reads `useSearchParams` via
- * nuqs, so it must suspend behind a boundary. Rendering the real chrome
- * here means a suspend never flashes a blank frame.
+ * Shared credit-usage loading chrome with an explicit navigation destination.
  */
-export default function CreditUsageLoading() {
+export function CreditUsageLoading({ backHref }: CreditUsageLoadingProps) {
   const router = useRouter()
-  const { workspaceId } = useParams<{ workspaceId: string }>()
 
   return (
     <SettingsPanel
       back={{
         text: 'Billing',
         icon: ArrowLeft,
-        onSelect: () => router.push(`/workspace/${workspaceId}/settings/billing`),
+        onSelect: () => router.push(backHref),
       }}
       title='Credit usage'
       description='Every credit-consuming event behind your usage.'
     />
   )
 }
+
+/**
+ * Workspace route-level loading fallback used by Next.js and `page.tsx`.
+ */
+export default function WorkspaceCreditUsageLoading() {
+  const { workspaceId } = useParams<{ workspaceId: string }>()
+  return <CreditUsageLoading backHref={`/workspace/${workspaceId}/settings/billing`} />
+}