Replace three-dots-flashing custom implementation with framer-motion

Author: jpggvilaca

web_ui/src/shared/components/three-dots-flashing/three-dots-flashing.component.tsx

@@ -1,14 +1,10 @@
 // Copyright (C) 2022-2025 Intel Corporation
 // LIMITED EDGE SOFTWARE DISTRIBUTION LICENSE
 
-import { CSSProperties } from 'react';
-
-import clsx from 'clsx';
+import { motion } from 'framer-motion';
 
 import { ColorMode } from '../quiet-button/quiet-action-button.component';
 
-import classes from './three-dots-flashing.component.module.scss';
-
 type Sizes = 'S' | 'M';
 
 interface ThreeDotsFlashingProps {
@@ -17,40 +13,57 @@ interface ThreeDotsFlashingProps {
     className?: string;
 }
 
+const DOT_COLORS: Record<ColorMode, string> = {
+    [ColorMode.DARK]: 'var(--spectrum-global-color-gray-800)',
+    [ColorMode.LIGHT]: 'var(--spectrum-global-color-gray-50)',
+    [ColorMode.BLUE]: 'var(--spectrum-global-color-gray-800)',
+};
+
+const DOT_SIZES: Record<Sizes, number> = {
+    S: 8,
+    M: 16,
+};
+
 export const ThreeDotsFlashing = ({
     mode = ColorMode.DARK,
     size = 'M',
     className,
 }: ThreeDotsFlashingProps): JSX.Element => {
-    const colors: Record<ColorMode, CSSProperties> = {
-        [ColorMode.DARK]: {
-            '--bgColorStartAnimation': 'var(--spectrum-global-color-gray-800)',
-            '--bgColorEndAnimation': 'var(--white-down)',
-        } as CSSProperties,
-        [ColorMode.LIGHT]: {
-            '--bgColorStartAnimation': 'var(--spectrum-global-color-gray-50)',
-            '--bgColorEndAnimation': 'var(--dark-down)',
-        } as CSSProperties,
-        [ColorMode.BLUE]: {
-            '--bgColorStartAnimation': 'var(--spectrum-global-color-gray-800)',
-            '--bgColorEndAnimation': 'var(--white-down)',
-        } as CSSProperties,
-    };
+    const dotColor = DOT_COLORS[mode];
+    const dotSize = DOT_SIZES[size];
 
-    const sizes: Record<Sizes, CSSProperties> = {
-        S: {
-            '--dotSize': 'var(--spectrum-global-dimension-size-25)',
-        } as CSSProperties,
-        M: {
-            '--dotSize': 'var(--spectrum-global-dimension-size-50)',
-        } as CSSProperties,
+    const dotVariants = {
+        pulse: {
+            scale: [1, 1.5, 1],
+            transition: {
+                duration: 1.2,
+                repeat: Infinity,
+                ease: 'easeInOut',
+            },
+        },
     };
 
     return (
         <div
-            style={{ ...colors[mode], ...sizes[size] }}
-            className={clsx(classes.flashingAnimation, className)}
-            aria-label={'three dots flashing animation'}
-        ></div>
+            style={{ display: 'flex', gap: dotSize, alignItems: 'center', justifyContent: 'center' }}
+            aria-label='three dots flashing animation'
+            className={className}
+        >
+            {[0, 1, 2].map((i) => (
+                <motion.div
+                    key={i}
+                    variants={dotVariants}
+                    animate='pulse'
+                    transition={{ delay: i * 0.2 }}
+                    style={{
+                        width: dotSize,
+                        height: dotSize,
+                        borderRadius: '50%',
+                        background: dotColor,
+                        willChange: 'transform',
+                    }}
+                />
+            ))}
+        </div>
     );
 };