diff --git a/src/app/common/icons/icons.tsx b/src/app/common/icons/icons.tsx index 1cfb518c..5575d318 100644 --- a/src/app/common/icons/icons.tsx +++ b/src/app/common/icons/icons.tsx @@ -2,17 +2,19 @@ import React from "react"; import { StatusIndicatorLevel } from "../../../types/types"; import cn from "classnames"; import { ReactComponent as SpinnerIndicator } from "../../assets/icons/spinner-indicator.svg"; +import { boundMethod } from "autobind-decorator"; interface PositionalIconProps { children?: React.ReactNode; className?: string; onClick?: React.MouseEventHandler; + divRef?: React.RefObject; } export class FrontIcon extends React.Component { render() { return ( -
+
{this.props.children}
); @@ -22,7 +24,11 @@ export class FrontIcon extends React.Component { export class CenteredIcon extends React.Component { render() { return ( -
+
{this.props.children}
); @@ -50,6 +56,66 @@ interface StatusIndicatorProps { } export class StatusIndicator extends React.Component { + iconRef: React.RefObject = React.createRef(); + listenerAdded: boolean = false; + + componentDidMount() { + this.syncSpinner(); + } + + componentDidUpdate() { + this.syncSpinner(); + } + + componentWillUnmount(): void { + if (this.iconRef.current != null && this.listenerAdded) { + const elem = this.iconRef.current; + const svgElem = elem.querySelector("svg"); + if (svgElem != null) { + svgElem.removeEventListener("animationstart", this.handleAnimationStart); + } + } + } + + @boundMethod + handleAnimationStart(e: AnimationEvent) { + if (this.iconRef.current == null) { + return; + } + const svgElem = this.iconRef.current.querySelector("svg"); + if (svgElem == null) { + return; + } + const animArr = svgElem.getAnimations(); + if (animArr == null || animArr.length == 0) { + return; + } + animArr[0].startTime = 0; + } + + syncSpinner() { + if (!this.props.runningCommands) { + return; + } + if (this.iconRef.current == null) { + return; + } + const elem = this.iconRef.current; + const svgElem = elem.querySelector("svg"); + if (svgElem == null) { + return; + } + if (!this.listenerAdded) { + svgElem.addEventListener("animationstart", this.handleAnimationStart); + this.listenerAdded = true; + } + const animArr = svgElem.getAnimations(); + if (animArr == null || animArr.length == 0) { + return; + } + animArr[0].startTime = 0; + } + render() { const { level, className, runningCommands } = this.props; let statusIndicator = null; @@ -67,7 +133,7 @@ export class StatusIndicator extends React.Component { break; } statusIndicator = ( - + );