fix(ui): Replace current spinning webfont icon with svg icons

ui/src/app/applications/components/__snapshots__/utils.test.tsx.snap

@@ -33,19 +33,22 @@ exports[`ComparisonStatusIcon.Synced 1`] = `
 `;
 
 exports[`ComparisonStatusIcon.Unknown 1`] = `
-[
-  <i
-    className="fa fa-circle-notch fa-spin"
-    qe-id="utils-sync-status-title"
-    style={
-      {
-        "color": "#CCD6DD",
-      }
+<svg
+  className="icon spin"
+  qe-id="utils-sync-status-title"
+  style={
+    {
+      "color": "#CCD6DD",
     }
-    title="Unknown"
-  />,
-  " ",
-]
+  }
+  viewBox="0 0 512 512"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M222.7 32.1c5 16.9-4.6 34.8-21.5 39.8C121.8 95.6 64 169.1 64 256c0 106 86 192 192 192s192-86 192-192c0-86.9-57.8-160.4-137.1-184.1c-16.9-5-26.6-22.9-21.5-39.8s22.9-26.6 39.8-21.5C434.9 42.1 512 140 512 256c0 141.4-114.6 256-256 256S0 397.4 0 256C0 140 77.1 42.1 182.9 10.6c16.9-5 34.8 4.6 39.8 21.5z"
+    fill="#CCD6DD"
+  />
+</svg>
 `;
 
 exports[`HealthStatusIcon.Degraded 1`] = `
@@ -88,16 +91,22 @@ exports[`HealthStatusIcon.Missing 1`] = `
 `;
 
 exports[`HealthStatusIcon.Progressing 1`] = `
-<i
-  className="fa fa fa-circle-notch fa-spin utils-health-status-icon"
+<svg
+  className="icon spin"
   qe-id="utils-health-status-title"
   style={
     {
       "color": "#0DADEA",
     }
   }
-  title="Progressing"
-/>
+  viewBox="0 0 512 512"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M222.7 32.1c5 16.9-4.6 34.8-21.5 39.8C121.8 95.6 64 169.1 64 256c0 106 86 192 192 192s192-86 192-192c0-86.9-57.8-160.4-137.1-184.1c-16.9-5-26.6-22.9-21.5-39.8s22.9-26.6 39.8-21.5C434.9 42.1 512 140 512 256c0 141.4-114.6 256-256 256S0 397.4 0 256C0 140 77.1 42.1 182.9 10.6c16.9-5 34.8 4.6 39.8 21.5z"
+    fill="#0DADEA"
+  />
+</svg>
 `;
 
 exports[`HealthStatusIcon.Suspended 1`] = `
@@ -128,16 +137,22 @@ exports[`HealthStatusIcon.Unknown 1`] = `
 
 exports[`OperationState.Deleting 1`] = `
 [
-  <i
-    className="fa fa-circle-notch fa-spin"
+  <svg
+    className="icon spin"
     qe-id="utils-operations-status-title"
     style={
       {
         "color": "#0DADEA",
       }
     }
-    title="Deleting"
-  />,
+    viewBox="0 0 512 512"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M222.7 32.1c5 16.9-4.6 34.8-21.5 39.8C121.8 95.6 64 169.1 64 256c0 106 86 192 192 192s192-86 192-192c0-86.9-57.8-160.4-137.1-184.1c-16.9-5-26.6-22.9-21.5-39.8s22.9-26.6 39.8-21.5C434.9 42.1 512 140 512 256c0 141.4-114.6 256-256 256S0 397.4 0 256C0 140 77.1 42.1 182.9 10.6c16.9-5 34.8 4.6 39.8 21.5z"
+      fill="#0DADEA"
+    />
+  </svg>,
   " ",
   "Deleting",
 ]
@@ -196,33 +211,45 @@ exports[`OperationState.Sync failed 1`] = `
 
 exports[`OperationState.Syncing 1`] = `
 [
-  <i
-    className="fa fa-circle-notch fa-spin"
+  <svg
+    className="icon spin"
     qe-id="utils-operations-status-title"
     style={
       {
         "color": "#0DADEA",
       }
     }
-    title="Syncing"
-  />,
+    viewBox="0 0 512 512"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M222.7 32.1c5 16.9-4.6 34.8-21.5 39.8C121.8 95.6 64 169.1 64 256c0 106 86 192 192 192s192-86 192-192c0-86.9-57.8-160.4-137.1-184.1c-16.9-5-26.6-22.9-21.5-39.8s22.9-26.6 39.8-21.5C434.9 42.1 512 140 512 256c0 141.4-114.6 256-256 256S0 397.4 0 256C0 140 77.1 42.1 182.9 10.6c16.9-5 34.8 4.6 39.8 21.5z"
+      fill="#0DADEA"
+    />
+  </svg>,
   " ",
   "Syncing",
 ]
 `;
 
 exports[`OperationState.Unknown 1`] = `
 [
-  <i
-    className="fa fa-circle-notch fa-spin"
+  <svg
+    className="icon spin"
     qe-id="utils-operations-status-title"
     style={
       {
         "color": "#0DADEA",
       }
     }
-    title="Unknown"
-  />,
+    viewBox="0 0 512 512"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M222.7 32.1c5 16.9-4.6 34.8-21.5 39.8C121.8 95.6 64 169.1 64 256c0 106 86 192 192 192s192-86 192-192c0-86.9-57.8-160.4-137.1-184.1c-16.9-5-26.6-22.9-21.5-39.8s22.9-26.6 39.8-21.5C434.9 42.1 512 140 512 256c0 141.4-114.6 256-256 256S0 397.4 0 256C0 140 77.1 42.1 182.9 10.6c16.9-5 34.8 4.6 39.8 21.5z"
+      fill="#0DADEA"
+    />
+  </svg>,
   " ",
   "Unknown",
 ]
