From 0f3c2f043b7f1e1e4821b95e799f5ddb8875eee0 Mon Sep 17 00:00:00 2001
From: Cameron Perera <cameron.perera@hashicorp.com>
Date: Fri, 29 Apr 2022 15:29:53 -0500
Subject: [PATCH] =?UTF-8?q?style:=20=F0=9F=92=84=20Update=20Refresh=20Butt?=
 =?UTF-8?q?on=20to=20animate=20when=20loading=20(#1089)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 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   | 17 +++++++++++++++++
 ui/desktop/app/styles/app.scss | 17 +++++++++++++++++
 2 files changed, 34 insertions(+)

diff --git a/ui/admin/app/styles/app.scss b/ui/admin/app/styles/app.scss
index 0264fc62a..15cd1b251 100644
--- a/ui/admin/app/styles/app.scss
+++ b/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;
+    }
+  }
+}
diff --git a/ui/desktop/app/styles/app.scss b/ui/desktop/app/styles/app.scss
index 843daa102..06eb9df3b 100644
--- a/ui/desktop/app/styles/app.scss
+++ b/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;
+    }
+  }
+}