feat(frontend): enhance interactive loading states in KYC Submission Form

[emmanuelStack654]

closes #1161

Adds a comprehensive interactive loading state system to the KYC Submission Form. Every async transition — step navigation, file uploads, and final submission — now gives users immediate visual feedback with shimmer skeletons, animated spinners, progress indicators, and error recovery flows. All states are accessible, dark-mode aware, and respect prefers-reduced-motion.

Changes
New files

None — all changes are enhancements to existing files.
Modified files

globals.css
— 5 new keyframes + utility classes for the loading system.

en.json
/ es.json / pt.json — 19 new kycForm translation keys for all loading states.

kyc-flow.ts
— reducer upgraded with step-level and file-upload loading actions.

KycSubmissionForm.tsx
— full loading state enhancement (see details below).

KycSubmissionForm.test.tsx
— 40+ tests covering all new loading states.
Loading state details
CSS animations (globals.css)

shimmer — sweeping highlight for skeleton bones
kyc-pulse-ring — pulsing ring around the success icon
kyc-step-fill — animated progress bar segment fill
kyc-success-scale — spring-style pop-in for the success checkmark
kyc-bounce-in — entrance animation for banners
All animations disabled under prefers-reduced-motion: reduce
Dark mode overrides on .kyc-shimmer using pluto palette values
Reducer (kyc-flow.ts)

New discriminated type KycStepLoadingState: "idle" | "loading" | "saving" | "error"
New FileUploadStatus per field: state, errorMessage, previewUrl
New actions: STEP_LOADING, STEP_LOADED, STEP_ERROR, RETRY, CLEAR_STEP_ERROR, FILE_UPLOAD_START, FILE_UPLOAD_SUCCESS, FILE_UPLOAD_ERROR, FILE_UPLOAD_RESET
New selectors: selectIsStepLoading, selectIsStepSaving, selectHasStepError, selectIsFileUploading, selectAnyFileUploading
All existing actions, initial state shape, and selectors unchanged
Component (KycSubmissionForm.tsx)

Sub-component Loading state added
StepSkeleton Shimmer bones mirroring form layout — shown for 320ms on every step navigation
ProgressBar Animated fill segments; shimmer overlay on the active segment while loading; inline spinner + loadingStep label
ErrorBanner Slide-in role="alert" banner with retry count, retry button, and dismiss (×) button
FileField 4 states: idle (file input) → uploading (spinner + shimmer progress bar) → success (checkmark + remove) → error (message + retry)
SuccessScreen Spring-scaled icon, animated SVG checkmark path draw, pulse ring, staggered content fade-in
Spinner Reusable animated border spinner used across all loading surfaces
Navigation buttons show translated spinner + loading text while a step transition is in flight. The submit button shows processingSubmission text with a spinner while the API call is pending. Both the next and submit buttons are disabled during file uploads.

Accessibility
StepSkeleton has aria-hidden="true" — AT skips bones entirely
ErrorBanner uses role="alert" + aria-live="assertive" for immediate announcement
File upload state changes announced via the sr-only role="status" region
processingSubmission text surfaced in the sr-only submit-status region during submission
Step loading transitions announced via navigatingTo key in the polite live region
All new interactive elements (retry, dismiss, remove) have descriptive aria-label attributes
prefers-reduced-motion: all CSS animations disabled; framer-motion transitions reduced to simple fades

[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