fix search spinner sticking around after clearing search text + make the "Requested" and "Available" indicators in the search page different colors

PlexRequests.UI/Content/search.js

@@ -30,7 +30,6 @@ $(function () {
         if (searchTimer) {
             clearTimeout(searchTimer);
         }
-        $('#movieSearchButton').attr("class", "fa fa-spinner fa-spin");
         searchTimer = setTimeout(movieSearch, 400);
 
     });
@@ -50,7 +49,6 @@ $(function () {
         if (searchTimer) {
             clearTimeout(searchTimer);
         }
-        $('#tvSearchButton').attr("class", "fa fa-spinner fa-spin");
         searchTimer = setTimeout(tvSearch, 400);
     });
 
@@ -90,7 +88,6 @@ $(function () {
         if (searchTimer) {
             clearTimeout(searchTimer);
         }
-        $('#musicSearchButton').attr("class", "fa fa-spinner fa-spin");
         searchTimer = setTimeout(musicSearch, 400);
 
     });
@@ -175,7 +172,7 @@ $(function () {
 
     function movieSearch() {
         var query = $("#movieSearchContent").val();
-        getMovies("/search/movie/" + query);
+        query ? getMovies("/search/movie/" + query) : resetMovies();
     }
 
     function moviesComingSoon() {
@@ -187,9 +184,9 @@ $(function () {
     }
 
     function getMovies(url) {
-        $("#movieList").html("");
+        resetMovies();
-
 
+        $('#movieSearchButton').attr("class", "fa fa-spinner fa-spin");
         $.ajax(url).success(function (results) {
             if (results.length > 0) {
                 results.forEach(function (result) {
@@ -206,14 +203,19 @@ $(function () {
         });
     };
 
+    function resetMovies() {
+        $("#movieList").html("");
+    }
+
     function tvSearch() {
         var query = $("#tvSearchContent").val();
-        getTvShows("/search/tv/" + query);
+        query ? getTvShows("/search/tv/" + query) : resetTvShows();
     }
 
     function getTvShows(url) {
-        $("#tvList").html("");
+        resetTvShows();
 
+        $('#tvSearchButton').attr("class", "fa fa-spinner fa-spin");
         $.ajax(url).success(function (results) {
             if (results.length > 0) {
                 results.forEach(function (result) {
@@ -229,14 +231,19 @@ $(function () {
         });
     };
 
+    function resetTvShows() {
+        $("#tvList").html("");
+    }
+
     function musicSearch() {
         var query = $("#musicSearchContent").val();
-        getMusic("/search/music/" + query);
+        query ? getMusic("/search/music/" + query) : resetMusic();
     }
 
     function getMusic(url) {
-        $("#musicList").html("");
+        resetMusic();
 
+        $('#musicSearchButton').attr("class", "fa fa-spinner fa-spin");
         $.ajax(url).success(function (results) {
             if (results.length > 0) {
                 results.forEach(function (result) {
@@ -254,6 +261,10 @@ $(function () {
         });
     };
 
+    function resetMusic() {
+        $("#musicList").html("");
+    }
+
     function getCoverArt(artistId) {
         $.ajax("/search/music/coverart/" + artistId).success(function (result) {
             if (result) {

PlexRequests.UI/Views/Search/Index.cshtml

@@ -128,7 +128,7 @@
                 <button style="text-align: right" class="btn btn-success-outline disabled" disabled><i class="fa fa-check"></i> Available</button>
                 {{else}}
                     {{#if_eq requested true}}
-                    <button style="text-align: right" class="btn btn-success-outline disabled" disabled><i class="fa fa-check"></i> Requested</button>
+                    <button style="text-align: right" class="btn btn-primary-outline disabled" disabled><i class="fa fa-check"></i> Requested</button>
                     {{else}}
                         {{#if_eq type "movie"}}
                             <button id="{{id}}" style="text-align: right" class="btn btn-primary-outline requestMovie" type="submit"><i class="fa fa-plus"></i> Request</button>