Make PaymentSuccessAnimation RSC-ready, localized, and lighter - #1270
Merged
Conversation
…d lighter Splits PaymentSuccessAnimation into a server-safe wrapper (PaymentSuccessAnimation.tsx) and the interactive implementation (PaymentSuccessAnimationClient.tsx), so the "use client" boundary sits at the animation itself rather than forcing every importer into client-only code (emdevelopa#1175). Adds PaymentSuccessSkeleton as the next/dynamic loading fallback, replacing the bare Suspense fallback={null} with a real placeholder while the client bundle streams in (emdevelopa#1176). Adds real payment/common translations to en/es/pt messages, replacing the hardcoded English fallback strings the component previously fell back to (emdevelopa#1177). Migrates the animation from framer-motion to the lighter motion/react package and removes the unused confetti and react-confetti dependencies, which were never imported anywhere in the codebase (emdevelopa#1178). Also fixes a real bug found while touching this component: usePrefersReducedMotion computed its initial state via useEffect, so the confetti-trigger effect (which runs in the same mount commit) always saw the stale default before the OS preference loaded, meaning reduced-motion users still got a confetti burst on first render. Switched to a lazy useState initializer that reads matchMedia synchronously. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
|
@Nanle-code is attempting to deploy a commit to the Emmanuel's projects Team on Vercel. A member of the Team first needs to authorize it. |
|
@Nanle-code 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! 🚀 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
PaymentSuccessAnimationinto a server-safe wrapper (no"use client") plus aPaymentSuccessAnimationClientthat holds the interactive animation, loaded vianext/dynamic— Closes [Frontend] Migrate component to React Server Components for Payment Success Animation #1175PaymentSuccessSkeletonloading fallback used while the client bundle streams in, replacing the previous bareSuspense fallback={null}— Closes [Frontend] Enhance interactive loading states in Payment Success Animation #1176payment/commontranslations toen/es/ptmessages, replacing the hardcoded English fallback strings the component fell back to when a translation key was missing — Closes [Frontend] Implement internationalization (i18n) support for Payment Success Animation #1177framer-motionto the lightermotion/reactpackage and removes the unusedconfettiandreact-confettidependencies (neither was imported anywhere in the codebase) — Closes [Frontend] Upgrade dependencies and refactor Payment Success Animation #1178usePrefersReducedMotioncomputed its initial value viauseEffect, so the confetti-trigger effect (which runs in the same mount commit) always saw the stalefalsedefault before the real OS preference loaded — meaning reduced-motion users could still get a confetti burst on first render. Switched to a lazyuseStateinitializer that readsmatchMediasynchronously.Test plan
vitest runonPaymentSuccessAnimation.test.tsx+PaymentSuccessAnimation.wrapper.test.tsx— 34/34 passingtsc --noEmitclean for all touched fileseslintclean for all touched non-test filesonboarding-reducertest, a pre-existingdarkModeThemei18n lookup bug, and unrelated syntax errors inPortfolioChartWidget.tsx)Closes #1175
Closes #1176
Closes #1177
Closes #1178