Add some spinners to the page on top of things that take a while.

Author: dylemma

codepulse/src/main/resources/toserve/pages/traces/traces.css

@@ -24,8 +24,13 @@ body > .overlay:before {
 
  .main-column {
  	width: calc(100% - 250px);
- 	/*float: left;*/
- 	padding-top: 45px;
+ 	margin-top: 45px;
+ 	min-height: 200px;
+ }
+
+ .main-column > .overlay {
+ 	background-color: transparent;
+ 	z-index: 1;
  }
 
  .side-column {
@@ -130,6 +135,10 @@ body > .overlay:before {
  	margin-top: 5px;
  }
 
+ .traces-scope {
+ 	min-height: 200px;
+ }
+
  .traces-scope:before, .traces-scope:after {
  	display: table;
  	line-height: 0;

codepulse/src/main/resources/toserve/pages/traces/traces.js

@@ -28,6 +28,7 @@ function logTime(label, func) {
 $(document).ready(function(){
 
 	var treemapContainer = $('#treemap-container'),
+		packagesContainer = $('#packages'),
 
 		// initialize a treemap widget
 		treemapWidget = new CodebaseTreemap('#treemap-container .widget-body').nodeSizing('line-count')
@@ -161,6 +162,10 @@ $(document).ready(function(){
 		$('#treemap').toggleClass('in-view', show)
 	})
 
+	// Start a spinner to indicate that the package list is loading. 
+	// It will be stopped after the PackageController is created.
+	packagesContainer.overlay('wait')
+
 	/*
 	 * Request the treemap data from the server. Note that coverage lists
 	 * are only specified for the most specific element; for the sake of 
@@ -174,7 +179,9 @@ $(document).ready(function(){
 	Trace.onTreeDataReady(function(){
 		var packageTree = Trace.packageTree
 
-		var controller = new PackageController(packageTree, $('#packages'), $('#totals'), $('#clear-selections-button'))
+		var controller = new PackageController(packageTree, packagesContainer, $('#totals'), $('#clear-selections-button'))
+
+		packagesContainer.overlay('ready')
 
 		// When the selection of "instrumented" packages changes, trigger a coloring update
 		// on the treemap, since nodes get special treatment if they are uninstrumented.
@@ -248,7 +255,14 @@ $(document).ready(function(){
 			.nodeColoring(treemapColoring())
 
 		treemapData.onValue(function(tree){
-			treemapWidget.data(tree).update()
+			treemapContainer.overlay('wait')
+			// put the following in a callback so the overlay has a chance to trigger
+			// (the treemap data update can be expensive, and since it modifies the DOM,
+			// the overlay may never actually show up because the DOM is being blocked.)
+			setTimeout(function(){
+				treemapWidget.data(tree).update()
+				treemapContainer.overlay('ready')
+			}, 1)
 		})
 
 		Trace.coverageRecords.onValue(setTreemapCoverage)

codepulse/src/main/resources/toserve/widgets/overlay/overlay.js

@@ -9,10 +9,11 @@ $(document).ready(function(){
 
 function Overlay(container, _opts){
 
-	var opts = _opts || { radius: 4, length: 7, width: 4, lines: 10 }
+	var opts = _opts || { radius: 4, length: 7, width: 4, lines: 10, spinnerOnly: false }
 
 	var spinner = new Spinner(opts)
 	var $overlay = $("<div class='overlay'>")
+	var spinnerOnly = opts['spinnerOnly']
 	var overlay = $overlay[0]
 
 	$(container).addClass("overlay-container")
@@ -23,7 +24,7 @@ function Overlay(container, _opts){
 		if(!activated){
 			$(container).addClass("overlay-waiting")
 			activated = true
-			$overlay.appendTo(container)
+			if(!spinnerOnly) $overlay.appendTo(container)
 			spinner.spin(overlay)
 		}
 	}
@@ -33,7 +34,7 @@ function Overlay(container, _opts){
 			$(container).removeClass("overlay-waiting")
 			activated = false
 			spinner.stop()
-			$overlay.detach()
+			if(!spinnerOnly) $overlay.detach()
 		}
 	}