@hig/progress-ring - npm Package Compare versions

Comparing version 2.2.1 to 2.2.2

build/index.es.js

@@ -67,2 +67,3 @@ import React, { useState, useRef, useEffect } from 'react';
   const containerRef = useRef(null);
+  const animationFrameIdRef = useRef(null);
   let value = 0;
@@ -76,5 +77,8 @@ let prevTimestamp = 0;
   const wait = () => {
-    prevTimestamp = window.performance.now(); // eslint-disable-next-line no-use-before-define
+    prevTimestamp = window.performance.now();
 
-    window.requestAnimationFrame(step);
+    if (!animationFrameIdRef.current) {
+      // eslint-disable-next-line no-use-before-define
+      animationFrameIdRef.current = window.requestAnimationFrame(step);
+    }
   };
@@ -137,8 +141,13 @@
     prevTimestamp = timestamp;
-    value = interrumValue; // eslint-disable-next-line no-use-before-define
+    value = interrumValue;
 
-    window.requestAnimationFrame(step);
+    if (!animationFrameIdRef.current) {
+      // eslint-disable-next-line no-use-before-define
+      animationFrameIdRef.current = window.requestAnimationFrame(step);
+    }
   };
 
   const step = timestamp => {
+    animationFrameIdRef.current = undefined;
+
     if (cssTransitionState === "entering" || cssTransitionState === "exiting") {
@@ -175,3 +184,3 @@ wait();
 
-    window.requestAnimationFrame(step);
+    animationFrameIdRef.current = window.requestAnimationFrame(step);
   };
@@ -212,2 +221,8 @@
   });
