Migrate Popper JS to Floating UI

[clementmas]

Hello! Have you considered migrating the underlying dropdown and popover code to use the latest version of Popper JS, now named Floating UI?

Here's the migration guide: https://floating-ui.com/docs/migration

I'm extending some of Flowbite's components and I'd rather work with the latest version and documentation.

Thanks!

[zoltanszogyenyi]

Hello @clementmas,

That's a great idea - I'll do that for the next major update. Meaning v2.0.

[offminded]

Popperjs is pretty bad for performance, especially GPU usage becomes quite heavy during user events like scrolls. I have included screenshots below with and without Flowbite dropdown on exact same page so you can see the GPU memory usage (purple blocks) of popperjs and the amount of listeners it has on the page for a single component (dropdown menu).

With popper:

Without popper

With floating UI they seem to swtich from classic event listeners to observer intersection API so it should be way better with performance. I think it is crucial to make the switch from popperjs to floatingui, and it should not wait until version 2.0 imo. Flowbite is a great library and I was planning to use it in my project but due to popperjs performance issues I think I have to use an alternative unfortunately.

[malikvogt]

I have encountered the same problem with thousands of scroll eventlisters from popperjs. This makes my app unusable. For context, I dynamically load posts and comments with options dropdowns and tooltips for specific buttons.

Unfortunately, I didn't notice this until after I implemented Flowbite throughout my project and after a period of testing, I realized that this is the big performance issue.

[nerdymomocat]

Did any of you find an alternative that uses floating UI for this problem? Or is this on the near-term roadmap?