From 526b4e9345880ced0f380358c38c26cb9a098472 Mon Sep 17 00:00:00 2001 From: Joao Moreno Date: Wed, 1 Mar 2017 12:37:13 +0100 Subject: [PATCH] bring back extension loading indicator --- .../extensions/browser/extensionEditor.ts | 42 +++++++++---------- .../browser/media/extensionEditor.css | 4 ++ .../extensions/browser/media/loading.svg | 36 ++++++++++++++++ .../media/extensionsViewlet.css | 4 ++ .../electron-browser/media/loading.svg | 36 ++++++++++++++++ 5 files changed, 100 insertions(+), 22 deletions(-) create mode 100644 src/vs/workbench/parts/extensions/browser/media/loading.svg create mode 100644 src/vs/workbench/parts/extensions/electron-browser/media/loading.svg diff --git a/src/vs/workbench/parts/extensions/browser/extensionEditor.ts b/src/vs/workbench/parts/extensions/browser/extensionEditor.ts index 5cdc8d8b6e3..f94c7828c3f 100644 --- a/src/vs/workbench/parts/extensions/browser/extensionEditor.ts +++ b/src/vs/workbench/parts/extensions/browser/extensionEditor.ts @@ -380,31 +380,29 @@ export class ExtensionEditor extends BaseEditor { append(this.content, $('p.nocontent')).textContent = localize('noDependencies', "No Dependencies"); return; } - addClass(this.content, 'loading'); - this.extensionDependencies.get().then(extensionDependencies => { - removeClass(this.content, 'loading'); - const content = $('div', { class: 'subcontent' }); - const scrollableContent = new DomScrollableElement(content, { canUseTranslate3d: false }); - append(this.content, scrollableContent.getDomNode()); - this.contentDisposables.push(scrollableContent); + return this.loadContents(() => { + return this.extensionDependencies.get().then(extensionDependencies => { + const content = $('div', { class: 'subcontent' }); + const scrollableContent = new DomScrollableElement(content, { canUseTranslate3d: false }); + append(this.content, scrollableContent.getDomNode()); + this.contentDisposables.push(scrollableContent); + + const tree = this.renderDependencies(content, extensionDependencies); + const layout = () => { + scrollableContent.scanDomNode(); + const scrollState = scrollableContent.getScrollState(); + tree.layout(scrollState.height); + }; + const removeLayoutParticipant = arrays.insert(this.layoutParticipants, { layout }); + this.contentDisposables.push(toDisposable(removeLayoutParticipant)); - const tree = this.renderDependencies(content, extensionDependencies); - const layout = () => { + this.contentDisposables.push(tree); scrollableContent.scanDomNode(); - const scrollState = scrollableContent.getScrollState(); - tree.layout(scrollState.height); - }; - const removeLayoutParticipant = arrays.insert(this.layoutParticipants, { layout }); - this.contentDisposables.push(toDisposable(removeLayoutParticipant)); - - this.contentDisposables.push(tree); - scrollableContent.scanDomNode(); - }, error => { - removeClass(this.content, 'loading'); - append(this.content, $('p.nocontent')).textContent = error; - this.messageService.show(Severity.Error, error); - return; + }, error => { + append(this.content, $('p.nocontent')).textContent = error; + this.messageService.show(Severity.Error, error); + }); }); } diff --git a/src/vs/workbench/parts/extensions/browser/media/extensionEditor.css b/src/vs/workbench/parts/extensions/browser/media/extensionEditor.css index 21ed7e4225a..535e95226df 100644 --- a/src/vs/workbench/parts/extensions/browser/media/extensionEditor.css +++ b/src/vs/workbench/parts/extensions/browser/media/extensionEditor.css @@ -151,6 +151,10 @@ height: calc(100% - 36px); } +.extension-editor > .body > .content.loading { + background: url('loading.svg') center center no-repeat; +} + .extension-editor > .body > .content > .monaco-scrollable-element { height: 100%; } diff --git a/src/vs/workbench/parts/extensions/browser/media/loading.svg b/src/vs/workbench/parts/extensions/browser/media/loading.svg new file mode 100644 index 00000000000..0098fd9f264 --- /dev/null +++ b/src/vs/workbench/parts/extensions/browser/media/loading.svg @@ -0,0 +1,36 @@ + + + + + + + + + + \ No newline at end of file diff --git a/src/vs/workbench/parts/extensions/electron-browser/media/extensionsViewlet.css b/src/vs/workbench/parts/extensions/electron-browser/media/extensionsViewlet.css index 42b78301463..b19a89abdc9 100644 --- a/src/vs/workbench/parts/extensions/electron-browser/media/extensionsViewlet.css +++ b/src/vs/workbench/parts/extensions/electron-browser/media/extensionsViewlet.css @@ -47,6 +47,10 @@ display: flex; } +.extensions-viewlet > .extensions .extension.loading { + background: url('loading.svg') center center no-repeat; +} + .extensions-viewlet > .extensions .extension > .icon { width: 42px; height: 42px; diff --git a/src/vs/workbench/parts/extensions/electron-browser/media/loading.svg b/src/vs/workbench/parts/extensions/electron-browser/media/loading.svg new file mode 100644 index 00000000000..0098fd9f264 --- /dev/null +++ b/src/vs/workbench/parts/extensions/electron-browser/media/loading.svg @@ -0,0 +1,36 @@ + + + + + + + + + + \ No newline at end of file -- GitLab