From 889d5e5b28e397680be8cca5bfb4b4ed61da581d Mon Sep 17 00:00:00 2001
From: Kevin Cunnane <kcunnane@microsoft.com>
Date: Fri, 22 Feb 2019 16:00:06 -0800
Subject: [PATCH] Add loading spinner for insight widgets while they're in a
 loading state (#4136)

- This was very confusing without status indicator, is it complete or in progress?

Please let me know if you see issues with this e.g. was there a reason we didn't do this up to now?

Initial state:

![image](https://user-images.githubusercontent.com/10819925/52883300-4e5d5f00-311f-11e9-988c-f7a70dc0a899.png)

On loading / error:
![image](https://user-images.githubusercontent.com/10819925/52883203-faeb1100-311e-11e9-9757-13a5fd4104c6.png)
---
 src/sql/parts/dashboard/dashboard.module.ts                 | 3 ++-
 .../dashboard/widgets/insights/insightsWidget.component.ts  | 6 ++++++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/sql/parts/dashboard/dashboard.module.ts b/src/sql/parts/dashboard/dashboard.module.ts
index 9ec0ebf91a..9faa746a54 100644
--- a/src/sql/parts/dashboard/dashboard.module.ts
+++ b/src/sql/parts/dashboard/dashboard.module.ts
@@ -59,12 +59,13 @@ import { Checkbox } from 'sql/base/browser/ui/checkbox/checkbox.component';
 import { SelectBox } from 'sql/base/browser/ui/selectBox/selectBox.component';
 import { EditableDropDown } from 'sql/base/browser/ui/editableDropdown/editableDropdown.component';
 import { InputBox } from 'sql/base/browser/ui/inputBox/inputBox.component';
+import LoadingSpinner from 'sql/parts/modelComponents/loadingSpinner.component';
 
 let baseComponents = [DashboardHomeContainer, DashboardComponent, DashboardWidgetWrapper, DashboardWebviewContainer,
 	DashboardWidgetContainer, DashboardGridContainer, DashboardErrorContainer, DashboardNavSection, ModelViewContent, WebviewContent, WidgetContent,
 	ComponentHostDirective, BreadcrumbComponent, ControlHostContent, DashboardControlHostContainer,
 	JobsViewComponent, AgentViewComponent, JobHistoryComponent, JobStepsViewComponent, AlertsViewComponent, ProxiesViewComponent, OperatorsViewComponent,
-	DashboardModelViewContainer, ModelComponentWrapper, Checkbox, EditableDropDown, SelectBox, InputBox,];
+	DashboardModelViewContainer, ModelComponentWrapper, Checkbox, EditableDropDown, SelectBox, InputBox, LoadingSpinner ];
 
 /* Panel */
 import { PanelModule } from 'sql/base/browser/ui/panel/panel.module';
diff --git a/src/sql/parts/dashboard/widgets/insights/insightsWidget.component.ts b/src/sql/parts/dashboard/widgets/insights/insightsWidget.component.ts
index 8c0ae58f22..5f465aa9ad 100644
--- a/src/sql/parts/dashboard/widgets/insights/insightsWidget.component.ts
+++ b/src/sql/parts/dashboard/widgets/insights/insightsWidget.component.ts
@@ -48,6 +48,7 @@ interface IStorageResult {
 				<div *ngIf="lastUpdated" style="font-style: italic; font-size: 80%; margin-left: 5px">{{lastUpdated}}</div>
 				<div style="margin: 10px; width: calc(100% - 20px); height: calc(100% - 20px)">
 					<ng-template component-host></ng-template>
+					<loading-spinner [loading]="_loading"></loading-spinner>
 				</div>`,
 	styles: [':host { width: 100%; height: 100% }']
 })
@@ -58,6 +59,7 @@ export class InsightsWidget extends DashboardWidget implements IDashboardWidget,
 
 	private _typeKey: string;
 	private _init: boolean = false;
+	private _loading: boolean = true;
 	private _intervalTimer: IntervalTimer;
 
 	public error: string;
@@ -86,6 +88,7 @@ export class InsightsWidget extends DashboardWidget implements IDashboardWidget,
 				let cancelablePromise = createCancelablePromise(() => {
 					return promise.then(
 						result => {
+							this._loading = false;
 							if (this._init) {
 								this._updateChild(result);
 								this.setupInterval();
@@ -94,6 +97,7 @@ export class InsightsWidget extends DashboardWidget implements IDashboardWidget,
 							}
 						},
 						error => {
+							this._loading = false;
 							if (isPromiseCanceledError(error)) {
 								return;
 							}
@@ -117,10 +121,12 @@ export class InsightsWidget extends DashboardWidget implements IDashboardWidget,
 		if (this.queryObv) {
 			this._register(toDisposableSubscription(this.queryObv.subscribe(
 				result => {
+					this._loading = false;
 					this._updateChild(result);
 					this.setupInterval();
 				},
 				error => {
+					this._loading = false;
 					this.showError(error);
 				}
 			)));