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: `
-
-
+
+ {{getStatusText()}}
+
+
`
})
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
((props) => props.showText, false);
+ }
+
+ public get loadingText(): string {
+ return this.getPropertyOrDefault((props) => props.loadingText, localize('loadingMessage', "Loading"));
+ }
+
+ public get loadingCompletedText(): string {
+ return this.getPropertyOrDefault((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;
+}