fix(emcn): drive the loader spin period from a CSS variable instead of an inline style

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-registry/browser-tab-icon.tsx

@@ -74,9 +74,8 @@ export function BrowserTabIcon({ tabId, scopeId, className }: BrowserTabIconProp
           {showSpinner ? (
             <Loader
               animate
-              className='size-[14px] text-[var(--text-icon)]'
+              className='size-[14px] text-[var(--text-icon)] [--loader-duration:650ms]'
               strokeWidth={2}
-              style={{ animationDuration: '650ms' }}
             />
           ) : !faviconLoaded || faviconFailed ? (
             <Globe className='size-[12px] text-[var(--text-icon)]' />

packages/emcn/src/icons/animate/loader.module.css

@@ -2,6 +2,9 @@
  * Loader icon animation
  * Continuous spinning animation for loading states
  * Uses GPU acceleration for smooth performance
+ * The period is read from `--loader-duration` so a consumer can set it from a
+ * utility class (`[--loader-duration:650ms]`); the module's own `animation`
+ * shorthand is unlayered and would otherwise beat any Tailwind override.
  */
 
 @keyframes spin {
@@ -14,7 +17,7 @@
 }
 
 .animated-loader-svg {
-  animation: spin 1s linear infinite;
+  animation: spin var(--loader-duration, 1s) linear infinite;
   transform-origin: center center;
   will-change: transform;
 }

packages/emcn/src/icons/loader.tsx

@@ -14,7 +14,9 @@ export interface LoaderProps extends SVGProps<SVGSVGElement> {
  * Loader icon component with optional CSS-based spinning animation
  * Based on refresh-cw but without the arrows, just the circular arcs.
  * When animate is false, this is a lightweight static icon with no animation overhead.
- * When animate is true, CSS module animations are applied for continuous spin.
+ * When animate is true, CSS module animations are applied for continuous spin;
+ * the period defaults to 1s and follows `--loader-duration` when a consumer sets it
+ * (for example `className='[--loader-duration:650ms]'`).
  * @param props - SVG properties including className, animate, etc.
  */
 export function Loader({ animate = false, className, ...props }: LoaderProps) {