Add a loading state to the sidebar

btaylor · Mar 30, 2011 · c9e2076 · c9e2076
1 parent 8037450
commit c9e2076
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 2 deletions.
diff --git a/site_media/berserk/css/screen.css b/site_media/berserk/css/screen.css
@@ -403,6 +403,10 @@ img a {
     overflow: auto;
 }
 
+#timeline-sidebar-detail.loading {
+    background: #FFFFFF url('../images/spinner-white.gif') center center no-repeat;
+}
+
 #timeline-sidebar-detail p {
     margin: 0;
     padding: 0;

diff --git a/site_media/berserk/images/spinner-white.gif b/site_media/berserk/images/spinner-white.gif
diff --git a/site_media/berserk/js/sidebar.js b/site_media/berserk/js/sidebar.js
@@ -89,6 +89,14 @@ Sidebar.prototype = {
 			data.update();
 	},
 
+	_setLoading : function (isLoading) {
+		var detail = $('#timeline-sidebar-detail');
+		if (isLoading)
+			detail.empty().addClass('loading');
+		else
+			detail.removeClass('loading');
+	},
+
 	_updateEventDisplay : function (id, time, message, task, comment) {
 		var timestr = this._dateFormatter.getDateTimeString(new Date(time * 1000));
 		$('#timeline-sidebar-event').empty()
@@ -107,8 +115,7 @@ Sidebar.prototype = {
 		if (this._activeTimeout)
 			clearTimeout(this._activeTimeout);
 
-		// TODO: show loading spinner
-		$('#timeline-sidebar-detail').empty();
+		this._setLoading(true);
 
 		var url = this._options.eventDetailUrl.replace('99', id);
 
@@ -121,6 +128,7 @@ Sidebar.prototype = {
 				if (klass._selectedId != id)
 					return;
 
+				klass._setLoading(false);
 				$('#timeline-sidebar-detail').html(data.detail);
 				$('#timeline-sidebar-commands').html(data.commands);