diff --git a/src/vs/base/browser/ui/tree/abstractTree.ts b/src/vs/base/browser/ui/tree/abstractTree.ts
index 3481338b38d2b59080da30abd7717ffb27930687..c9b9e67106c09cc9c1fff7ccabf70a3f91cf386b 100644
--- a/src/vs/base/browser/ui/tree/abstractTree.ts
+++ b/src/vs/base/browser/ui/tree/abstractTree.ts
@@ -151,16 +151,12 @@ class TreeRenderer<T, TFilterData, TTemplateData> implements IListRenderer<ITree
 	}
 
 	private renderTwistie(node: ITreeNode<T, TFilterData>, twistieElement: HTMLElement) {
-		if (this.renderer.renderTwistie && this.renderer.renderTwistie(node.element, twistieElement)) {
-			return;
+		if (this.renderer.renderTwistie) {
+			this.renderer.renderTwistie(node.element, twistieElement);
 		}
 
-		TreeRenderer.renderDefaultTwistie(node, twistieElement);
-	}
-
-	private static renderDefaultTwistie<T>(node: ITreeNode<T, any>, twistie: HTMLElement): void {
-		toggleClass(twistie, 'collapsible', node.collapsible);
-		toggleClass(twistie, 'collapsed', node.collapsed);
+		toggleClass(twistieElement, 'collapsible', node.collapsible);
+		toggleClass(twistieElement, 'collapsed', node.collapsed);
 	}
 
 	dispose(): void {
diff --git a/src/vs/base/browser/ui/tree/dataTree.ts b/src/vs/base/browser/ui/tree/dataTree.ts
index 368ecfef0c985198d6762611c646dd119c3fc845..01ab3b8be26c027230e8b1aaa4a44569b2973434 100644
--- a/src/vs/base/browser/ui/tree/dataTree.ts
+++ b/src/vs/base/browser/ui/tree/dataTree.ts
@@ -12,6 +12,7 @@ import { Emitter, Event, mapEvent } from 'vs/base/common/event';
 import { timeout, always } from 'vs/base/common/async';
 import { ISequence } from 'vs/base/common/iterator';
 import { IListStyles } from 'vs/base/browser/ui/list/listWidget';
+import { toggleClass } from 'vs/base/browser/dom';
 
 export interface IDataSource<T extends NonNullable<any>> {
 	hasChildren(element: T | null): boolean;
@@ -72,11 +73,7 @@ class DataTreeRenderer<T, TFilterData, TTemplateData> implements ITreeRenderer<I
 	}
 
 	renderTwistie(element: IDataTreeNode<T>, twistieElement: HTMLElement): boolean {
-		if (element.state === DataTreeNodeState.Slow) {
-			twistieElement.innerText = '🤨';
-			return true;
-		}
-
+		toggleClass(twistieElement, 'loading', element.state === DataTreeNodeState.Slow);
 		return false;
 	}
 
diff --git a/src/vs/base/browser/ui/tree/media/loading-dark.svg b/src/vs/base/browser/ui/tree/media/loading-dark.svg
new file mode 100644
index 0000000000000000000000000000000000000000..7dc1ebd8cf045f8bfa4c097fad38ef03057ccb87
--- /dev/null
+++ b/src/vs/base/browser/ui/tree/media/loading-dark.svg
@@ -0,0 +1,31 @@
+<?xml version='1.0' standalone='no' ?>
+<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='10px' height='10px'>
+	<style>
+    circle {
+      animation: ball 0.6s linear infinite;
+    }
+
+    circle:nth-child(2) { animation-delay: 0.075s; }
+    circle:nth-child(3) { animation-delay: 0.15s; }
+    circle:nth-child(4) { animation-delay: 0.225s; }
+    circle:nth-child(5) { animation-delay: 0.3s; }
+    circle:nth-child(6) { animation-delay: 0.375s; }
+    circle:nth-child(7) { animation-delay: 0.45s; }
+    circle:nth-child(8) { animation-delay: 0.525s; }
+
+    @keyframes ball {
+      from { opacity: 1; }
+      to { opacity: 0.3; }
+    }
+	</style>
+	<g style="fill:grey;">
+		<circle cx='5' cy='1' r='1' style='opacity:0.3;' />
+		<circle cx='7.8284' cy='2.1716' r='1' style='opacity:0.3;' />
+		<circle cx='9' cy='5' r='1' style='opacity:0.3;' />
+		<circle cx='7.8284' cy='7.8284' r='1' style='opacity:0.3;' />
+		<circle cx='5' cy='9' r='1' style='opacity:0.3;' />
+		<circle cx='2.1716' cy='7.8284' r='1' style='opacity:0.3;' />
+		<circle cx='1' cy='5' r='1' style='opacity:0.3;' />
+		<circle cx='2.1716' cy='2.1716' r='1' style='opacity:0.3;' />
+	</g>
+</svg>
diff --git a/src/vs/base/browser/ui/tree/media/loading-hc.svg b/src/vs/base/browser/ui/tree/media/loading-hc.svg
new file mode 100644
index 0000000000000000000000000000000000000000..c3633c0ddabee926a9d9c0836395674f01848703
--- /dev/null
+++ b/src/vs/base/browser/ui/tree/media/loading-hc.svg
@@ -0,0 +1,31 @@
+<?xml version='1.0' standalone='no' ?>
+<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='10px' height='10px'>
+	<style>
+    circle {
+      animation: ball 0.6s linear infinite;
+    }
+
+    circle:nth-child(2) { animation-delay: 0.075s; }
+    circle:nth-child(3) { animation-delay: 0.15s; }
+    circle:nth-child(4) { animation-delay: 0.225s; }
+    circle:nth-child(5) { animation-delay: 0.3s; }
+    circle:nth-child(6) { animation-delay: 0.375s; }
+    circle:nth-child(7) { animation-delay: 0.45s; }
+    circle:nth-child(8) { animation-delay: 0.525s; }
+
+    @keyframes ball {
+      from { opacity: 1; }
+      to { opacity: 0.3; }
+    }
+	</style>
+	<g style="fill:white;">
+		<circle cx='5' cy='1' r='1' style='opacity:0.3;' />
+		<circle cx='7.8284' cy='2.1716' r='1' style='opacity:0.3;' />
+		<circle cx='9' cy='5' r='1' style='opacity:0.3;' />
+		<circle cx='7.8284' cy='7.8284' r='1' style='opacity:0.3;' />
+		<circle cx='5' cy='9' r='1' style='opacity:0.3;' />
+		<circle cx='2.1716' cy='7.8284' r='1' style='opacity:0.3;' />
+		<circle cx='1' cy='5' r='1' style='opacity:0.3;' />
+		<circle cx='2.1716' cy='2.1716' r='1' style='opacity:0.3;' />
+	</g>
+</svg>
diff --git a/src/vs/base/browser/ui/tree/media/loading.svg b/src/vs/base/browser/ui/tree/media/loading.svg
new file mode 100644
index 0000000000000000000000000000000000000000..e762f06d5e6e8c7fb91e5072db4f36342da1c709
--- /dev/null
+++ b/src/vs/base/browser/ui/tree/media/loading.svg
@@ -0,0 +1,31 @@
+<?xml version='1.0' standalone='no' ?>
+<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='10px' height='10px'>
+	<style>
+    circle {
+      animation: ball 0.6s linear infinite;
+    }
+
+    circle:nth-child(2) { animation-delay: 0.075s; }
+    circle:nth-child(3) { animation-delay: 0.15s; }
+    circle:nth-child(4) { animation-delay: 0.225s; }
+    circle:nth-child(5) { animation-delay: 0.3s; }
+    circle:nth-child(6) { animation-delay: 0.375s; }
+    circle:nth-child(7) { animation-delay: 0.45s; }
+    circle:nth-child(8) { animation-delay: 0.525s; }
+
+    @keyframes ball {
+      from { opacity: 1; }
+      to { opacity: 0.3; }
+    }
+	</style>
+	<g>
+		<circle cx='5' cy='1' r='1' style='opacity:0.3;' />
+		<circle cx='7.8284' cy='2.1716' r='1' style='opacity:0.3;' />
+		<circle cx='9' cy='5' r='1' style='opacity:0.3;' />
+		<circle cx='7.8284' cy='7.8284' r='1' style='opacity:0.3;' />
+		<circle cx='5' cy='9' r='1' style='opacity:0.3;' />
+		<circle cx='2.1716' cy='7.8284' r='1' style='opacity:0.3;' />
+		<circle cx='1' cy='5' r='1' style='opacity:0.3;' />
+		<circle cx='2.1716' cy='2.1716' r='1' style='opacity:0.3;' />
+	</g>
+</svg>
diff --git a/src/vs/base/browser/ui/tree/media/tree.css b/src/vs/base/browser/ui/tree/media/tree.css
index 62a7ea676a4ea3062cdced9829cf566ab54ab87b..5ba7214e8661f59229037f0f187c2b2496910aa7 100644
--- a/src/vs/base/browser/ui/tree/media/tree.css
+++ b/src/vs/base/browser/ui/tree/media/tree.css
@@ -51,4 +51,16 @@
 
 .hc-black .monaco-tl-twistie.collapsible.collapsed {
 	background-image: url("collapsed-hc.svg");
+}
+
+.monaco-tl-twistie.loading {
+	background-image: url("loading.svg");
+}
+
+.vs-dark .monaco-tl-twistie.loading {
+	background-image: url("loading-dark.svg");
+}
+
+.hc-black .monaco-tl-twistie.loading {
+	background-image: url("loading-hc.svg");
 }
\ No newline at end of file
diff --git a/src/vs/base/browser/ui/tree/tree.ts b/src/vs/base/browser/ui/tree/tree.ts
index 719e40d3c7e18f66b52adc5aeb9214093f454af8..4b4a50df0d9a33b0f8ba6d5c79857f9b68f0028d 100644
--- a/src/vs/base/browser/ui/tree/tree.ts
+++ b/src/vs/base/browser/ui/tree/tree.ts
@@ -107,7 +107,7 @@ export interface ITreeModel<T, TFilterData, TRef> {
 }
 
 export interface ITreeRenderer<T, TFilterData, TTemplateData> extends IListRenderer<ITreeNode<T, TFilterData>, TTemplateData> {
-	renderTwistie?(element: T, twistieElement: HTMLElement): boolean;
+	renderTwistie?(element: T, twistieElement: HTMLElement): void;
 	onDidChangeTwistieState?: Event<T>;
 }