bug: Performance lag when switching tabs containing ApexCharts

[areski]

What version of FlyonUI are you using?

v2.4.1

Which browsers are you seeing the problem on?

Chrome

Reproduction URL

https://flyonui.com/docs/navigations/tabs-pills/

Describe your issue

When using FlyonUI tabs with charts (eg ApexCharts), switching between tabs causes significant lag, with high INP (Interaction to Next Paint) times in Chrome. This happens because of how FlyonUI hides inactive tabs (likely via display: none).

ApexCharts renders charts in SVG and requires knowledge of the container size at render time.

When the container is hidden (display: none), it has zero dimensions, so ApexCharts must reflow and redraw the chart when the tab becomes active.

Idea to fix:
Change tab implementation to use visibility: hidden instead of display: none for inactive tabs.

[github-actions]

Hi @areski

Thank you for your support in helping us improve FlyonUI!

We’ve received your submission and will respond within few business days. Our team handles issues one at a time, and we’ll be reviewing yours as soon as possible.

In the meantime, any additional details or a reproducible example would be greatly appreciated and will help us resolve the issue more efficiently.

Thank you for your patience and understanding!

[PruthviPraj00]

Hello @areski,

Thank you for your assistance. We will share this with the team for review.