fix(perf): pause animations when not displayed (#1323)

* fix(perf): pause animations when not displayed

Safari still calculates rendering for animations that are set with animateTransform, even if they aren't being displayed (svg or parent is `hidden`). This causes performance issues on older devices.

We work around this by manually pausing or unpausing the svg depending on whether it's displayed.

https://bugs.webkit.org/show_bug.cgi?id=298217
closes #1322

* condition

* safer

Author: Haroenv

packages/autocomplete-js/src/render.tsx

@@ -57,6 +57,8 @@ export function renderSearchBox<TItem extends BaseItem>({
   );
   setProperties(dom.label, { hidden: state.status === 'stalled' });
   setProperties(dom.loadingIndicator, { hidden: state.status !== 'stalled' });
+  toggleAnimation(dom.loadingIndicator, state.status === 'stalled');
+
   setProperties(dom.clearButton, { hidden: !state.query });
   setProperties(dom.detachedSearchButtonQuery, {
     textContent: state.query,
@@ -66,6 +68,30 @@ export function renderSearchBox<TItem extends BaseItem>({
   });
 }
 
+// Safari will animate the SVG even when it's hidden. We need to pause the
+// animation manually. See:
+// - https://github.com/algolia/autocomplete/issues/1322
+// - https://bugs.webkit.org/show_bug.cgi?id=298217
+function toggleAnimation(element: HTMLElement, isActive: boolean) {
+  const svgElement =
+    element.firstChild?.nodeName === 'svg'
+      ? (element.firstChild as SVGSVGElement)
+      : null;
+  if (
+    !svgElement ||
+    !svgElement.pauseAnimations ||
+    !svgElement.unpauseAnimations
+  ) {
+    return;
+  }
+
+  if (isActive) {
+    svgElement.unpauseAnimations();
+  } else {
+    svgElement.pauseAnimations();
+  }
+}
+
 export function renderPanel<TItem extends BaseItem>(
   render: AutocompleteRender<TItem>,
   {