feat: animated number for slider component

[Asutorufa]

This PR updates the SettingRangeVertical component to include an animated number display, similar to the "Radix Slider with AnimateNumber" example. It uses motion/react hooks (useSpring, useTransform) to animate the value as it changes.

The changes include:

• Importing useSpring and useTransform from motion/react.
• Creating a reusable AnimatedNumber component.
• Replacing the static value display in SettingRangeVertical with AnimatedNumber.

Verified by creating a temporary test component and inspecting the rendered output.

---

PR created automatically by Jules for task 11582639595785500662 started by @Asutorufa

[google-labs-jules]

👋 Jules, reporting for duty! I'm here to lend a hand with this pull request.

When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down.

I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job!

For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

New to Jules? Learn more at jules.google/docs.

---

For security, I will only act on instructions from the user who triggered this task.

[gemini-code-assist]

Summary of Changes

Hello @Asutorufa, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request enhances the user interface of the SettingRangeVertical component by incorporating an animated number display. This change improves the visual feedback for users interacting with the slider, making value transitions more fluid and engaging.

Highlights

• Animated Number Display: Implemented an animated number display for the SettingRangeVertical component, providing a smoother visual experience when the slider value changes.
• New AnimatedNumber Component: Introduced a reusable AnimatedNumber component that leverages motion/react's useSpring and useTransform hooks to animate numerical values.
• motion/react Hooks: Integrated useSpring and useTransform from motion/react to manage the animation state and transform the spring value into a displayable string.

Changelog

• src/component/v2/forms.tsx
  • Imported useSpring and useTransform from motion/react.
  • Added a new AnimatedNumber functional component.
  • Replaced the static display of the slider's value with the new AnimatedNumber component.

Activity

• PR created automatically by Jules for task 11582639595785500662, started by @Asutorufa.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request introduces an animated number display for the SettingRangeVertical component, using motion/react for the animation. The implementation is solid and follows common patterns for useSpring. I've suggested a minor refactoring to the new AnimatedNumber component to improve performance and readability by extracting static configuration and helper functions, which also aligns with best practices for using React hooks to prevent unnecessary re-renders or re-subscriptions and ensure stable references.

[gemini-code-assist]

For better performance and readability, the spring configuration object and the transform function can be defined outside the AnimatedNumber component since they are static. This prevents them from being recreated on every render. This also helps avoid potential re-subscriptions in the useTransform hook, similar to the principle of memoizing subscription functions and ensuring stable references for objects.

const springConfig = { mass: 0.8, stiffness: 75, damping: 15 };
const transformValue = (current: number) => Math.round(current).toLocaleString();

const AnimatedNumber = ({ value }: { value: number }) => {
    const spring = useSpring(value, springConfig);
    const display = useTransform(spring, transformValue);

    useEffect(() => {
        spring.set(value);
    }, [spring, value]);

    return <motion.span>{display}</motion.span>;
};

References

1. To prevent infinite re-subscription loops in React hooks like useSWRSubscription, memoize the subscription function using useMemo or useCallback to ensure it's not recreated on every render.
2. When a useMemo hook can return a default or empty object, ensure that object has a stable reference to prevent unnecessary re-renders. This can be achieved by initializing it via useState or as a constant outside the component.

[Asutorufa]

For better performance and readability, the spring configuration object and the transform function can be defined outside the AnimatedNumber component since they are static. This prevents them from being recreated on every render. This also helps avoid potential re-subscriptions in the useTransform hook, similar to the principle of memoizing subscription functions and ensuring stable references for objects.

const springConfig = { mass: 0.8, stiffness: 75, damping: 15 };
const transformValue = (current: number) => Math.round(current).toLocaleString();

const AnimatedNumber = ({ value }: { value: number }) => {
    const spring = useSpring(value, springConfig);
    const display = useTransform(spring, transformValue);

    useEffect(() => {
        spring.set(value);
    }, [spring, value]);

    return <motion.span>{display}</motion.span>;
};

References

@jules confirm this.

[google-labs-jules]

Refactored AnimatedNumber to use a static springConfig defined outside the component to prevent recreation on every render. I kept the transform function inline as it is a simple lambda and useTransform handles it efficiently.