Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(ui): introduce number-flow animation library #1324

Open
wants to merge 7 commits into
base: main
Choose a base branch
from

Conversation

peps
Copy link
Collaborator

@peps peps commented Dec 30, 2024

I found this pretty amazing library for animating numbers, better than what we currently have.

https://number-flow.barvian.me/

The goal of this PR is to add the number-flow library and implement it in a few "Low Risk" areas. This will allow us to test how it impacts performance, and if it's performing well we can begin to implement it in other areas of the app.

Right now it's implemented in the following places:

  • Percentage loader on the Setup screen
  • Sidebar Gems counter when logged in
  • SoS widget timer

https://www.loom.com/share/96bdd9253e664385b19e96c526f85eb8?sid=97b5b3c7-23a4-43d9-b4da-a64c7f0da372

A few notes:

  • This component requires the value passed to it to be a number, strings wont work. For something like the big Wallet number, we would need to change the approach to our formatting.
  • This library adds extra padding around the numbers, so we may need to adjust layout spacing when replacing current numbers.

@peps peps self-assigned this Dec 30, 2024
@peps peps marked this pull request as ready for review December 30, 2024 14:23
@peps peps requested a review from brianp December 30, 2024 14:28
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants