more add series updates.

NzbDrone.Web/NzbDrone.Web.csproj

@@ -385,6 +385,8 @@
     <Content Include="_backboneApp\JsLibraries\backbone.js" />
     <Content Include="_backboneApp\JsLibraries\backbone.marionette.js" />
     <Content Include="_backboneApp\AddSeries\addSeriesLayoutTemplate.html" />
+    <Content Include="_backboneApp\Shared\SpinnerTemplate.html" />
+    <Content Include="_backboneApp\Shared\SpinnerView.js" />
     <None Include="_backboneApp\JsLibraries\jquery-1.8.2.intellisense.js" />
     <Content Include="_backboneApp\JsLibraries\backbone.collectionbinder.js" />
     <Content Include="_backboneApp\JsLibraries\backbone.debug.js" />

NzbDrone.Web/_backboneApp/AddSeries/AddNewSeries/AddNewSeriesTemplate.html

@@ -1,8 +1,9 @@
 <div class="tab-pane" id="add-new">
-    <div class="input-prepend nz-input-large search">
+    <div class="input-prepend nz-input-large search row">
         <i class="add-on icon-search"></i>
         <input type="text" class="span10" placeholder="Start typing the name of series you want to add ...">
     </div>
-    <div id="search-result" class="result-list span12 offset4">
+    <div class="row">
+        <div id="search-result" class="result-list span12 offset4" />
     </div>
 </div>

NzbDrone.Web/_backboneApp/AddSeries/AddNewSeries/AddNewSeriesView.js

@@ -5,7 +5,7 @@
 NzbDrone.AddSeries.SearchItemView = Backbone.Marionette.ItemView.extend({
 
     template: "AddSeries/AddNewSeries/SearchResultTemplate",
-    className: 'well',
+    className: 'search-item-view well',
     onRender: function () {
         NzbDrone.ModelBinder.bind(this.model, this.el);
     }
@@ -36,9 +36,8 @@ NzbDrone.AddSeries.AddNewSeriesView = Backbone.Marionette.Layout.extend({
 
     collection: new NzbDrone.AddSeries.SearchResultCollection(),
 
-    onRender: function () {
 
-        //NzbDrone.Router.navigate(this.route, { trigger: true });
+    onRender: function () {
         console.log('binding auto complete');
         var self = this;
 
@@ -49,20 +48,27 @@ NzbDrone.AddSeries.AddNewSeriesView = Backbone.Marionette.Layout.extend({
                 self.$el.data('timeout', setTimeout(self.search, 500, self));
             });
 
-        this.searchResult.show(new NzbDrone.AddSeries.SearchResultView({ collection: this.collection }));
+        this.resultView = new NzbDrone.AddSeries.SearchResultView({ collection: this.collection });
+
     },
 
     search: function (context) {
 
         var term = context.ui.seriesSearch.val();
-
-        if (term == "") {
         context.collection.reset();
-        } else {
-            console.log(term);
-            context.collection.fetch({ data: $.param({ term: term }) });
+
+        if (term != "") {
+            context.searchResult.show(new NzbDrone.Shared.SpinnerView());
+
+            context.collection.fetch({
+                data: $.param({ term: term }),
+                success: function () {
+                    context.searchResult.show(context.resultView);
                 }
                 
-
+            });
+        } else {
+            context.searchResult.close();
+        }
     },
 });

NzbDrone.Web/_backboneApp/AddSeries/AddNewSeries/SearchResultTemplate.html

@@ -1,7 +1,5 @@
 <div class="result-item row">
     <div>
-        <a href="http://thetvdb.com/?tab=series&id={{id}}" target="_blank" class="icon-link"></a>{{seriesName}} ({{seriesYear}})
-        <div class="btn btn-info pull-right icon-plus" />
+        <a href="http://thetvdb.com/?tab=series&id={{id}}" target="_blank" class="icon-info-sign"></a>{{seriesName}} ({{seriesYear}})
     </div>
-
 </div>

NzbDrone.Web/_backboneApp/AddSeries/AddSeriesLayout.js

@@ -1,6 +1,7 @@
 /// <reference path="../app.js" />
 /// <reference path="AddNewSeries/AddNewSeriesView.js" />
 /// <reference path="RootDir/RootDirView.js" />
+/// <reference path="../Shared/SpinnerView.js" />
 
 NzbDrone.AddSeries.AddSeriesLayout = Backbone.Marionette.Layout.extend({
     template: "AddSeries/addSeriesLayoutTemplate",

NzbDrone.Web/_backboneApp/AddSeries/addSeries.css

@@ -29,6 +29,10 @@
     padding-left: 20px;
 }
 
+.result-item *[class*='icon-'] {
+    padding-right: 10px;
+}
+
 .result-list .result-item a {
     font-size: 20px;
 }

NzbDrone.Web/_backboneApp/Content/base.css

@@ -51,3 +51,10 @@ body {
     #footer a:hover {
         text-decoration: underline;
     }
+
+
+.nz-spinner {
+    font-size: 56px;
+    text-align: center;
+    padding: 30px;
+}

NzbDrone.Web/_backboneApp/Shared/SpinnerTemplate.html

@@ -0,0 +1 @@
+<i class="icon-spinner icon-spin"></i>

NzbDrone.Web/_backboneApp/Shared/SpinnerView.js

@@ -0,0 +1,8 @@
+/// <reference path="../app.js" />
+
+NzbDrone.Shared.SpinnerView = Backbone.Marionette.ItemView.extend({
+
+    template: "Shared/SpinnerTemplate",
+    className: 'nz-spinner row',
+   
+});

NzbDrone.Web/_backboneApp/app.js

@@ -18,6 +18,7 @@ if (typeof console == "undefined") {
 
 NzbDrone = new Backbone.Marionette.Application();
 NzbDrone.AddSeries = NzbDrone.module("AddSeries");
+NzbDrone.Shared = NzbDrone.module("Shared");
 
 _.templateSettings = {
     interpolate: /\{\{([\s\S]+?)\}\}/g
@@ -41,7 +42,6 @@ NzbDrone.Routes = {
     },
 };
 
-http://localhost:65079/_backboneApp/Content
 NzbDrone.Controller = Backbone.Marionette.Controller.extend({
 
     addSeries: function () {