@algolia/autocomplete-js 1.19.2 → 1.19.4

package/dist/esm/elements/LoadingIcon.js

@@ -6,5 +6,16 @@ export var LoadingIcon = function LoadingIcon(_ref) {
   element.setAttribute('width', '20');
   element.setAttribute('height', '20');
   element.innerHTML = "<circle\n  cx=\"50\"\n  cy=\"50\"\n  fill=\"none\"\n  r=\"35\"\n  stroke=\"currentColor\"\n  stroke-dasharray=\"164.93361431346415 56.97787143782138\"\n  stroke-width=\"6\"\n>\n  <animateTransform\n    attributeName=\"transform\"\n    type=\"rotate\"\n    repeatCount=\"indefinite\"\n    dur=\"1s\"\n    values=\"0 50 50;90 50 50;180 50 50;360 50 50\"\n    keyTimes=\"0;0.40;0.65;1\"\n  />\n</circle>";
+  var pauseAnimations = function pauseAnimations() {
+    // Wait until the element is in the DOM.
+    if (!element.parentElement) {
+      setTimeout(pauseAnimations, 0);
+      return;
+    }
+    element.pauseAnimations();
+  };
+  if ('pauseAnimations' in element) {
+    pauseAnimations();
+  }
   return element;
 };

package/dist/esm/render.js

@@ -32,6 +32,7 @@ export function renderSearchBox(_ref) {
   setProperties(dom.loadingIndicator, {
     hidden: state.status !== 'stalled'
   });
+  toggleAnimation(dom.loadingIndicator, state.status === 'stalled');
   setProperties(dom.clearButton, {
     hidden: !state.query
   });
@@ -42,6 +43,23 @@ export function renderSearchBox(_ref) {
     hidden: Boolean(state.query)
   });
 }
+
+// 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, isActive) {
+  var _element$firstChild;
+  var svgElement = ((_element$firstChild = element.firstChild) === null || _element$firstChild === void 0 ? void 0 : _element$firstChild.nodeName) === 'svg' ? element.firstChild : null;
+  if (!svgElement || !svgElement.pauseAnimations || !svgElement.unpauseAnimations) {
+    return;
+  }
+  if (isActive) {
+    svgElement.unpauseAnimations();
+  } else {
+    svgElement.pauseAnimations();
+  }
+}
 export function renderPanel(render, _ref2) {
   var autocomplete = _ref2.autocomplete,
     autocompleteScopeApi = _ref2.autocompleteScopeApi,

package/dist/umd/index.development.js

@@ -1,4 +1,4 @@
-/*! @algolia/autocomplete-js 1.19.2 | MIT License | © Algolia, Inc. and contributors | https://github.com/algolia/autocomplete */
+/*! @algolia/autocomplete-js 1.19.4 | MIT License | © Algolia, Inc. and contributors | https://github.com/algolia/autocomplete */
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
   typeof define === 'function' && define.amd ? define(['exports'], factory) :
@@ -347,7 +347,7 @@
     return undefined;
   }
 
-  var version = '1.19.2';
+  var version = '1.19.4';
 
   var userAgents$1 = [{
     segment: 'autocomplete-core',
@@ -3841,6 +3841,17 @@
     element.setAttribute('width', '20');
     element.setAttribute('height', '20');
     element.innerHTML = "<circle\n  cx=\"50\"\n  cy=\"50\"\n  fill=\"none\"\n  r=\"35\"\n  stroke=\"currentColor\"\n  stroke-dasharray=\"164.93361431346415 56.97787143782138\"\n  stroke-width=\"6\"\n>\n  <animateTransform\n    attributeName=\"transform\"\n    type=\"rotate\"\n    repeatCount=\"indefinite\"\n    dur=\"1s\"\n    values=\"0 50 50;90 50 50;180 50 50;360 50 50\"\n    keyTimes=\"0;0.40;0.65;1\"\n  />\n</circle>";
+    var pauseAnimations = function pauseAnimations() {
+      // Wait until the element is in the DOM.
+      if (!element.parentElement) {
+        setTimeout(pauseAnimations, 0);
+        return;
+      }
+      element.pauseAnimations();
+    };
+    if ('pauseAnimations' in element) {
+      pauseAnimations();
+    }
     return element;
   };
 
@@ -4887,6 +4898,7 @@
     setProperties(dom.loadingIndicator, {
       hidden: state.status !== 'stalled'
     });
+    toggleAnimation(dom.loadingIndicator, state.status === 'stalled');
     setProperties(dom.clearButton, {
       hidden: !state.query
     });
@@ -4897,6 +4909,23 @@
       hidden: Boolean(state.query)
     });
   }
+
+  // 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, isActive) {
+    var _element$firstChild;
+    var svgElement = ((_element$firstChild = element.firstChild) === null || _element$firstChild === void 0 ? void 0 : _element$firstChild.nodeName) === 'svg' ? element.firstChild : null;
+    if (!svgElement || !svgElement.pauseAnimations || !svgElement.unpauseAnimations) {
+      return;
+    }
+    if (isActive) {
+      svgElement.unpauseAnimations();
+    } else {
+      svgElement.pauseAnimations();
+    }
+  }
   function renderPanel(render, _ref2) {
     var autocomplete = _ref2.autocomplete,
       autocompleteScopeApi = _ref2.autocompleteScopeApi,