Render spotlight box as soon as we have data.

r2/r2/public/static/js/base.js

@@ -35,7 +35,6 @@ $(function() {
     r.login.ui.init()
     r.analytics.init()
     r.ui.init()
-    r.spotlight.init()
     r.interestbar.init()
     r.apps.init()
     r.wiki.init()

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

@@ -54,6 +54,8 @@ r.spotlight.setup = function(links, interest_prob, promotion_prob) {
 
     this.interest_prob = interest_prob
     this.promotion_prob = promotion_prob
+
+    this.init()
 }
 
 r.spotlight.chooseRandom = function() {
@@ -168,15 +170,18 @@ r.spotlight.help = function(thing) {
         return
     }
 
-    help.data('HelpBubble').hide(function() {
-        help.find('.help-section').hide()
-        if (thing.hasClass('promoted')) {
-            help.find('.help-promoted').show()
-        } else if (thing.hasClass('interestbar')) {
-            help.find('.help-interestbar').show()
-        } else {
-            help.find('.help-organic').show()
-        }
+    // this function can be called before the help bubble has initialized
+    $(function() {
+        help.data('HelpBubble').hide(function() {
+            help.find('.help-section').hide()
+            if (thing.hasClass('promoted')) {
+                help.find('.help-promoted').show()
+            } else if (thing.hasClass('interestbar')) {
+                help.find('.help-interestbar').show()
+            } else {
+                help.find('.help-organic').show()
+            }
+        })
     })
 }
 

r2/r2/templates/spotlightlisting.html

@@ -89,12 +89,12 @@
       </div>
     </div>
   </div>
-  <script>
-    r.spotlight.setup(
-      ${unsafe(json.dumps(thing.links))},
-      ${unsafe(json.dumps(thing.interestbar_prob))},
-      ${unsafe(json.dumps(thing.promotion_prob))}
-    )
-  </script>
 </div>
+<script>
+  r.spotlight.setup(
+    ${unsafe(json.dumps(thing.links))},
+    ${unsafe(json.dumps(thing.interestbar_prob))},
+    ${unsafe(json.dumps(thing.promotion_prob))}
+  )
+</script>