From 8b4a17683d8264d92dee7dbc1767d27bbb96d9d6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Fri, 2 Jul 2021 16:51:41 +0100
Subject: [PATCH] chore(ui): tweak fetching history ui

---
 ui/src/Styles/Components/_AlertHistory.scss | 37 ++++++++++++++++++++-
 1 file changed, 36 insertions(+), 1 deletion(-)

diff --git a/ui/src/Styles/Components/_AlertHistory.scss b/ui/src/Styles/Components/_AlertHistory.scss
index 9d62f2c4f..cb4151b0f 100644
--- a/ui/src/Styles/Components/_AlertHistory.scss
+++ b/ui/src/Styles/Components/_AlertHistory.scss
@@ -1,3 +1,5 @@
+@use "sass:math";
+
 .alert-history-tooltip {
   width: 100%;
   height: 4px;
@@ -12,6 +14,12 @@ svg.alert-history {
   margin-left: 1px;
   margin-right: 1px;
 
+  @for $i from 1 through 24 {
+    &:nth-of-type(#{$i}) > rect.fetching {
+      animation-name: alert-history-loading-#{$i};
+    }
+  }
+
   rect {
     width: 100%;
     height: 100%;
@@ -43,10 +51,37 @@ svg.alert-history {
       fill: $alert-history-inactive;
     }
     &.fetching {
-      fill: transparent;
+      fill: $alert-history-inactive;
+      animation-timing-function: ease-out;
+      animation-duration: 12s;
+      animation-iteration-count: infinite;
     }
     &.error {
       fill: $warning;
     }
   }
 }
+
+@for $i from 1 through 24 {
+  @keyframes alert-history-loading-#{$i} {
+    $step: math.div(100, 25);
+    $start: ($step * $i) - $step;
+    $middle: ($step * $i);
+    $stop: ($step * $i) + $step;
+    0% {
+      opacity: 1;
+    }
+    #{$start * 1%} {
+      opacity: 1;
+    }
+    #{$middle * 1%} {
+      opacity: 0;
+    }
+    #{$stop * 1%} {
+      opacity: 1;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+}