fix: refactor CheckoutReturnPage to use Suspense for loading state and separate content into CheckoutReturnContent component

This commit is contained in:
Usman Baig
2026-02-20 03:47:10 +01:00
parent 0bbbb8a1af
commit 96b3919e52

View File

@@ -6,13 +6,13 @@
* Fetches session status and redirects to dashboard on success. * Fetches session status and redirects to dashboard on success.
*/ */
import { useEffect, useState } from 'react' import { Suspense, useEffect, useState } from 'react'
import { useRouter, useSearchParams } from 'next/navigation' import { useRouter, useSearchParams } from 'next/navigation'
import { getCheckoutSessionStatus } from '@/lib/api/billing' import { getCheckoutSessionStatus } from '@/lib/api/billing'
import { LoadingOverlay } from '@ciphera-net/ui' import { LoadingOverlay } from '@ciphera-net/ui'
import Link from 'next/link' import Link from 'next/link'
export default function CheckoutReturnPage() { function CheckoutReturnContent() {
const router = useRouter() const router = useRouter()
const searchParams = useSearchParams() const searchParams = useSearchParams()
const sessionId = searchParams.get('session_id') const sessionId = searchParams.get('session_id')
@@ -91,3 +91,11 @@ export default function CheckoutReturnPage() {
</div> </div>
) )
} }
export default function CheckoutReturnPage() {
return (
<Suspense fallback={<LoadingOverlay logoSrc="/pulse_icon_no_margins.png" title="Loading…" />}>
<CheckoutReturnContent />
</Suspense>
)
}