spotlight: Add fetch_promo throbber.

r2/r2/public/static/css/reddit.less

@@ -977,10 +977,18 @@ a.author { margin-right: 0.5em; }
     z-index: 1;
 }
 
-.organic-listing .nextprev .arrow {
+.organic-listing .nextprev .arrow, .organic-listing .nextprev .throbber {
     width: 21px;
     height: 21px;
     margin: 5px 5px 2px 0px;
+}
+
+.organic-listing .nextprev .throbber {
+    vertical-align: top;
+    background-position: center center;
+}
+
+.organic-listing .nextprev .arrow {
     border: solid 1px #B3B3B3;
     display: inline-block;
     position: relative;

r2/r2/public/static/js/spotlight.js

@@ -117,17 +117,26 @@ r.spotlight._materializePos = function(pos) {
 
 r.spotlight._advance = function(dir) {
     var listing = $('.organic-listing'),
+        $nextprev = listing.find('.nextprev'),
         visible = listing.find('.thing:visible'),
         nextPos = this._advancePos(dir),
         $next = this._materializePos(nextPos)
 
+    var showWorking = setTimeout(function() {
+        $nextprev.toggleClass('working', $next.state && $next.state() == 'pending')
+    }, 200)
+
     this.lineup.pos = nextPos
     $.when($next).done(_.bind(function($next) {
+        clearTimeout(showWorking)
+
         if (this.lineup.pos != nextPos) {
             // we've been passed!
             return
         }
 
+        $nextprev.removeClass('working')
+
         // size the rank element so that spotlight box
         // items line up with the main page listing
         $next

r2/r2/templates/spotlightlisting.html

@@ -42,6 +42,7 @@
   %endif
 
   <div class="nextprev">
+    <div class="throbber"></div>
     <button class="arrow prev">${_("prev")}</button>
     <button class="arrow next">${_("next")}</button>
   </div>