From ae4f3624ab0166256e2d6378cc8061df709e5754 Mon Sep 17 00:00:00 2001
From: Max Goodman <max@reddit.com>
Date: Thu, 7 Mar 2013 03:52:24 -0800
Subject: [PATCH] spotlight: Add fetch_promo throbber.

---
 r2/r2/public/static/css/reddit.less   | 10 +++++++++-
 r2/r2/public/static/js/spotlight.js   |  9 +++++++++
 r2/r2/templates/spotlightlisting.html |  1 +
 3 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/r2/r2/public/static/css/reddit.less b/r2/r2/public/static/css/reddit.less
index b61707965..941bef1e3 100755
--- a/r2/r2/public/static/css/reddit.less
+++ b/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;
diff --git a/r2/r2/public/static/js/spotlight.js b/r2/r2/public/static/js/spotlight.js
index 017860935..551ba7a32 100644
--- a/r2/r2/public/static/js/spotlight.js
+++ b/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
diff --git a/r2/r2/templates/spotlightlisting.html b/r2/r2/templates/spotlightlisting.html
index aea954e26..313719a5c 100644
--- a/r2/r2/templates/spotlightlisting.html
+++ b/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>