refactor: streamline hover animation handling and improve performance in icon components

Signed-off-by: Rajesh-Nagarajan-11 <rajeshnagarajan36@gmail.com>

Author: Rajesh-Nagarajan-11

src/icons/Configuration/ConfigurationIcon.tsx

@@ -1,9 +1,7 @@
 import React, { FC } from 'react';
 import { DEFAULT_HEIGHT, DEFAULT_WIDTH } from '../../constants/constants';
 import { IconProps } from '../types';
-import { PathStyle, injectKeyframes } from './style';
-
-injectKeyframes();
+import { PathStyle, keyframesCSS } from './style';
 
 export interface ConfigurationIconProps extends IconProps {
   isHoverEffect?: boolean;
@@ -25,6 +23,7 @@ export const ConfigurationIcon: FC<ConfigurationIconProps> = ({
       className={isHoverEffect ? 'configuration-icon-go' : undefined}
       {...props}
     >
+      {isHoverEffect ? <style>{keyframesCSS}</style> : null}
       <path
         className="configuration-icon-path1"
         style={PathStyle}

src/icons/Configuration/style.ts

@@ -1,7 +1,5 @@
 import React from 'react';
 
-export const StyleID = 'configuration-icon-keyframes';
-
 export const keyframesCSS = `
 @keyframes config-wrench-shake {
   0%   { transform: rotate(-20deg); }
@@ -21,12 +19,3 @@ export const PathStyle: React.CSSProperties = {
   transformBox: 'fill-box',
   transformOrigin: 'center',
 };
-
-export function injectKeyframes(): void {
-  if (typeof document === 'undefined') return;
-  if (document.getElementById(StyleID)) return;
-  const style = document.createElement('style');
-  style.id = StyleID;
-  style.textContent = keyframesCSS;
-  document.head.appendChild(style);
-}

src/icons/Dashboard/useAnimationTrigger.ts

@@ -19,10 +19,14 @@ export function useAnimationTrigger(
     svg.classList.add('dashboard-icon-go');
 
     const lastPath = svg.querySelector('.dashboard-icon-bl');
-    lastPath?.addEventListener(
-      'animationend',
-      () => svg.classList.remove('dashboard-icon-go'),
-      { once: true }
-    );
+    const handleAnimationEnd = () => {
+      svg.classList.remove('dashboard-icon-go');
+    };
+
+    lastPath?.addEventListener('animationend', handleAnimationEnd, { once: true });
+
+    return () => {
+      lastPath?.removeEventListener('animationend', handleAnimationEnd);
+    };
   }, [isHoverEffect, svgRef]);
 }

src/icons/Performance/useNeedleSpring.ts

@@ -44,18 +44,25 @@ export function useNeedleSpring(
     s.current = { cur: ROT_ZERO, vel: 0 };
     set(ROT_ZERO);
 
-    const tick = () => {
+    let lastTime = performance.now();
+
+    const tick = (now: number) => {
+      const dt = Math.min((now - lastTime) / 1000, 0.1);
+      lastTime = now;
       const { cur, vel } = s.current;
-      const v = vel + (-32.5 * (cur - ROT_REST) - 9 * vel) * 0.016;
-      const c = cur + v * 0.016;
+      const v = vel + (-32.5 * (cur - ROT_REST) - 9 * vel) * dt;
+      const c = cur + v * dt;
       s.current = { cur: c, vel: v };
       set(c);
       if (Math.abs(c - ROT_REST) > 0.05 || Math.abs(v) > 0.05)
         raf.current = requestAnimationFrame(tick);
       else { set(ROT_REST); s.current = { cur: ROT_REST, vel: 0 }; raf.current = null; }
     };
 
-    timer.current = setTimeout(() => { raf.current = requestAnimationFrame(tick); }, 60);
+    timer.current = setTimeout(() => {
+      lastTime = performance.now();
+      raf.current = requestAnimationFrame(tick);
+    }, 60);
 
     return () => {
       if (timer.current) {