Move properties container and loading spinner to common components (#10058)

* Move properties container and loading spinner to common components

* Fix compile error

* Fix tests

src/sql/base/browser/ui/loadingSpinner/loadingSpinner.component.ts

@@ -0,0 +1,47 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import 'vs/css!./media/loadingComponent';
+import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
+import * as nls from 'vs/nls';
+import { status } from 'vs/base/browser/ui/aria/aria';
+
+const DefaultLoadingMessage = nls.localize('loadingMessage', "Loading");
+const DefaultLoadingCompletedMessage = nls.localize('loadingCompletedMessage', "Loading completed");
+
+@Component({
+	selector: 'loading-spinner',
+	template: `
+		<div class="loading-spinner-container" *ngIf="loading">
+			<div class="loading-spinner codicon in-progress" *ngIf="loading" [title]="_loadingMessage" #spinnerElement></div>
+		</div>
+	`
+})
+export default class LoadingSpinner implements OnChanges {
+
+	ngOnChanges(changes: SimpleChanges): void {
+		if (changes.loading !== undefined) {
+			const message = this.loading ? this._loadingMessage : this._loadingCompletedMessage;
+			status(message);
+		}
+	}
+
+	get _loadingMessage(): string {
+		return this.loadingMessage ? this.loadingMessage : DefaultLoadingMessage;
+	}
+
+	get _loadingCompletedMessage(): string {
+		return this.loadingCompletedMessage ? this.loadingCompletedMessage : DefaultLoadingCompletedMessage;
+	}
+
+	@Input()
+	loading: boolean;
+
+	@Input()
+	loadingMessage: string;
+
+	@Input()
+	loadingCompletedMessage: string;
+}

src/sql/base/browser/ui/loadingSpinner/loadingSpinner.module.ts

@@ -0,0 +1,16 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import LoadingSpinner from './loadingSpinner.component';
+
+@NgModule({
+	imports: [CommonModule],
+	exports: [LoadingSpinner],
+	declarations: [LoadingSpinner]
+})
+export class LoadingSpinnerModule { }

src/sql/base/browser/ui/loadingSpinner/media/loadingComponent.css

@@ -0,0 +1,25 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+loading-spinner .loading-spinner-container {
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	align-items: center;
+}
+
+loading-spinner .modelview-loadingComponent-status-text {
+	margin-left: 5px;
+}
+
+loading-spinner .loading-spinner {
+	height: 20px;
+	padding-top: 5px;
+	padding-bottom: 5px;
+}
+
+loading-spinner .modelview-loadingComponent-content-loading {
+	display: none;
+}