@@ -255,15 +282,22 @@ exports[`ResourceResultIcon.Hook.Failed 1`] = `
 `;
 
 exports[`ResourceResultIcon.Hook.Running 1`] = `
-<i
-  className="fa fa-circle-notch fa-spin"
+<svg
+  className="icon spin"
+  qe-id="utils-resource-result-icon"
   style={
     {
       "color": "#0DADEA",
     }
   }
-  title="Running: my-message"
-/>
+  viewBox="0 0 512 512"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M222.7 32.1c5 16.9-4.6 34.8-21.5 39.8C121.8 95.6 64 169.1 64 256c0 106 86 192 192 192s192-86 192-192c0-86.9-57.8-160.4-137.1-184.1c-16.9-5-26.6-22.9-21.5-39.8s22.9-26.6 39.8-21.5C434.9 42.1 512 140 512 256c0 141.4-114.6 256-256 256S0 397.4 0 256C0 140 77.1 42.1 182.9 10.6c16.9-5 34.8 4.6 39.8 21.5z"
+    fill="#0DADEA"
+  />
+</svg>
 `;
 
 exports[`ResourceResultIcon.Hook.Succeeded 1`] = `
@@ -278,14 +312,22 @@ exports[`ResourceResultIcon.Hook.Succeeded 1`] = `
 `;
 
 exports[`ResourceResultIcon.Hook.Terminating 1`] = `
-<i
-  className="fa fa-circle-notch fa-spin"
+<svg
+  className="icon spin"
+  qe-id="utils-resource-result-icon"
   style={
     {
       "color": "#DE303D",
     }
   }
-/>
+  viewBox="0 0 512 512"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M222.7 32.1c5 16.9-4.6 34.8-21.5 39.8C121.8 95.6 64 169.1 64 256c0 106 86 192 192 192s192-86 192-192c0-86.9-57.8-160.4-137.1-184.1c-16.9-5-26.6-22.9-21.5-39.8s22.9-26.6 39.8-21.5C434.9 42.1 512 140 512 256c0 141.4-114.6 256-256 256S0 397.4 0 256C0 140 77.1 42.1 182.9 10.6c16.9-5 34.8 4.6 39.8 21.5z"
+    fill="#DE303D"
+  />
+</svg>
 `;
 
 exports[`ResourceResultIcon.Pruned 1`] = `

ui/src/app/applications/components/application-resource-tree/application-resource-tree.scss

@@ -414,7 +414,7 @@
 
     &__node-status-icon {
         font-size: 0.8em;
-        i {
+        i, svg {
             margin-right: 2px;
         }
     }

ui/src/app/applications/components/utils.scss

@@ -43,3 +43,20 @@ i.utils-health-status-icon {
         background-color: $argo-color-gray-4;
     }
 }
+
+.icon.spin {
+    animation: spin 2s linear infinite; 
+    width: 0.5em;
+    height: 0.5em;
+    vertical-align: -0.05em;
+    overflow: visible;
+}
+
+@keyframes spin {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}

ui/src/app/applications/components/utils.test.tsx

@@ -758,4 +758,4 @@ status:
 
         expect(reason).toBe('SchedulingGated');
     });
-});
+});

ui/src/app/applications/components/utils.tsx

@@ -49,6 +49,22 @@ export function helpTip(text: string) {
         </Tooltip>
     );
 }
