Fix dots size

Author: jpggvilaca

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

@@ -1,7 +1,7 @@
 // Copyright (C) 2022-2025 Intel Corporation
 // LIMITED EDGE SOFTWARE DISTRIBUTION LICENSE
 
-import { motion } from 'framer-motion';
+import { motion, Variants } from 'framer-motion';
 
 import { ColorMode } from '../quiet-button/quiet-action-button.component';
 
@@ -19,9 +19,9 @@ const DOT_COLORS: Record<ColorMode, string> = {
     [ColorMode.BLUE]: 'var(--spectrum-global-color-gray-800)',
 };
 
-const DOT_SIZES: Record<Sizes, number> = {
-    S: 8,
-    M: 16,
+const DOT_SIZES: Record<Sizes, string> = {
+    S: 'var(--spectrum-global-dimension-size-25)',
+    M: 'var(--spectrum-global-dimension-size-50)',
 };
 
 export const ThreeDotsFlashing = ({
@@ -32,15 +32,16 @@ export const ThreeDotsFlashing = ({
     const dotColor = DOT_COLORS[mode];
     const dotSize = DOT_SIZES[size];
 
-    const dotVariants = {
-        pulse: {
-            scale: [1, 1.5, 1],
+    const dotVariants: Variants = {
+        pulse: (i: number) => ({
+            scale: [1, 1.4, 1],
             transition: {
-                duration: 1.2,
+                duration: 1.1,
                 repeat: Infinity,
                 ease: 'easeInOut',
+                delay: i * 0.2,
             },
-        },
+        }),
     };
 
     return (
@@ -52,9 +53,9 @@ export const ThreeDotsFlashing = ({
             {[0, 1, 2].map((i) => (
                 <motion.div
                     key={i}
+                    custom={i}
                     variants={dotVariants}
                     animate='pulse'
-                    transition={{ delay: i * 0.2 }}
                     style={{
                         width: dotSize,
                         height: dotSize,