fix: Theme selection event listeners

[arkirchner]

The migration event needs to be used to set the event listeners for the theme select.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 70.08%. Comparing base (ea29353) to head (e93b68b).
⚠️ Report is 11 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #3040   +/-   ##
=======================================
  Coverage   70.08%   70.08%           
=======================================
  Files         215      215           
  Lines        6850     6850           
=======================================
  Hits         4801     4801           
  Misses       2049     2049           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[MrSerth]

@arkirchner I have major concerns with this change. Can you please provide some reasoning why you changed that, which bug you're fixing therewith, and what your long-term strategy is (without using the migration event)?

From my point of view, the event listener is not bound to any Sprockets code; therefore, I don't see any necessity to wait longer for the delayed event. Furthermore, the delayed event will cause some extended, visible "white flashes" when navigating in dark mode.

[kkoehn]

I can't speak for Armin but for me (locally) the appearance selector didn't always work and sometimes needed a reload. I have not seen that (yet?) with this fix. I also have not seen any of the flashes you mentioned in dark mode.

[arkirchner]

Sorry I have overlooked this. I tried the theme change (production and local), and it never worked for me and my coworkers. It worked with the migration event. I did not notice the delay.

I am migrating the Sprockets code here: #3021

[MrSerth]

Thanks for your comments. I've spent some additional time debugging, and it seems like some race condition in the previous version was, indeed, causing the buttons to be non-functional. Sorry for that, my fault.

Since the code has been moved to webpack already, I think the event can be changed back to turbo:load, and this seems to work constantly in my testing.

The flashing might be visible when changing from one page to another, when the included packs change. For example, when navigating from /exercises to /exercises/1 (because we add the highlight.js bundle to the Exercise#show action). In my experience and my measurements, the flashing is extended when waiting for the turbo-migration:load rather than the turbo:load.

Long story short: Since the code has been moved to webpack, can we go back to turbo:load today?

[arkirchner]

Long story short: Since the code has been moved to webpack, can we go back to turbo:load today?

I tried, but I got an error. Now that the file is moved it will execute (some times) before base js is present. I am trying to move base JS as well. Please give me some time to see if there are no other issues when moving base js.

My mistake! Not necessary!

[MrSerth]

Alright, great! Thanks for the new PR 👍