fix(FEC-12373): Web][UI][Chrome][Safari] Seek buttons don't spin after clicking on it for the second time

Before 3b22ffc, when with-animation's componentDidMount was called, the child ref was already set, but the change in the timing of setIsLive caused it to now be null at that point, so it's not possible to register an event listener for child events.

To avoid the issue, I've moved with-animation's event handling into animate, where the child ref is already set.

Author: SivanA-Kaltura

src/utils/with-animation.js

@@ -12,36 +12,16 @@ export const withAnimation: Function = (cssClass: string) => (WrappedComponent:
       ref = createRef();
 
       /**
-       * When component is mounted create event manager instance.
-       * @returns {void}
-       *
-       * @memberof AnimationComponent
-       */
-      componentDidMount(): void {
-        if (!this.ref.current) return;
-        this.props.eventManager.listen(this.ref.current, 'animationend', () => {
-          this.ref.current.classList.remove(cssClass);
-        });
-      }
-      /**
-       * Before component is unmounted remove all event manager listeners.
-       * @returns {void}
-       *∏
-       * @memberof AnimationComponent
-       */
-      componentWillUnmount(): void {
-        if (!this.ref.current) return;
-        this.ref.current.classList.remove(cssClass);
-      }
-
-      /**
-       * adds the animation class
+       * add the animation class, then remove it on animation end
        * @returns {void}
        * @memberof AnimationComponent
        */
       animate = (): void => {
         if (!this.ref.current) return;
         this.ref.current.classList.add(cssClass);
+        this.props.eventManager.listenOnce(this.ref.current, 'animationend', () => {
+          this.ref.current.classList.remove(cssClass);
+        });
       };
 
       /**