bring back extension loading indicator

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);
+			});
 		});
 	}
 

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%;
 }

src/vs/workbench/parts/extensions/browser/media/loading.svg

+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="575" height="6px">
+  <style>
+    circle {
+      animation: ball 2.5s cubic-bezier(0.000, 1.000, 1.000, 0.000) infinite;
+      fill: #bbb;
+    }
+
+    #balls {
+      animation: balls 2.5s linear infinite;
+    }
+
+    #circle2 { animation-delay: 0.1s; }
+    #circle3 { animation-delay: 0.2s; }
+    #circle4 { animation-delay: 0.3s; }
+    #circle5 { animation-delay: 0.4s; }
+
+    @keyframes ball {
+      from { transform: none; }
+      20% { transform: none; }
+      80% { transform: translateX(864px); }
+      to { transform: translateX(864px); }
+    }
+
+    @keyframes balls {
+      from { transform: translateX(-40px); }
+      to { transform: translateX(30px); }
+    }
+  </style>
+  <g id="balls">
+    <circle class="circle" id="circle1" cx="-115" cy="3" r="3"/>
+    <circle class="circle" id="circle2" cx="-130" cy="3" r="3" />
+    <circle class="circle" id="circle3" cx="-145" cy="3" r="3" />
+    <circle class="circle" id="circle4" cx="-160" cy="3" r="3" />
+    <circle class="circle" id="circle5" cx="-175" cy="3" r="3" />
+  </g>
+</svg>
\ No newline at end of file

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;

src/vs/workbench/parts/extensions/electron-browser/media/loading.svg

+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="575" height="6px">
+  <style>
+    circle {
+      animation: ball 2.5s cubic-bezier(0.000, 1.000, 1.000, 0.000) infinite;
+      fill: #bbb;
+    }
+
+    #balls {
+      animation: balls 2.5s linear infinite;
+    }
+
+    #circle2 { animation-delay: 0.1s; }
+    #circle3 { animation-delay: 0.2s; }
+    #circle4 { animation-delay: 0.3s; }
+    #circle5 { animation-delay: 0.4s; }
+
+    @keyframes ball {
+      from { transform: none; }
+      20% { transform: none; }
+      80% { transform: translateX(864px); }
+      to { transform: translateX(864px); }
+    }
+
+    @keyframes balls {
+      from { transform: translateX(-40px); }
+      to { transform: translateX(30px); }
+    }
+  </style>
+  <g id="balls">
+    <circle class="circle" id="circle1" cx="-115" cy="3" r="3"/>
+    <circle class="circle" id="circle2" cx="-130" cy="3" r="3" />
+    <circle class="circle" id="circle3" cx="-145" cy="3" r="3" />
+    <circle class="circle" id="circle4" cx="-160" cy="3" r="3" />
+    <circle class="circle" id="circle5" cx="-175" cy="3" r="3" />
+  </g>
+</svg>
\ No newline at end of file