+
+//CLassic Solid circle-notch icon
+//<!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
+//this will replace all <i> fa-spin </i> icons as they are currently misbehaving with no fix available.
+
+export const SpinningIcon = ({color, qeId}: {color: string; qeId: string}) => {
+    return (
+        <svg className='icon spin' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' style={{color}} qe-id={qeId}>
+            <path
+                fill={color}
+                d='M222.7 32.1c5 16.9-4.6 34.8-21.5 39.8C121.8 95.6 64 169.1 64 256c0 106 86 192 192 192s192-86 192-192c0-86.9-57.8-160.4-137.1-184.1c-16.9-5-26.6-22.9-21.5-39.8s22.9-26.6 39.8-21.5C434.9 42.1 512 140 512 256c0 141.4-114.6 256-256 256S0 397.4 0 256C0 140 77.1 42.1 182.9 10.6c16.9-5 34.8 4.6 39.8 21.5z'
+            />
+        </svg>
+    );
+};
+
 export async function deleteApplication(appName: string, appNamespace: string, apis: ContextApis): Promise<boolean> {
     let confirmed = false;
     const propagationPolicies: {name: string; message: string}[] = [
@@ -221,7 +237,11 @@ export const OperationPhaseIcon = ({app, isButton}: {app: appModels.Application;
             color = COLORS.operation.running;
             break;
     }
-    return <i title={getOperationStateTitle(app)} qe-id='utils-operations-status-title' className={className} style={{color}} />;
+    return className.includes('fa-spin') ? (
+        <SpinningIcon color={color} qeId='utils-operations-status-title' />
+    ) : (
+        <i title={getOperationStateTitle(app)} qe-id='utils-operations-status-title' className={className} style={{color}} />
+    );
 };
 
 export const HydrateOperationPhaseIcon = ({operationState, isButton}: {operationState?: appModels.HydrateOperation; isButton?: boolean}) => {
@@ -244,7 +264,11 @@ export const HydrateOperationPhaseIcon = ({operationState, isButton}: {operation
             color = COLORS.operation.running;
             break;
     }
-    return <i title={operationState.phase} qe-id='utils-operations-status-title' className={className} style={{color}} />;
+    return className.includes('fa-spin') ? (
+        <SpinningIcon color={color} qeId='utils-operations-status-title' />
+    ) : (
+        <i title={operationState.phase} qe-id='utils-operations-status-title' className={className} style={{color}} />
+    );
 };
 
 export const ComparisonStatusIcon = ({
@@ -283,7 +307,9 @@ export const ComparisonStatusIcon = ({
             className = `fa fa-circle-notch ${noSpin ? '' : 'fa-spin'}${isButton ? ' status-button' : ''}`;
             break;
     }
-    return (
+    return className.includes('fa-spin') ? (
+        <SpinningIcon color={color} qeId='utils-sync-status-title' />
+    ) : (
         <React.Fragment>
             <i qe-id='utils-sync-status-title' title={title} className={className} style={{color}} /> {label && title}
         </React.Fragment>
@@ -892,7 +918,11 @@ export const HealthStatusIcon = ({state, noSpin}: {state: appModels.HealthStatus
     if (state.message) {
         title = `${state.status}: ${state.message}`;
     }
-    return <i qe-id='utils-health-status-title' title={title} className={'fa ' + icon + ' utils-health-status-icon'} style={{color}} />;
+    return icon.includes('fa-spin') ? (
+        <SpinningIcon color={color} qeId='utils-health-status-title' />
+    ) : (
+        <i qe-id='utils-health-status-title' title={title} className={'fa ' + icon + ' utils-health-status-icon'} style={{color}} />
+    );
 };
 
 export const PodHealthIcon = ({state}: {state: appModels.HealthStatus}) => {
@@ -916,7 +946,11 @@ export const PodHealthIcon = ({state}: {state: appModels.HealthStatus}) => {
     if (state.message) {
         title = `${state.status}: ${state.message}`;
     }
-    return <i qe-id='utils-health-status-title' title={title} className={'fa ' + icon} />;
+    return icon.includes('fa-spin') ? (
+        <SpinningIcon color={'white'} qeId='utils-health-status-title' />
+    ) : (
+        <i qe-id='utils-health-status-title' title={title} className={'fa ' + icon} />
+    );
 };
 
 export const PodPhaseIcon = ({state}: {state: appModels.PodPhase}) => {
@@ -938,7 +972,7 @@ export const PodPhaseIcon = ({state}: {state: appModels.PodPhase}) => {
             className = 'fa fa-question-circle';
             break;
     }
-    return <i qe-id='utils-pod-phase-icon' className={className} />;
+    return className.includes('fa-spin') ? <SpinningIcon color={'white'} qeId='utils-pod-phase-icon' /> : <i qe-id='utils-pod-phase-icon' className={className} />;
 };
 
 export const ResourceResultIcon = ({resource}: {resource: appModels.ResourceResult}) => {
@@ -997,7 +1031,7 @@ export const ResourceResultIcon = ({resource}: {resource: appModels.ResourceResu
         if (resource.message) {
             title = `${resource.hookPhase}: ${resource.message}`;
         }
-        return <i title={title} className={className} style={{color}} />;
+        return className.includes('fa-spin') ? <SpinningIcon color={color} qeId='utils-resource-result-icon' /> : <i title={title} className={className} style={{color}} />;
     }
     return null;
 };

ui/src/app/shared/components/spinner.tsx

@@ -1,9 +1,10 @@
 import * as React from 'react';
 import {COLORS} from './colors';
+import {SpinningIcon} from '../../applications/components/utils';
 
 export const Spinner = ({show, style = {}}: {show: boolean; style?: React.CSSProperties}) =>
     show ? (
         <span style={style}>
-            <i className='fa fa-circle-notch fa-spin' style={{color: COLORS.operation.running}} />
+            <SpinningIcon color={COLORS.operation.running} qeId='Spinnner-icon' />
         </span>
     ) : null;