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

perf(tooltip): use explicit event listeners #1733

Merged

Conversation

wescopeland
Copy link
Member

@wescopeland wescopeland commented Aug 10, 2023

This PR resolves a UI deadlock on the homepage for any browser that does not support requestIdleCallback(). Currently on these browsers, such as iOS Safari, the home page freezes for a few seconds before the user is able to do anything.

Root Cause
The Active Players widget has 2 tooltipped elements for every row on the table. Tooltipped elements are manually attaching event listeners right now when they're added to the DOM. Because this is happening thousands of times on the home page, it's causing the page to freeze until the work is done.

Resolution
The tooltip code has been refactored to a formal Alpine.js component. Tooltip consumers are now responsible for manually attaching their required event listeners.

There are some other cleanup tasks I took care of while finishing this work:

  • All Alpine.js components in resources/js are now suffixed with the word "component".
  • All the tooltip code has been moved from resources/js/tooltip to resources/alpine/tooltipComponent.

@wescopeland wescopeland requested a review from a team August 10, 2023 12:04
@luchaos luchaos merged commit 762892a into RetroAchievements:master Aug 10, 2023
5 checks passed
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