Defer rendering of each table row for performance.

2 files changed, 27 insertions, 27 deletions

diff --git a/frontend/js/views/DownloadSelector.js b/frontend/js/views/DownloadSelector.js
index 5ddadc4..70b90ae 100644
--- a/frontend/js/views/DownloadSelector.js
+++ b/frontend/js/views/DownloadSelector.js
@@ -61,20 +61,8 @@ var DownloadSelector = Backbone.View.extend({
 	render: function() {
 		if (this.inhibitRendering)
 			return;
-		
-		var that = this;
-		this.$table.empty();
 
-		var newSongRows = {};
-		this.collection.forEach(function(song) {
-			var row;
-			if (song.id in that.songRows)
-				row = newSongRows[song.id] = that.songRows[song.id];
-			else
-				row = newSongRows[song.id] = new SongRow({ model: song, download: true });
-			that.$table.append(row.render().el);
-		});
-		this.songRows = newSongRows;
+		var that = this;
 
 		this.$basketCount.text(this.collection.length);
 		if (this.collection.length) {
@@ -86,6 +74,21 @@ var DownloadSelector = Backbone.View.extend({
 			this.$basketCount.removeClass("badge-info");
 			this.$basketCaret.hide();
 		}
+
+		this.$table.empty();
+		var newSongRows = {};
+		this.collection.forEach(function(song) {
+			var row = null;
+			if (song.id in that.songRows)
+				row = newSongRows[song.id] = that.songRows[song.id];
+			_.defer(function() {
+				if (row == null)
+					row = that.songRows[song.id] = new SongRow({ model: song, download: true });
+				that.$table.append(row.render().el);
+			});
+		});
+		this.songRows = newSongRows;
+
 		this.$tableContainer.width(this.$buttons.width());
 		return this;
 	},
diff --git a/frontend/js/views/SongTable.js b/frontend/js/views/SongTable.js
index 834823c..add31d3 100644
--- a/frontend/js/views/SongTable.js
+++ b/frontend/js/views/SongTable.js
@@ -1,7 +1,7 @@
 var SongTable = Backbone.View.extend({
 	initialize: function() {
 		var that = this;
-		_(this).bindAll("add", "remove", "render", "renderMore");
+		_(this).bindAll("remove", "render", "renderMore", "appendSong");
 
 		this.$songlistContainer = this.$el.find("#songlist-container");
 		this.$tbody = this.$songlistContainer.find("tbody");
@@ -28,34 +28,31 @@ var SongTable = Backbone.View.extend({
 			latestSearchTimer = setTimeout(doSearch, 350);
 		});
 
-		this.listenTo(this.collection, "add", this.add);
 		this.listenTo(this.collection, "remove", this.remove);
 		this.listenTo(this.collection, "reset", this.render);
 		this.listenTo(this.collection, "more", this.renderMore);
 		this.render();
 	},
-	add: function(song) {
-		var row = new SongRow({ model: song });
-		this.songRows[song.id] = row;
-	},
 	remove: function(song) {
-		var row = this.songRows[song.id];
-		delete this.songRows[song.id];
+		if (song.id in this.songRows)
+			delete this.songRows[song.id];
 	},
-	appendSongs: function(songs) {
+	appendSong: function(song) {
 		var that = this;
-		songs.each(function(song) {
-			that.$tbody.append(that.songRows[song.id].render().el);
+		_.defer(function() {
+			var row;
+			if (!(song.id in that.songRows))
+				row = that.songRows[song.id] = new SongRow({ model: song });
+			that.$tbody.append(row.render().el);
 		});
 	},
 	render: function() {
 		this.$tbody.empty().scrollTop(0);
 		this.songRows = {};
-		this.collection.each(this.add);
-		this.appendSongs(this.collection);
+		this.collection.each(this.appendSong);
 		return this;
 	},
 	renderMore: function(more) {
-		this.appendSongs(more);
+		more.each(this.appendSong);
 	}
 });