+  useEffect(() => () => {
+    if (animationFrameIdRef.current) {
+      window.cancelAnimationFrame(animationFrameIdRef.current);
+      animationFrameIdRef.current = undefined;
+    }
+  }, []);
   return /*#__PURE__*/React.createElement(CSSTransition, {
@@ -276,2 +291,3 @@ in: transitionEnter,
   const containerRef = useRef(null);
+  const animationFrameIdRef = useRef(null);
   let startTime;
@@ -317,2 +333,4 @@ let segments;
   const step = timestamp => {
+    animationFrameIdRef.current = undefined;
+
     if (!playing) {
@@ -322,4 +340,4 @@ return;
 
-    if (cssTransitionState !== "entered") {
-      window.requestAnimationFrame(step);
+    if (cssTransitionState !== "entered" && !animationFrameIdRef.current) {
+      animationFrameIdRef.current = window.requestAnimationFrame(step);
       return;
@@ -332,3 +350,6 @@ }
     setSegmentOpacities(elapsedThisCycle);
-    window.requestAnimationFrame(step);
+
+    if (!animationFrameIdRef.current) {
+      animationFrameIdRef.current = window.requestAnimationFrame(step);
+    }
   };
@@ -339,3 +360,6 @@
     startTime = undefined;
-    window.requestAnimationFrame(step);
+
+    if (!animationFrameIdRef.current) {
+      animationFrameIdRef.current = window.requestAnimationFrame(step);
+    }
   };
@@ -364,2 +388,8 @@
   });
+  useEffect(() => () => {
+    if (animationFrameIdRef.current) {
+      window.cancelAnimationFrame(animationFrameIdRef.current);
+      animationFrameIdRef.current = undefined;
+    }
+  }, []);
   return /*#__PURE__*/React.createElement(CSSTransition, {
@@ -366,0 +396,0 @@ in: true,

build/index.js

@@ -77,2 +77,3 @@ 'use strict';
   const containerRef = React.useRef(null);
+  const animationFrameIdRef = React.useRef(null);
   let value = 0;
@@ -86,5 +87,8 @@ let prevTimestamp = 0;
   const wait = () => {
-    prevTimestamp = window.performance.now(); // eslint-disable-next-line no-use-before-define
+    prevTimestamp = window.performance.now();
 
-    window.requestAnimationFrame(step);
+    if (!animationFrameIdRef.current) {
+      // eslint-disable-next-line no-use-before-define
+      animationFrameIdRef.current = window.requestAnimationFrame(step);
+    }
   };
@@ -147,8 +151,13 @@
     prevTimestamp = timestamp;
-    value = interrumValue; // eslint-disable-next-line no-use-before-define
+    value = interrumValue;
 
-    window.requestAnimationFrame(step);
+    if (!animationFrameIdRef.current) {
+      // eslint-disable-next-line no-use-before-define
+      animationFrameIdRef.current = window.requestAnimationFrame(step);
+    }
   };
 
   const step = timestamp => {
+    animationFrameIdRef.current = undefined;
+
     if (cssTransitionState === "entering" || cssTransitionState === "exiting") {
@@ -185,3 +194,3 @@ wait();
 
-    window.requestAnimationFrame(step);
+    animationFrameIdRef.current = window.requestAnimationFrame(step);
   };
@@ -222,2 +231,8 @@
   });
+  React.useEffect(() => () => {
+    if (animationFrameIdRef.current) {
+      window.cancelAnimationFrame(animationFrameIdRef.current);
+      animationFrameIdRef.current = undefined;
+    }
+  }, []);
   return /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.CSSTransition, {
@@ -286,2 +301,3 @@ in: transitionEnter,
   const containerRef = React.useRef(null);
+  const animationFrameIdRef = React.useRef(null);
   let startTime;
@@ -327,2 +343,4 @@ let segments;
   const step = timestamp => {
+    animationFrameIdRef.current = undefined;
+
     if (!playing) {
@@ -332,4 +350,4 @@ return;
 
-    if (cssTransitionState !== "entered") {
-      window.requestAnimationFrame(step);
+    if (cssTransitionState !== "entered" && !animationFrameIdRef.current) {
+      animationFrameIdRef.current = window.requestAnimationFrame(step);
       return;
@@ -342,3 +360,6 @@ }
     setSegmentOpacities(elapsedThisCycle);
-    window.requestAnimationFrame(step);
+
+    if (!animationFrameIdRef.current) {
+      animationFrameIdRef.current = window.requestAnimationFrame(step);
+    }
   };
@@ -349,3 +370,6 @@
     startTime = undefined;
-    window.requestAnimationFrame(step);
+
+    if (!animationFrameIdRef.current) {
+      animationFrameIdRef.current = window.requestAnimationFrame(step);
+    }
   };
@@ -374,2 +398,8 @@
   });
+  React.useEffect(() => () => {
+    if (animationFrameIdRef.current) {
+      window.cancelAnimationFrame(animationFrameIdRef.current);
+      animationFrameIdRef.current = undefined;
+    }
+  }, []);
   return /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.CSSTransition, {
@@ -376,0 +406,0 @@ in: true,

CHANGELOG.md

@@ -0,1 +1,9 @@
+# [@hig/progress-ring-v2.2.2](https://github.com/Autodesk/hig/compare/@hig/progress-ring@2.2.1...@hig/progress-ring@2.2.2) (2022-11-23)
+
+
+### Bug Fixes
+
+* utilize cancelAnimationFrame API properly remove requestAnimationFrame listener on Determinate behavior ([8cdb6e0](https://github.com/Autodesk/hig/commit/8cdb6e0))
+* utilize cancelAnimationFrame API properly remove requestAnimationFrame listener on Indeterminate behavior ([a5790bd](https://github.com/Autodesk/hig/commit/a5790bd))
+
 # [@hig/progress-ring-v2.2.1](https://github.com/Autodesk/hig/compare/@hig/progress-ring@2.2.0...@hig/progress-ring@2.2.1) (2022-08-23)
@@ -2,0 +10,0 @@

package.json

 {
   "name": "@hig/progress-ring",
-  "version": "2.2.1",
+  "version": "2.2.2",
   "description": "HIG Progress Ring",
@@ -26,3 +26,3 @@ "author": "Autodesk Inc.",
     "@hig/theme-context": "^4.0.0",
-    "@hig/theme-data": "^3.1.0",
+    "@hig/theme-data": "^3.4.2",
     "react": "^17.0.0"
@@ -29,0 +29,0 @@ },

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

69993

increased by3.67%

Lines of code

2212

increased by2.41%

No dependency changes