Optimize price chart update and resize performance

[josephchimebuka]

Category

performance

Labels

frontend, performance, chart, realtime

Difficulty

advanced

Why this matters

Chart handles realtime updates but can be optimized for smoother rendering on lower-end devices.

Likely files/components affected

• src/components/PriceChart.tsx

What contributor should improve

Reduce expensive recalculations and unnecessary rerenders during incoming data and resize events.

Expected final behavior

Smoother chart interaction and stable rendering under live updates.

UI/UX goals

• High-framerate feel
• Better responsiveness
• Reliable live-data visuals

Acceptance criteria

• Visible jank reduced during updates/resizing
• Data correctness preserved
• Badge/label alignment remains accurate
• No memory leaks from subscriptions/listeners

[sammycee769]

@sammycee769 has applied to work on this issue as part of the Stellar Wave Program's 5th wave.

i would like to work on this

ℹ️ Repo Maintainers: To accept this application, review their application or assign @sammycee769 to this issue.

[centboy123]

@centboy123 has applied to work on this issue as part of the Stellar Wave Program's 5th wave.

I would like to work on this issue because I am passionate about engineering high performance user interfaces and eliminating rendering bottlenecks. Realtime features like price charts require highly optimized data handling, debouncing, or throttling on resize events to avoid unnecessary re renders, and I am eager to bring smooth, fluid performance to the ⁠Xelma Frontend⁠ application.

Relevant Experience:

Performance & System Optimization: Across my software development work, I focus deeply on optimization, efficient state updates, and resource management. I understand how to profile performance lag and refactor heavy components to keep client-side operations fast and responsive.

Structured Frontend & API Integration: I have a strong background in backend systems and integrating APIs securely and efficiently. This gives me a comprehensive understanding of how real time WebSocket or polling data should be ingested and throttled before hit-testing or updating complex canvas/SVG chart elements.

Active Open-Source Contributor:
I am deeply embedded in the Web3 ecosystem and frequently apply for and deliver on technical software development bounties. I write clean, modular code, document my performance optimizations clearly, and ensure my pull requests integrate smoothly with existing testing pipelines.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @centboy123 to this issue.

[jotel-dev]

@jotel-dev has applied to work on this issue as part of the Stellar Wave Program's 5th wave.

Pls assign me

ℹ️ Repo Maintainers: To accept this application, review their application or assign @jotel-dev to this issue.

[Emmanex01]

@Emmanex01 has applied to work on this issue as part of the Stellar Wave Program's 5th wave.

Hello chief, pls can I be assigned to work on this.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Emmanex01 to this issue.

[drips-wave]

Congratulations, @jotel-dev! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on June 2, 2026.

🧑‍💻 @jotel-dev: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are awarded when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