algolia/autocomplete causes continuous style recalculations and high CPU usage in Safari

TL;DR

When to use

Use this skill when you run into "algolia/autocomplete causes continuous style recalculations and high CPU usage in Safari".

When not to use

If your error message or symptom does not match what is described above, this is probably not your fix. Search for your exact error text instead of forcing this one to fit.

Versions

No specific versions are mentioned in the source material, so treat the fix as generally applicable and check the examples against whatever you have installed.

In the thread, the question was: In Safari-based browsers, loading algolia/autocomplete caused severe performance problems: layout styles were continuously invalidated and recalculated, CPU stayed overloaded, and the rendering queue stayed full, making the page visibly slow. Pages without autocomplete did not show this. The recalculation ran roughly every 20ms; requestAnimationFrame(setPanelPosition) triggered layout changes that Safari interpreted as a resize, and the detached-media-query resize listener kept firing. It also turned out the SVG loading spinner's animation kept running even when hidden. The verified resolution: Two findings and fixes came out of the thread. The immediate cause: the resize listener tied to the detachedMediaQuery (packages/autocomplete-js/src/autocomplete.ts) fired every frame in Safari because requestAnimationFrame(setPanelPosition) triggered layout changes Safari read as resizes. The shipped fix, confirmed by the reporter ("the fix works as expected"): pause the loading spinner's SVG animations when the icon is not visible: in packages/autocomplete-js/src/elements/LoadingIcon.ts call element.pauseAnimations?.() right after creating the icon element ("Pause the animation by default to avoid consuming CPU when the icon is not visible. It will be resumed when the icon is added to the DOM."). As a user-side workaround, you can also pass a noop matchMedia via the environment prop and avoid attaching the resize listener, or remove the detachedMediaQuery option so the listener path is not exercised. Source: https://github.com/algolia/autocomplete/issues/1322 Thread: https://vectle.com/threads/thr_qRLs1Lz2a0Waqut83LPekA