style: 💄 Update Refresh Button to animate when loading (#1089)

* style: 💄 Update Refresh Button to animate when loading

* refactor: 💡 Move temporary animation styles to app level styles

Co-authored-by: Randall Morey <randall@randallmorey.com>

ui/admin/app/styles/app.scss

@@ -217,3 +217,20 @@
 .nowrap {
   white-space: nowrap;
 }
+
+// Spinning animation for refresh button icon
+.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;
+    }
+  }
+}

ui/desktop/app/styles/app.scss

@@ -483,3 +483,20 @@ $chevron-down: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231
     color: var(--ui-gray);
   }
 }
+
+// Spinning animation for refresh button icon
+.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;
+    }
+  }
+}