From 096700a77aaf74e66c7e795a42ba69869d41bf96 Mon Sep 17 00:00:00 2001
From: Deepesh Garg <deepeshgarg6@gmail.com>
Date: Tue, 12 Oct 2021 19:11:25 +0530
Subject: [PATCH 1/2] fix: Loading state for query reports

---
 .../js/frappe/views/reports/query_report.js   | 28 +++++++++++++++----
 1 file changed, 22 insertions(+), 6 deletions(-)

diff --git a/frappe/public/js/frappe/views/reports/query_report.js b/frappe/public/js/frappe/views/reports/query_report.js
index 7d68919821..8a50a516af 100644
--- a/frappe/public/js/frappe/views/reports/query_report.js
+++ b/frappe/public/js/frappe/views/reports/query_report.js
@@ -107,7 +107,6 @@ frappe.views.QueryReport = class QueryReport extends frappe.views.BaseList {
 		}
 
 		if (this.report_name !== frappe.get_route()[1]) {
-			// this.toggle_loading(true);
 			// different report
 			this.load_report();
 		}
@@ -556,6 +555,7 @@ frappe.views.QueryReport = class QueryReport extends frappe.views.BaseList {
 	refresh() {
 		this.toggle_message(true);
 		this.toggle_report(false);
+		this.show_loading_indicator();
 		let filters = this.get_filter_values(true);
 
 		// only one refresh at a time
@@ -645,6 +645,8 @@ frappe.views.QueryReport = class QueryReport extends frappe.views.BaseList {
 
 			this.show_footer_message();
 			frappe.hide_progress();
+		}).finally(() => {
+			this.hide_loading_indicator();
 		});
 	}
 
@@ -869,6 +871,22 @@ frappe.views.QueryReport = class QueryReport extends frappe.views.BaseList {
 		}
 	}
 
+	show_loading_indicator() {
+		this.$loading.find('div').html(`<div class="msg-box no-border">
+			<div>
+				<img src="/assets/frappe/images/ui-states/list-empty-state.svg" alt="Generic Empty State" class="null-state">
+			</div>
+			<p>${__('Loading')}...</p>
+		</div>`);
+		this.$report.hide();
+		this.$loading.show();
+	}
+
+	hide_loading_indicator() {
+		this.$loading.hide();
+		this.$report.show();
+	}
+
 	get_chart_options(data) {
 		let options = this.report_settings.get_chart_data
 			? this.report_settings.get_chart_data(data.columns, data.result)
@@ -1679,6 +1697,9 @@ frappe.views.QueryReport = class QueryReport extends frappe.views.BaseList {
 			.hide().appendTo(this.page.main);
 
 		this.$chart = $('<div class="chart-wrapper">').hide().appendTo(this.page.main);
+
+		this.$loading = $(this.message_div('')).hide().appendTo(this.page.main);
+
 		this.$report = $('<div class="report-wrapper">').appendTo(this.page.main);
 		this.$message = $(this.message_div('')).hide().appendTo(this.page.main);
 	}
@@ -1738,11 +1759,6 @@ frappe.views.QueryReport = class QueryReport extends frappe.views.BaseList {
 		this.refresh();
 	}
 
-	toggle_loading(flag) {
-		this.toggle_message(flag, __('Loading') + '...');
-	}
-
-
 	toggle_nothing_to_show(flag) {
 		let message = this.prepared_report
 			? __('This is a background report. Please set the appropriate filters and then generate a new one.')

From d257adc1302b720016cc3ed830ede379aee4403e Mon Sep 17 00:00:00 2001
From: Deepesh Garg <deepeshgarg6@gmail.com>
Date: Sat, 16 Oct 2021 16:48:33 +0530
Subject: [PATCH 2/2] fix: Rename loader functions

---
 .../js/frappe/views/reports/query_report.js       | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/frappe/public/js/frappe/views/reports/query_report.js b/frappe/public/js/frappe/views/reports/query_report.js
index 8a50a516af..4a3a953a01 100644
--- a/frappe/public/js/frappe/views/reports/query_report.js
+++ b/frappe/public/js/frappe/views/reports/query_report.js
@@ -555,7 +555,7 @@ frappe.views.QueryReport = class QueryReport extends frappe.views.BaseList {
 	refresh() {
 		this.toggle_message(true);
 		this.toggle_report(false);
-		this.show_loading_indicator();
+		this.show_loading_screen();
 		let filters = this.get_filter_values(true);
 
 		// only one refresh at a time
@@ -646,7 +646,7 @@ frappe.views.QueryReport = class QueryReport extends frappe.views.BaseList {
 			this.show_footer_message();
 			frappe.hide_progress();
 		}).finally(() => {
-			this.hide_loading_indicator();
+			this.hide_loading_screen();
 		});
 	}
 
@@ -871,18 +871,20 @@ frappe.views.QueryReport = class QueryReport extends frappe.views.BaseList {
 		}
 	}
 
-	show_loading_indicator() {
-		this.$loading.find('div').html(`<div class="msg-box no-border">
+	show_loading_screen() {
+		const loading_state = `<div class="msg-box no-border">
 			<div>
 				<img src="/assets/frappe/images/ui-states/list-empty-state.svg" alt="Generic Empty State" class="null-state">
 			</div>
 			<p>${__('Loading')}...</p>
-		</div>`);
+		</div>`;
+
+		this.$loading.find('div').html(loading_state);
 		this.$report.hide();
 		this.$loading.show();
 	}
 
-	hide_loading_indicator() {
+	hide_loading_screen() {
 		this.$loading.hide();
 		this.$report.show();
 	}
@@ -1699,7 +1701,6 @@ frappe.views.QueryReport = class QueryReport extends frappe.views.BaseList {
 		this.$chart = $('<div class="chart-wrapper">').hide().appendTo(this.page.main);
 
 		this.$loading = $(this.message_div('')).hide().appendTo(this.page.main);
-
 		this.$report = $('<div class="report-wrapper">').appendTo(this.page.main);
 		this.$message = $(this.message_div('')).hide().appendTo(this.page.main);
 	}