Move loading component out of common properties component (#10134)

src/sql/azdata.proposed.d.ts

@@ -335,10 +335,6 @@ declare module 'azdata' {
 		 * The properties to display
 		 */
 		propertyItems?: PropertiesContainerItem[];
-		/**
-		 * Whether the component is currently loading
-		 */
-		loading?: boolean;
 	}
 
 	export namespace nb {

src/sql/base/browser/ui/propertiesContainer/propertiesContainer.component.html

@@ -4,8 +4,6 @@
  *  Licensed under the Source EULA. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 -->
-<loading-spinner [loading]="loading" [loadingMessage]="loadingMessage"
-	[loadingCompletedMessage]="loadingCompletedMessage"></loading-spinner>
 <div class="grid-container {{gridDisplayLayout}}" style="position: absolute; height: 100%; width: 100%;" [style.display]="_loading ? 'none':'grid'">
 	<ng-template ngFor let-item [ngForOf]="displayProperties">
 		<div class="property {{propertyLayout}}" style="display:flex">

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

@@ -6,7 +6,6 @@ import 'vs/css!./media/propertiesContainer';
 
 import { Component, Inject, forwardRef, ChangeDetectorRef, OnInit, ElementRef, OnDestroy } from '@angular/core';
 import { EventType, addDisposableListener } from 'vs/base/browser/dom';
-import * as nls from 'vs/nls';
 import { Disposable } from 'vs/base/common/lifecycle';
 
 enum GridDisplayLayout {
@@ -35,11 +34,8 @@ const verticalPropertyHeight = 46;
 export class PropertiesContainer extends Disposable implements OnInit, OnDestroy {
 	public gridDisplayLayout = GridDisplayLayout.twoColumns;
 	public propertyLayout = PropertyLayoutDirection.row;
-	public loadingMessage: string = nls.localize('loadingProperties', "Loading properties");
-	public loadingCompletedMessage: string = nls.localize('loadingPropertiesCompleted', "Loading properties completed");
 	public height: number;
 
-	private _loading: boolean = true;
 	private _displayProperties: DisplayProperty[] = [];
 
 	constructor(
@@ -63,23 +59,21 @@ export class PropertiesContainer extends Disposable implements OnInit, OnDestroy
 		// 2 columns w/ horizontal alignment : 1366px and above
 		// 2 columns w/ vertical alignment : 1024 - 1365px
 		// 1 column w/ vertical alignment : 1024px or less
-		if (!this.loading) {
+		if (window.innerWidth >= 1366) {
-			if (window.innerWidth >= 1366) {
+			this.gridDisplayLayout = GridDisplayLayout.twoColumns;
-				this.gridDisplayLayout = GridDisplayLayout.twoColumns;
+			this.propertyLayout = PropertyLayoutDirection.row;
-				this.propertyLayout = PropertyLayoutDirection.row;
+			this.height = Math.ceil(this.displayProperties.length / 2) * horizontalPropertyHeight + collapseHeight;
-				this.height = Math.ceil(this.displayProperties.length / 2) * horizontalPropertyHeight + collapseHeight;
+		} else if (window.innerWidth < 1366 && window.innerWidth >= 1024) {
-			} else if (window.innerWidth < 1366 && window.innerWidth >= 1024) {
+			this.gridDisplayLayout = GridDisplayLayout.twoColumns;
-				this.gridDisplayLayout = GridDisplayLayout.twoColumns;
+			this.propertyLayout = PropertyLayoutDirection.column;
-				this.propertyLayout = PropertyLayoutDirection.column;
+			this.height = Math.ceil(this.displayProperties.length / 2) * verticalPropertyHeight + collapseHeight;
-				this.height = Math.ceil(this.displayProperties.length / 2) * verticalPropertyHeight + collapseHeight;
+		} else if (window.innerWidth < 1024) {
-			} else if (window.innerWidth < 1024) {
+			this.gridDisplayLayout = GridDisplayLayout.oneColumn;
-				this.gridDisplayLayout = GridDisplayLayout.oneColumn;
+			this.propertyLayout = PropertyLayoutDirection.column;
-				this.propertyLayout = PropertyLayoutDirection.column;
+			this.height = this.displayProperties.length * verticalPropertyHeight + collapseHeight;
-				this.height = this.displayProperties.length * verticalPropertyHeight + collapseHeight;
-			}
-
-			this._changeRef.detectChanges();
 		}
+
+		this._changeRef.detectChanges();
 	}
 
 	public set displayProperties(displayProperties: DisplayProperty[]) {
@@ -90,13 +84,4 @@ export class PropertiesContainer extends Disposable implements OnInit, OnDestroy
 	public get displayProperties(): DisplayProperty[] {
 		return this._displayProperties;
 	}
-
-	public set loading(loading: boolean) {
-		this._loading = loading;
-		this._changeRef.detectChanges();
-	}
-
-	public get loading(): boolean {
-		return this._loading;
-	}
 }

src/sql/workbench/browser/modelComponents/propertiesContainer.component.ts

@@ -42,16 +42,6 @@ export default class PropertiesContainerComponent extends ComponentBase implemen
 	public setProperties(properties: { [key: string]: any; }): void {
 		super.setProperties(properties);
 		this._propertiesContainer.displayProperties = this.displayProperties;
-		this._propertiesContainer.loading = this.loading;
-	}
-
-	public get loading(): boolean {
-		return this.getPropertyOrDefault<azdata.PropertiesContainerComponentProperties, boolean>((props) => props.loading, true);
-	}
-
-	public set loading(newValue: boolean) {
-		this.setPropertyFromUI<azdata.PropertiesContainerComponentProperties, boolean>((props, value) => props.loading = value, newValue);
-		this._propertiesContainer.loading = newValue;
 	}
 
 	public get displayProperties(): DisplayProperty[] {

src/sql/workbench/contrib/dashboard/browser/widgets/properties/propertiesWidget.component.ts

@@ -52,10 +52,14 @@ const dashboardRegistry = Registry.as<IDashboardRegistry>(DashboardExtensions.Da
 
 @Component({
 	selector: 'properties-widget',
-	template: '<properties-container></properties-container>'
+	template: `
+	<loading-spinner [loading]="_loading" [loadingMessage]="loadingMessage" [loadingCompletedMessage]="loadingCompletedMessage"></loading-spinner>
+	<properties-container></properties-container>`
 })
 export class PropertiesWidgetComponent extends DashboardWidget implements IDashboardWidget, OnInit {
 	@ViewChild(PropertiesContainer) private _propertiesContainer: PropertiesContainer;
+	public loadingMessage: string = nls.localize('loadingProperties', "Loading properties");
+	public loadingCompletedMessage: string = nls.localize('loadingPropertiesCompleted', "Loading properties completed");
 	private _connection: ConnectionManagementInfo;
 
 	constructor(
@@ -245,13 +249,6 @@ export class PropertiesWidgetComponent extends DashboardWidget implements IDashb
 		return val;
 	}
 
-	protected setLoadingStatus(loading: boolean): void {
-		super.setLoadingStatus(loading);
-		if (this._inited) {
-			this._propertiesContainer.loading = loading;
-		}
-	}
-
 	public get height(): number {
 		return convertSizeToNumber(this._propertiesContainer.height);
 	}