From 924a88b5c04658bfbd31bbb8dd8e3a5776622264 Mon Sep 17 00:00:00 2001
From: Robin Ward <robin.ward@gmail.com>
Date: Thu, 28 Nov 2013 14:17:58 -0500
Subject: [PATCH] Different Slack ratio on Touch devices, show loading
 indicator

---
 .../views/cloaked_collection_view.js          | 23 +++++++++++++++----
 .../discourse/views/cloaked_view.js           |  2 ++
 2 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/app/assets/javascripts/discourse/views/cloaked_collection_view.js b/app/assets/javascripts/discourse/views/cloaked_collection_view.js
index e03b0a28f..54645b175 100644
--- a/app/assets/javascripts/discourse/views/cloaked_collection_view.js
+++ b/app/assets/javascripts/discourse/views/cloaked_collection_view.js
@@ -6,9 +6,6 @@
   @namespace Discourse
   @module Discourse
 **/
-
-var SLACK_RATIO = 0.75;
-
 Discourse.CloakedCollectionView = Ember.CollectionView.extend(Discourse.Scrolling, {
   topVisible: null,
   bottomVisible: null,
@@ -17,6 +14,10 @@ Discourse.CloakedCollectionView = Ember.CollectionView.extend(Discourse.Scrollin
     var cloakView = this.get('cloakView'),
         idProperty = this.get('idProperty') || 'id';
 
+    // Give ourselves more slack on touch devices
+    // this.set('slackRatio', Discourse.touch ? 1.5 : 0.75);
+    this.set('slackRatio', 1.0);
+
     this.set('itemViewClass', Discourse.CloakedView.extend({
       classNames: [cloakView + '-cloak'],
       cloaks: Em.String.classify(cloakView) + 'View',
@@ -89,7 +90,7 @@ Discourse.CloakedCollectionView = Ember.CollectionView.extend(Discourse.Scrollin
         $w = $(window),
         windowHeight = $w.height(),
         windowTop = $w.scrollTop(),
-        slack = Math.round(windowHeight * SLACK_RATIO),
+        slack = Math.round(windowHeight * this.get('slackRatio')),
         viewportTop = windowTop - slack,
         windowBottom = windowTop + windowHeight,
         viewportBottom = windowBottom + slack,
@@ -132,12 +133,24 @@ Discourse.CloakedCollectionView = Ember.CollectionView.extend(Discourse.Scrollin
       this.setProperties({topVisible: null, bottomVisible: null});
     }
 
-    var toCloak = childViews.slice(0, topView).concat(childViews.slice(bottomView+1));
+    var toCloak = childViews.slice(0, topView).concat(childViews.slice(bottomView+1)),
+        loadingView = childViews[bottomView + 1];
+
     Em.run.schedule('afterRender', function() {
       toUncloak.forEach(function (v) { v.uncloak(); });
       toCloak.forEach(function (v) { v.cloak(); });
     });
 
+    // for (var j=bottomView; j<childViews.length; j++) {
+    //   var checkView = childViews[j];
+    //   if (!checkView.get('containedView')) {
+    //     if (!checkView.get('loading')) {
+    //       checkView.$().html("<div class='spinner'>" + I18n.t('loading') + "</div>");
+    //     }
+    //     return;
+    //   }
+    // }
+
   },
 
   didInsertElement: function() {
diff --git a/app/assets/javascripts/discourse/views/cloaked_view.js b/app/assets/javascripts/discourse/views/cloaked_view.js
index 890949bae..fd1f343f7 100644
--- a/app/assets/javascripts/discourse/views/cloaked_view.js
+++ b/app/assets/javascripts/discourse/views/cloaked_view.js
@@ -14,6 +14,7 @@ Discourse.CloakedView = Discourse.View.extend({
     this.uncloak();
   },
 
+
   /**
     Triggers the set up for rendering a view that is cloaked.
 
@@ -24,6 +25,7 @@ Discourse.CloakedView = Discourse.View.extend({
     if (!containedView) {
       this.setProperties({
         style: null,
+        loading: false,
         containedView: this.createChildView(Discourse[this.get('cloaks')], { content: this.get('content') })
       });