From b364e32bebd88dcfafa1177c59c455213cf70c0e Mon Sep 17 00:00:00 2001
From: Alan Ren <alanren@microsoft.com>
Date: Thu, 7 Nov 2019 11:28:38 -0800
Subject: [PATCH] improve the loading component (#8251)

* improve the loading component

* fix unused method warning

* revert the change
---
 src/sql/azdata.d.ts                           |  3 +++
 .../loadingComponent.component.ts             | 27 ++++++++++++++++---
 .../media/loadingComponent.css                | 18 ++++++++++++-
 3 files changed, 43 insertions(+), 5 deletions(-)

diff --git a/src/sql/azdata.d.ts b/src/sql/azdata.d.ts
index 80150a3bdc..a23ca9ef51 100644
--- a/src/sql/azdata.d.ts
+++ b/src/sql/azdata.d.ts
@@ -3238,6 +3238,9 @@ declare module 'azdata' {
 
 	export interface LoadingComponentProperties {
 		loading?: boolean;
+		showText?: boolean;
+		loadingText?: string;
+		loadingCompletedText?: string;
 	}
 
 	export interface DivContainerProperties extends ComponentProperties {
diff --git a/src/sql/workbench/browser/modelComponents/loadingComponent.component.ts b/src/sql/workbench/browser/modelComponents/loadingComponent.component.ts
index 7c2d280d27..54f0ab72c8 100644
--- a/src/sql/workbench/browser/modelComponents/loadingComponent.component.ts
+++ b/src/sql/workbench/browser/modelComponents/loadingComponent.component.ts
@@ -12,20 +12,23 @@ import * as azdata from 'azdata';
 
 import { ComponentBase } from 'sql/workbench/browser/modelComponents/componentBase';
 import { IComponent, IComponentDescriptor, IModelStore } from 'sql/workbench/browser/modelComponents/interfaces';
-import * as nls from 'vs/nls';
+import { localize } from 'vs/nls';
 
 @Component({
 	selector: 'modelview-loadingComponent',
 	template: `
-		<div class="modelview-loadingComponent-container" role="alert" aria-busy="true" *ngIf="loading">
-			<div class="modelview-loadingComponent-spinner" *ngIf="loading" [title]=_loadingTitle #spinnerElement></div>
+		<div role="status" aria-live="polite" class="modelview-loading-component-status-message">
+			{{getStatusText()}}
+		</div>
+		<div class="modelview-loadingComponent-container" aria-busy="true" *ngIf="loading">
+			<div class="modelview-loadingComponent-spinner" [title]="getStatusText()" #spinnerElement></div>
+			<div *ngIf="showText" class="modelview-loadingComponent-status-text">{{getStatusText()}}</div>
 		</div>
 		<model-component-wrapper #childElement [descriptor]="_component" [modelStore]="modelStore" *ngIf="_component" [ngClass]="{'modelview-loadingComponent-content-loading': loading}">
 		</model-component-wrapper>
 	`
 })
 export default class LoadingComponent extends ComponentBase implements IComponent, OnDestroy, AfterViewInit {
-	public readonly _loadingTitle = nls.localize('loadingMessage', "Loading");
 	private _component: IComponentDescriptor;
 
 	@Input() descriptor: IComponentDescriptor;
@@ -75,8 +78,24 @@ export default class LoadingComponent extends ComponentBase implements IComponen
 		this.layout();
 	}
 
+	public get showText(): boolean {
+		return this.getPropertyOrDefault<azdata.LoadingComponentProperties, boolean>((props) => props.showText, false);
+	}
+
+	public get loadingText(): string {
+		return this.getPropertyOrDefault<azdata.LoadingComponentProperties, string>((props) => props.loadingText, localize('loadingMessage', "Loading"));
+	}
+
+	public get loadingCompletedText(): string {
+		return this.getPropertyOrDefault<azdata.LoadingComponentProperties, string>((props) => props.loadingCompletedText, localize('loadingCompletedMessage', "Loading completed"));
+	}
+
 	public addToContainer(componentDescriptor: IComponentDescriptor): void {
 		this._component = componentDescriptor;
 		this.layout();
 	}
+
+	public getStatusText(): string {
+		return this.loading ? this.loadingText : this.loadingCompletedText;
+	}
 }
diff --git a/src/sql/workbench/browser/modelComponents/media/loadingComponent.css b/src/sql/workbench/browser/modelComponents/media/loadingComponent.css
index 7eff7a778a..f5fa7d9033 100644
--- a/src/sql/workbench/browser/modelComponents/media/loadingComponent.css
+++ b/src/sql/workbench/browser/modelComponents/media/loadingComponent.css
@@ -7,6 +7,11 @@
 	display: flex;
 	flex-direction: row;
 	justify-content: center;
+	align-items: center;
+}
+
+.modelview-loadingComponent-status-text {
+	margin-left: 5px;
 }
 
 .vs .modelview-loadingComponent-spinner {
@@ -26,4 +31,15 @@
 
 .modelview-loadingComponent-content-loading {
 	display: none;
-}
\ No newline at end of file
+}
+
+/* We want to make this on DOM but not visible so that screen reader can read the status message */
+
+.modelview-loading-component-status-message {
+	top: -1;
+	left: -1px;
+	width: 1px;
+	height: 1px;
+	position: absolute;
+	overflow: hidden;
+}