From 2e65feb4759ed3b6f5d805b37b54bbf5f7ffd302 Mon Sep 17 00:00:00 2001
From: Saqib Ansari <nextchamp.saqib@gmail.com>
Date: Thu, 18 Jan 2024 14:51:06 +0530
Subject: [PATCH] chore: show loading while downloading chart

---
 frontend/src/query/ChartSection.vue | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/frontend/src/query/ChartSection.vue b/frontend/src/query/ChartSection.vue
index 9702fdb89..59bbf9147 100644
--- a/frontend/src/query/ChartSection.vue
+++ b/frontend/src/query/ChartSection.vue
@@ -1,10 +1,10 @@
 <script setup>
+import { downloadImage } from '@/utils'
 import widgets from '@/widgets/widgets'
 import { computed, inject, ref } from 'vue'
 import ChartActionButtons from './ChartActionButtons.vue'
 import ChartSectionEmptySvg from './ChartSectionEmptySvg.vue'
 import ChartTypeSelector from './ChartTypeSelector.vue'
-import { downloadImage } from '@/utils'
 
 const query = inject('query')
 const chartRef = ref(null)
@@ -44,6 +44,7 @@ const fullscreenDialog = ref(false)
 function showInFullscreenDialog() {
 	fullscreenDialog.value = true
 }
+const downloading = ref(false)
 function downloadChartImage() {
 	if (!chartRef.value) {
 		$notify({
@@ -52,8 +53,11 @@ function downloadChartImage() {
 		})
 		return
 	}
+	downloading.value = true
 	const title = query.chart.doc.options.title || query.doc.title
-	downloadImage(chartRef.value.$el, `${title}.png`)
+	downloadImage(chartRef.value.$el, `${title}.png`).then(() => {
+		downloading.value = false
+	})
 }
 </script>
 
@@ -100,7 +104,12 @@ function downloadChartImage() {
 						:key="JSON.stringify(query.chart.doc)"
 					/>
 					<div class="absolute top-0 right-0 p-2">
-						<Button variant="outline" @click="downloadChartImage" icon="download">
+						<Button
+							variant="outline"
+							@click="downloadChartImage"
+							:loading="downloading"
+							icon="download"
+						>
 						</Button>
 					</div>
 				</div>