defer load makes initial page load really fast

mojits/flickr/binders/index.js

@@ -41,6 +41,7 @@ YUI.add('flickrBinderIndex', function(Y, NAME) {
                 var args = {
                     params: {
                         route: {
+                            defer:true,
                             searchTerm:search.val,
                             numofImages:(search.num || 10 )
                         }
@@ -49,6 +50,13 @@ YUI.add('flickrBinderIndex', function(Y, NAME) {
                 this.mojitProxy.refreshView(args);
             }, this);
 
+
+            var args = {params: {route: {
+                    defer:true
+            }}};
+            this.mojitProxy.refreshView(args);
+
+            /*
             var scrollview_bookmarked_friends = new Y.ScrollView({
                 srcNode:this.node.one('#flickr-farm-container'),
                 deceleration: 0.9,
@@ -66,7 +74,7 @@ YUI.add('flickrBinderIndex', function(Y, NAME) {
             Y.on('resize', function (e) {
                 scrollview_bookmarked_friends.syncUI();
             });
-
+            */
 
         }
 

mojits/flickr/controller.server.js

@@ -29,10 +29,19 @@ YUI.add('flickr', function(Y, NAME) {
          *        to the Mojito API.
          */
         index: function(ac) {
+
+            ac.assets.addCss('./index.css');
+            if(!ac.params.getFromRoute('defer')){
+                var loaderImg1 = 'http://a.l.yimg.com/a/i/us/sch/mob/spinner-white-small.gif';
+                var loaderImg2 = 'http://a.l.yimg.com/a/i/us/sch/mob/spinner-1.0.0.gif';
+                return  ac.done();
+            }
+
+
             var searchTerm = ac.params.getFromRoute('searchTerm') || 'Yahoo';
             var defaultnumofImages  = 10;
             var number = ac.params.getFromRoute('numofImages') || defaultnumofImages;
-            ac.assets.addCss('./index.css');
+
 
 
             ac.models.flickrModelFoo.getPics(searchTerm,number, function(err, rsp) {

mojits/instagram/assets/index.css

@@ -7,6 +7,28 @@
 }
 
 
+.login-insta {
+  position:relative;
+  top:80px;
+  left:80px;
+  font-size:2em !important;
+  border:1px solid #ccc;
+  border-radius:14px;
+  padding:10px !important;
+  box-shadow:0px 0px 5px #ccc;
+  background:#fff;
+}
+
+.login-insta:hover{
+  box-shadow:0px 3px 8px #ccc;
+  -webkit-transition:all 0.3s;
+}
+.login-insta:active{
+  border:1px solid #888;
+  box-shadow:none;
+
+  background:#ccc;
+}
 
 
 

mojits/instagram/binders/index.js

@@ -40,29 +40,37 @@ YUI.add('instagramBinderIndex', function(Y, NAME) {
                 //alert(search.val);
                 console.log('on SEARCH_UPDATE:Instagram'+search.val);
                 args = {params: {route: {
+                        defer:true,
                         searchTerm:search.val,
                         numofImages:(search.num || 10)}
                 }};
                 this.mojitProxy.refreshView(args);
             }, this);
 
-            var scrollview_bookmarked_friends = new Y.ScrollView({
+
+            args = {params: {route: {
+                    defer:true
+            }}};
+            this.mojitProxy.refreshView(args);
+
+            /*var scrollview_bookmarked_friends = new Y.ScrollView({
                 srcNode:this.node.one('#instagram-farm-container'),
                 deceleration: 0.9,
                 bounce:0.1,
                 flick: {
                     minDistance:10,
                     minVelocity:0.1,
-                    axis: "y"
+                    axis: "x"
                 }
             });
+            
             setTimeout(function(){
                 scrollview_bookmarked_friends.syncUI();
             },4000);
             scrollview_bookmarked_friends.render();
             Y.on('resize', function (e) {
                 scrollview_bookmarked_friends.syncUI();
-            });
+            });*/
 
         }
 

mojits/instagram/controller.server.js

@@ -31,6 +31,15 @@ YUI.add('instagram', function(Y, NAME) {
         index: function(ac) {
 
             ac.assets.addCss('./index.css');
+
+
+            if(!ac.params.getFromRoute('defer')){
+                var loaderImg1 = 'http://a.l.yimg.com/a/i/us/sch/mob/spinner-white-small.gif';
+                var loaderImg2 = 'http://a.l.yimg.com/a/i/us/sch/mob/spinner-1.0.0.gif';
+                return  ac.done();
+            }
+
+
             var defaultnumofImages  = 10;
             var searchTerm = ac.params.getFromRoute('searchTerm')||'yahoo';
             var numofImages = ac.params.getFromRoute('numofImages')|| defaultnumofImages;
@@ -91,7 +100,7 @@ YUI.add('instagram', function(Y, NAME) {
                     imageData = self.processImages(imageData,numofImages);
                     console.log(imageData[0]);
 
-                    ac.done({instagram:imageData});
+                    ac.done({loggedIn:{instagram:imageData}});
                 } else{
                     ac.done({});
                 }

mojits/instagram/views/index.mu.html

@@ -2,10 +2,12 @@
 	<h1 style="display:none;" class="splash">Instagram:{{searchTerm}}</h1>
 
 	{{#login}}
-	<a href='https://instagram.com/oauth/authorize/?client_id=8f63cc3549334db9af117974274f2afe&redirect_uri=http://localhost:8001/&response_type=code' class="splash">LOGIN INSTAGRAM </a>
+	<a class="login-insta" href='https://instagram.com/oauth/authorize/?client_id=8f63cc3549334db9af117974274f2afe&redirect_uri=http://localhost:8001/&response_type=code' class="splash">GET INSTAGRAM PICS</a>
 	{{/login}}
 
 
+
+	{{#loggedIn}}
 	<div id='instagram-farm-container'>
 		<h2 class='instafont'> Instagram</h2>
 		<ul>
@@ -25,6 +27,7 @@ <h2 class='instafont'> Instagram</h2>
 	{{/instagram}}
 		</ul>
 	</div>
+		{{/loggedIn}}
 
 	{{#error}}
 		{{msg}}