diff --git a/ui/admin/app/styles/app.scss b/ui/admin/app/styles/app.scss
index cab03b2f4..c54c5e73a 100644
--- a/ui/admin/app/styles/app.scss
+++ b/ui/admin/app/styles/app.scss
@@ -219,20 +219,16 @@
 }
 
 // Spinning animation for refresh button icon
-.is-loading .rose-icon {
-  @keyframes hds-flight-icon-animation-rotation {
-    to {
-      transform: rotate(360deg);
-    }
-  }
+@media (prefers-reduced-motion: no-preference) {
+  .is-loading {
+    .rose-icon {
+      @keyframes hds-flight-icon-animation-rotation {
+        to {transform: rotate(360deg);}
+      }
 
-  > svg {
-    animation: hds-flight-icon-animation-rotation 9s linear infinite;
-  }
-
-  @media (prefers-reduced-motion: no-preference) {
-    > svg {
-      animation-duration: 0.7s;
+      > svg {
+        animation: hds-flight-icon-animation-rotation 0.7s linear infinite;
+      }
     }
   }
 }
diff --git a/ui/desktop/app/styles/app.scss b/ui/desktop/app/styles/app.scss
index 93c572319..2d5758152 100644
--- a/ui/desktop/app/styles/app.scss
+++ b/ui/desktop/app/styles/app.scss
@@ -485,20 +485,16 @@ $chevron-down: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231
 }
 
 // Spinning animation for refresh button icon
-.is-loading .rose-icon {
-  @keyframes hds-flight-icon-animation-rotation {
-    to {
-      transform: rotate(360deg);
-    }
-  }
+@media (prefers-reduced-motion: no-preference) {
+  .is-loading {
+    .rose-icon {
+      @keyframes hds-flight-icon-animation-rotation {
+        to {transform: rotate(360deg);}
+      }
 
-  > svg {
-    animation: hds-flight-icon-animation-rotation 9s linear infinite;
-  }
-
-  @media (prefers-reduced-motion: no-preference) {
-    > svg {
-      animation-duration: 0.7s;
+      > svg {
+        animation: hds-flight-icon-animation-rotation 0.7s linear infinite;
+      }
     }
   }
 }