Enable loading spinner for notebook editor. (#18810)

src/sql/workbench/contrib/notebook/browser/notebook.component.html

@@ -8,7 +8,6 @@
 	<div #toolbar class="editor-toolbar actionbar-container" style="flex: 0 0 auto; display: flex; flex-flow: row; width: 100%; align-items: center;">
 	</div>
 	<div #container class="scrollable" style="flex: 1 1 auto; position: relative; outline: none" (click)="clickOffCell($event)" (scroll)="scrollHandler($event)">
-		<loading-spinner [loading]="isLoading"></loading-spinner>
 		<div *ngFor="let cell of cells">
 			<div id="{{ cell.id }}" class="notebook-cell" (click)="clickOnCell(cell, $event)" [class.active]="cell.active">
 				<cell-toolbar-component *ngIf="cell.active" [cellModel]="cell" [model]="model"></cell-toolbar-component>

src/sql/workbench/contrib/notebook/browser/notebook.component.ts

@@ -78,7 +78,6 @@ export class NotebookComponent extends AngularDisposable implements OnInit, OnDe
 	@Input() _views: NotebookViewsExtension;
 
 	protected _actionBar: Taskbar;
-	protected isLoading: boolean;
 	private _modelReadyDeferred = new Deferred<NotebookModel>();
 	private _trustedAction: TrustedAction;
 	private _runAllCellsAction: RunAllCellsAction;
@@ -112,7 +111,6 @@ export class NotebookComponent extends AngularDisposable implements OnInit, OnDe
 		@Inject(IConfigurationService) private _configurationService: IConfigurationService
 	) {
 		super();
-		this.isLoading = true;
 		this.doubleClickEditEnabled = this._configurationService.getValue('notebook.enableDoubleClickEdit');
 		this._register(this._configurationService.onDidChangeConfiguration(e => {
 			this.previewFeaturesEnabled = this._configurationService.getValue('workbench.enablePreviewFeatures');
@@ -436,7 +434,6 @@ export class NotebookComponent extends AngularDisposable implements OnInit, OnDe
 					}
 				} else {
 					this.setViewInErrorState(localize('displayFailed', "Could not display contents: {0}", getErrorMessage(error)));
-					this.setLoading(false);
 					this._modelReadyDeferred.reject(error);
 					this.notebookService.addNotebookEditor(this);
 				}
@@ -444,11 +441,6 @@ export class NotebookComponent extends AngularDisposable implements OnInit, OnDe
 		}
 	}
 
-	private setLoading(isLoading: boolean): void {
-		this.isLoading = isLoading;
-		this.detectChanges();
-	}
-
 	private async registerModel(): Promise<void> {
 		this._register(this._model.onError((errInfo: INotification) => this.handleModelError(errInfo)));
 		this._register(this._model.contentChanged((change) => this.handleContentChanged(change)));
@@ -458,7 +450,6 @@ export class NotebookComponent extends AngularDisposable implements OnInit, OnDe
 		this._register(this._model.layoutChanged(() => this.detectChanges()));
 		this._register(this.model.onScroll.event(() => this._onScroll.fire()));
 
-		this.setLoading(false);
 		// Check if URI fragment is present; if it is, navigate to section by default
 		this.navigateToSectionIfURIFragmentExists();
 		this.updateToolbarComponents();

src/sql/workbench/contrib/notebook/browser/notebook.css

@@ -251,3 +251,9 @@
 .monaco-workbench.mac .notebookEditor .select-container {
 	padding-top: 2px;
 }
+
+.notebookEditor .editorLoader .loading-spinner {
+	height: 40px;
+	width: 40px;
+	padding: 10px
+}

src/sql/workbench/contrib/notebook/browser/notebookEditor.component.html

@@ -4,6 +4,7 @@
  *  Licensed under the Source EULA. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 -->
+<loading-spinner class="editorLoader" [loading]="isLoading" [loadingMessage]="loadingMessage" [loadingCompletedMessage]="loadingCompletedMessage"></loading-spinner>
 <!-- Notebook View -->
 <notebook-component *ngIf="viewMode === ViewMode.Notebook" [_views]="views" [_model]="model"></notebook-component>
 <!-- Dashboard View -->

src/sql/workbench/contrib/notebook/browser/notebookEditor.component.ts

@@ -29,6 +29,8 @@ import { INotebookView } from 'sql/workbench/services/notebook/browser/notebookV
 import { Deferred } from 'sql/base/common/promise';
 import { NotebookChangeType } from 'sql/workbench/services/notebook/common/contracts';
 import { IUndoRedoService } from 'vs/platform/undoRedo/common/undoRedo';
+import { localize } from 'vs/nls';
+import * as path from 'vs/base/common/path';
 
 export const NOTEBOOKEDITOR_SELECTOR: string = 'notebookeditor-component';
 
@@ -42,6 +44,7 @@ export class NotebookEditorComponent extends AngularDisposable {
 	private serializationManagers: ISerializationManager[] = [];
 	private executeManagers: IExecuteManager[] = [];
 	private _modelReadyDeferred = new Deferred<NotebookModel>();
+	private _isLoading: boolean = true;
 
 	public model: NotebookModel;
 	public views: NotebookViewsExtension;
@@ -81,8 +84,29 @@ export class NotebookEditorComponent extends AngularDisposable {
 		}
 	}
 
+	public get loadingMessage() {
+		return localize('loadingNotebookMessage', "Loading notebook {0}", path.basename(this._notebookParams.notebookUri.path));
+	}
+
+	public get loadingCompletedMessage() {
+		return localize('loadingNotebookCompletedMessage', "Loading notebook {0} completed", path.basename(this._notebookParams.notebookUri.path));
+	}
+
+	public get isLoading(): boolean {
+		return this._isLoading;
+	}
+
+	private setLoading(isLoading: boolean): void {
+		this._isLoading = isLoading;
+		this.detectChanges();
+	}
+
 	private async doLoad(): Promise<void> {
-		await this.createModelAndLoadContents();
+		try {
+			await this.createModelAndLoadContents();
+		} finally {
+			this.setLoading(false);
+		}
 		await this.setSerializationManager();
 		await this.setExecuteManager();
 		await this.loadModel();