feat(frontend): migrate component to React Server Components for KYC …

[emmanuelStack654]

…Submission Form

closes #1160

Migrates the KYC Submission Form feature tree to the React Server Components architecture. All static content (page heading, description, why-KYC aside) is now fully server-rendered with zero client JavaScript. The interactive multi-step form is pushed down to a single "use client" leaf, lazy-loaded behind a boundary that streams a shimmer skeleton immediately while the client bundle loads.

Changes
Modified files

src/app/(authenticated)/kyc/page.tsx — converted to pure async RSC with i18n-aware generateMetadata.

KycPageContent.tsx
— dropped "use client", replaced useTranslations with getTranslations, static content now server-rendered HTML.

KycSubmissionForm.tsx
— tightened client boundary, exports KycInitialValues type, accepts initialValues prop for server-driven pre-population.
New files

KycFormShell.tsx
— RSC wrapper that owns the boundary and the dynamic() import of the client form.

KycFormSkeleton.tsx
— server-safe shimmer skeleton used as the Suspense fallback.
Architecture
Rendering tree after migration

KycPage (RSC, async — zero client JS)
└── KycPageContent (RSC, async — zero client JS)
├──

(server-rendered HTML)
├── KycFormShell (RSC, async — owns Suspense boundary)
│ └── <Suspense fallback={}>
│ └── KycSubmissionForm ("use client" leaf — lazy, ssr:false)
└── (server-rendered HTML)
Before: The entire page — heading, description, why-KYC list, and form — was a single "use client" component hydrated on the client.

After: Only KycSubmissionForm ships as client JavaScript. Everything else is static HTML from the server.

Detail per file

page.tsx

Replaced static export const metadata with async generateMetadata() that calls getTranslations("kycPage").
Page title and OG description are now resolved from the active locale on the server — no hardcoded English strings, no client round-trip.
KycPageContent.tsx

Removed "use client" directive entirely.
useTranslations (client hook) replaced with getTranslations (server utility).

and are plain server-rendered HTML — zero hydration cost. gains aria-labelledby for a proper landmark. Delegates the interactive area to . KycFormShell.tsx

Pure async RSC — no hooks, no client APIs.
Uses dynamic(() => import("KycSubmissionForm"), { ssr: false }) so the form bundle is never executed during SSR.
Wraps the import in <Suspense fallback={}> — static shell streams before the JS arrives.
Resolves formTitle via getTranslations server-side and passes it as data-form-title to avoid hydration mismatches.
Accepts initialValues?: KycInitialValues so a parent RSC can pre-populate form fields from a server session without a client round-trip.
KycFormSkeleton.tsx

No "use client", no hooks, no framer-motion — safe to render anywhere on the server.
Uses kyc-shimmer CSS utility (defined in globals.css) for the animated shimmer effect.
Layout mirrors the real form (progress dots, 2-column name fields, full-width fields, button row) to minimise cumulative layout shift on hydration.
role="status" + aria-busy="true" so screen readers announce the loading state immediately.
Shimmer disabled under prefers-reduced-motion: reduce via the existing CSS rule.
KycSubmissionForm.tsx

Remains the single "use client" file in the KYC tree.
Exports KycInitialValues — a serialisable type (no File objects) safe to pass across the RSC/client boundary.
Accepts initialValues?: KycInitialValues and deep-merges it with initialKycFlowState at mount — enables server-driven field pre-population (e.g. from a user session or a resumed draft).

[vercel]

@emmanuelStack654 is attempting to deploy a commit to the Emmanuel's projects Team on Vercel.

A member of the Team first needs to authorize it.

[drips-wave]

@emmanuelStack654 Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits