Improve the loading of pins and overall speed

pinry/static/css/pinry.css

@@ -133,6 +133,7 @@ textarea {
     -webkit-box-shadow: 0 1px 0 #bbb;
        -moz-box-shadow: 0 1px 0 #bbb;
             box-shadow: 0 1px 0 #bbb;
+    display: none;
     position: absolute;
     width: 240px;
 }
@@ -143,7 +144,6 @@ textarea {
     -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
             border-radius: 4px;
-    display: none;
     position: absolute;
     right: 7px;
     top: 7px;
@@ -163,6 +163,12 @@ textarea {
     display: inline-block;
 }
 
+.pin .image-wrapper {
+    background-image: url("../img/loader.gif");
+    background-position: center center;
+    background-repeat: no-repeat;
+}
+
 .pin img {
     -webkit-border-top-left-radius: 3px;
         -moz-border-radius-topleft: 3px;
@@ -172,6 +178,7 @@ textarea {
             border-top-right-radius: 3px;
     cursor: -webkit-zoom-in;
     cursor:    -moz-zoom-in;
+    display: none;
     margin: 0;
     padding: 0;
     width: 240px;
@@ -226,8 +233,11 @@ textarea {
 
 .spinner {
     background: url('../img/loader.gif');
+    background-position: center center;
+    background-repeat: no-repeat;
     height: 31px;
     margin: 0 auto;
+    padding: 50px;
     width: 31px;
 }
 

pinry/static/js/pin-form.js

@@ -33,6 +33,8 @@ $(window).load(function() {
         preview.html(html);
         preview.find('.pin').width(200);
         preview.find('.pin .text').width(140);
+        preview.find('.pin').fadeIn(300);
+        preview.find('.image-wrapper img').fadeIn(300);
         if (preview.find('.pin').height() > 305)
             $('#pin-form .modal-body').height(preview.find('.pin').height());
     }
@@ -59,7 +61,7 @@ $(window).load(function() {
             formFields[i].bind('propertychange keyup input paste', function() {
                 createPinPreviewFromForm();
                 if (!uploadedImage)
-                    $('#pin-form-image-upload').parent().parent().css('display', 'none');
+                    $('#pin-form-image-upload').parent().parent().fadeOut(300);
             });
         }
         // Drag and Drop Upload
@@ -76,7 +78,7 @@ $(window).load(function() {
                 }
             }
         }).on('complete', function(e, id, name, data) {
-            $('#pin-form-image-url').parent().parent().css('display', 'none');
+            $('#pin-form-image-url').parent().parent().fadeOut(300);
             $('.qq-upload-button').css('display', 'none');
             var promise = getImageData(data.success.id);
             uploadedImage = data.success.id;

pinry/static/js/pinry.js

@@ -43,8 +43,8 @@ $(window).load(function() {
             block.css({
                 'margin-left': rowMargins[sCol],
                 'margin-top':  colHeights[sCol],
-                'display':     'block'
             });
+            block.fadeIn(300);
             colHeights[sCol] += block.height()+(blockMargin);
         }
 
@@ -91,19 +91,22 @@ $(window).load(function() {
             $('#pins').append(html);
 
             // We need to then wait for images to load in and then tile
+            tileLayout();
+            lightbox();
             $('#pins').ajaxStop(function() {
                 $('img').load(function() {
-                    tileLayout();
-                    lightbox();
+                    $(this).fadeIn(300);
                 });
             });
 
-            if (pins.meta.total_count == 0) {
+            if (pins.objects.length == 0 || pins.objects.length < 30) {
                 $('.spinner').css('display', 'none');
-                if ($('.spinner').length != 0) {
+                $(window).off('scroll');
+                if ($('#pins').length != 0) {
                     var theEnd = document.createElement('div');
                     theEnd.id = 'the-end';
                     $(theEnd).html('&mdash; End &mdash;');
+                    $(theEnd).css('padding', 50);
                     $('body').append(theEnd);
                 }
             }

pinry/templates/includes/pins.html

@@ -13,7 +13,9 @@
                 </div>
             {{/if}}
             <a href="{{image.standard.image}}" class="lightbox" data-id="{{id}}">
-                <img src="{{image.thumbnail.image}}" />
+                <div class="image-wrapper" style="width: {{image.thumbnail.width}}px; height: {{image.thumbnail.height}}px;">
+                    <img src="{{image.thumbnail.image}}" width="{{image.thumbnail.width}}" height="{{image.thumbnail.height}}"/>
+                </div>
             </a>
             {{#if description}}
                 <p>{{description}}</p>