From 78424b4f2de893de574b28a677b2d5bf55556e10 Mon Sep 17 00:00:00 2001
From: Louis Lam <louislam@users.noreply.github.com>
Date: Tue, 26 Oct 2021 12:48:21 +0800
Subject: [PATCH] add simple loading chart effect

---
 src/components/PingChart.vue | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/components/PingChart.vue b/src/components/PingChart.vue
index 04c00ca8..aa209fab 100644
--- a/src/components/PingChart.vue
+++ b/src/components/PingChart.vue
@@ -10,7 +10,7 @@
                 </li>
             </ul>
         </div>
-        <div class="chart-wrapper">
+        <div class="chart-wrapper" :class="{ loading : loading}">
             <LineChart :chart-data="chartData" :options="chartOptions" />
         </div>
     </div>
@@ -42,6 +42,9 @@ export default {
     },
     data() {
         return {
+
+            loading: false,
+
             // Configurable filtering on top of the returned data
             chartPeriodHrs: 0,
 
@@ -218,12 +221,15 @@ export default {
                 newPeriod = null;
                 this.heartbeatList = null;
             } else {
+                this.loading = true;
+
                 this.$root.getMonitorBeats(this.monitorId, newPeriod, (res) => {
                     if (!res.ok) {
                         toast.error(res.msg);
                     } else {
                         this.heartbeatList = res.data;
                     }
+                    this.loading = false;
                 });
             }
         }
@@ -309,5 +315,9 @@ export default {
 
 .chart-wrapper {
     margin-bottom: 0.5em;
+
+    &.loading {
+        filter: blur(10px);
+    }
 }
 </style>