Loading in movie lists

couchpotato/core/plugins/movie/static/list.js

@@ -6,6 +6,7 @@ var MovieList = new Class({
 		navigation: true,
 		limit: 50,
 		load_more: true,
+		loader: true,
 		menu: [],
 		add_new: false
 	},
@@ -251,7 +252,7 @@ var MovieList = new Class({
 			'data': Object.merge({
 				'status': self.options.status
 			}, self.filter),
-			'onComplete': function(json){
+			'onSuccess': function(json){
 
 				json.chars.split('').each(function(c){
 					self.letters[c.capitalize()].addClass('available')
@@ -475,12 +476,39 @@ var MovieList = new Class({
 			self.load_more.set('text', 'loading...');
 		}
 
+		if(self.movies.length == 0 && self.options.loader){
+
+			self.loader_first = new Element('div.loading').adopt(
+				new Element('div.message', {'text': self.options.title ? 'Loading \'' + self.options.title + '\'' : 'Loading...'})
+			).inject(self.el, 'top');
+
+			createSpinner(self.loader_first, {
+				radius: 4,
+				length: 4,
+				width: 1
+			});
+
+			self.el.setStyle('min-height', 93);
+
+		}
+
 		Api.request(self.options.api_call || 'movie.list', {
 			'data': Object.merge({
 				'status': self.options.status,
 				'limit_offset': self.options.limit + ',' + self.offset
 			}, self.filter),
-			'onComplete': function(json){
+			'onSuccess': function(json){
+
+				if(self.loader_first){
+					var lf = self.loader_first;
+					self.loader_first.addClass('hide')
+					self.loader_first = null;
+					setTimeout(function(){
+						lf.destroy();
+					}, 20000);
+					self.el.setStyle('min-height', null);
+				}
+
 				self.store(json.movies);
 				self.addMovies(json.movies, json.total);
 				if(self.scrollspy) {
@@ -488,7 +516,7 @@ var MovieList = new Class({
 					self.scrollspy.start();
 				}
 
-				self.checkIfEmpty()
+				self.checkIfEmpty();
 			}
 		});
 	},
@@ -518,7 +546,7 @@ var MovieList = new Class({
 			self.description[is_empty ? 'hide' : 'show']()
 
 		if(is_empty && self.options.on_empty_element){
-			self.el.grab(self.options.on_empty_element);
+			self.options.on_empty_element.inject(self.loader_first || self.title || self.movie_list, 'after');
 
 			if(self.navigation)
 				self.navigation.hide();

couchpotato/core/plugins/movie/static/movie.css

@@ -4,7 +4,33 @@
 	z-index: 3;
 }
 
-	.movies h2 {
+	.movies .loading {
+		display: block;
+		padding: 20px 0 0 0;
+		width: 100%;
+		z-index: 3;
+		transition: all .4s cubic-bezier(0.9,0,0.1,1);
+		height: 40px;
+		opacity: 1;
+		position: absolute;
+		text-align: center;
+	}
+		.movies .loading.hide {
+			height: 0;
+			padding: 20px 0 0 0;
+			opacity: 0;
+			margin-top: -20px;
+		}
+		
+		.movies .loading .spinner {
+			display: inline-block;
+		}
+		
+		.movies .loading .message {
+			margin: 0 20px;
+		}
+
+	.movies > h2 {
 		margin-bottom: 20px;	
 	}
 	
@@ -27,6 +53,7 @@
 	.home .movies {
 		padding-top: 6px;
 	}
+	
 
 	.movies.mass_edit_list {
 		padding-top: 90px;

couchpotato/static/scripts/page/home.js

@@ -25,7 +25,18 @@ Page.Home = new Class({
 			'view': 'list',
 			'actions': [MA.IMDB, MA.Trailer, MA.Release, MA.Refresh, MA.Delete],
 			'title': 'Snatched & Available',
-			'on_empty_element': new Element('div'),
+			'description': 'These movies have been snatched or have finished downloading',
+			'on_empty_element': new Element('div').adopt(
+				new Element('h2', {'text': 'Snatched & Available'}),
+				new Element('span', {
+					'html': 'No snatched movies or anything!? Damn.. <a>Maybe add a movie.</a>',
+					'events': {
+						'click': function(){
+							$(document.body).getElement('.search_form input').focus();
+						}
+					}
+				})
+			),
 			'filter': {
 				'release_status': 'snatched,available'
 			}
@@ -39,7 +50,7 @@ Page.Home = new Class({
 			'title': 'Available soon',
 			'description': 'These are being searched for and should be available soon as they will be released on DVD in the next few weeks.',
 			'on_empty_element': new Element('div').adopt(
-				new Element('h1', {'text': 'Available soon'}),
+				new Element('h2', {'text': 'Available soon'}),
 				new Element('span', {'text': 'There are no movies available soon. Add some movies, so you have something to watch later.'})
 			),
 			'filter': {
@@ -58,10 +69,10 @@ Page.Home = new Class({
 			'limit': 50,
 			'title': 'Still not available',
 			'description': 'Try another quality profile or maybe add more providers in <a href="'+App.createUrl('settings/searcher/providers/')+'">Settings</a>.',
-			'on_empty_element': new Element('div'),
 			'filter': {
 				'late': true
 			},
+			'loader': false,
 			'load_more': false,
 			'view': 'list',
 			'actions': [MA.IMDB, MA.Trailer, MA.Edit, MA.Refresh, MA.Delete],