Remove animated spinners to lower browser memory usage and increase

responsiveness. Render a document page place holder while the real
document page loads. This change avoids "jumping" effect when
loading many thumbnails. Increase lazy load thresholds. More
thumbnails and document pages will be loaded and visible by
default when a view loads.

Signed-off-by: Roberto Rosario <roberto.rosario.gonzalez@gmail.com>

docs/releases/2.5.rst

@@ -79,6 +79,12 @@ Other Changes
 - The trashed document deletion action is now a background task. This
   feature results is much faster trashed document deletion and trash
   can emptying.
+- Remove animated spinners to lower browser memory usage and increase
+  responsiveness.
+- Render a document page place holder while the real document page
+  loads. This change avoids "jumping" effect when loading many thumbnails.
+- Increase lazy load thresholds. More thumbnails and document pages
+  will be loaded and visible by default when a view loads.
 
 Removals
 --------

mayan/apps/appearance/static/appearance/js/base.js

@@ -58,10 +58,12 @@ App.prototype.setupSelect2 = function () {
 }
 
 App.prototype.setupFullHeightResizing = function () {
+    var self = this;
+
     this.resizeFullHeight();
 
     this.window.resize(function() {
-        app.resizeFullHeight();
+        self.resizeFullHeight();
     });
 }
 
@@ -69,45 +71,6 @@ App.prototype.resizeFullHeight = function () {
     $('.full-height').height(this.window.height() - $('.full-height').data('height-difference'));
 }
 
-App.prototype.doMayanImages = function () {
-    $('a.fancybox').fancybox({
-        beforeShow : function(){
-            this.title =  $(this.element).data('caption');
-        },
-        openEffect  : 'elastic',
-        closeEffect : 'elastic',
-        prevEffect  : 'none',
-        nextEffect  : 'none',
-        titleShow   : true,
-        type        : 'image',
-        autoResize  : true,
-    });
-
-   $('img.lazy-load').lazyload({
-        appear: function(elements_left, settings) {
-            new MayanImage({element: $(this)});
-        },
-    });
-
-    $('img.lazy-load-carousel').lazyload({
-        appear: function(elements_left, settings) {
-            new MayanImage({element: $(this)});
-        },
-        container: $('#carousel-container'),
-        threshold: 400
-    });
-
-    $('.lazy-load').on('load', function() {
-        $(this).siblings('.spinner').remove();
-        $(this).removeClass('lazy-load');
-    });
-
-    $('.lazy-load-carousel').on('load', function() {
-        $(this).siblings('.spinner').remove();
-        $(this).removeClass('lazy-load-carousel');
-    });
-}
-
 App.prototype.doToastrMessages = function () {
     toastr.options = {
         'closeButton': true,
@@ -165,11 +128,53 @@ App.prototype.doToastrMessages = function () {
     });
 }
 
+/* MayanImage class */
+
 var MayanImage = function (options) {
     this.element = options.element;
     this.load();
 }
 
+MayanImage.intialize = function () {
+    $('a.fancybox').fancybox({
+        beforeShow : function(){
+            this.title = $(this.element).data('caption');
+        },
+        openEffect  : 'elastic',
+        closeEffect : 'elastic',
+        prevEffect  : 'none',
+        nextEffect  : 'none',
+        titleShow   : true,
+        type        : 'image',
+        autoResize  : true,
+    });
+
+   $('img.lazy-load').lazyload({
+        appear: function(elements_left, settings) {
+            new MayanImage({element: $(this)});
+        },
+        threshold: 400
+    });
+
+    $('img.lazy-load-carousel').lazyload({
+        appear: function(elements_left, settings) {
+            new MayanImage({element: $(this)});
+        },
+        container: $('#carousel-container'),
+        threshold: 2000
+    });
+
+    $('.lazy-load').on('load', function() {
+        $(this).siblings('.spinner-container').remove();
+        $(this).removeClass('lazy-load pull-left');
+    });
+
+    $('.lazy-load-carousel').on('load', function() {
+        $(this).siblings('.spinner-container').remove();
+        $(this).removeClass('lazy-load-carousel pull-left');
+    });
+}
+
 MayanImage.prototype.onImageError = function () {
     this.element.parent().parent().html('<span class="fa-stack fa-lg"><i class="fa fa-file-o fa-stack-2x"></i><i class="fa fa-times fa-stack-1x text-danger"></i></span>');
     // Remove border to indicate non interactive image
@@ -199,7 +204,7 @@ jQuery(document).ready(function() {
 
     app.setupFullHeightResizing();
 
-    app.doMayanImages();
+    MayanImage.intialize();
 
     app.doToastrMessages();
 

mayan/apps/common/utils.py

@@ -96,6 +96,13 @@ def get_descriptor(file_input, read=True):
         return file_input
 
 
+def index_or_default(instance, index, default):
+    try:
+        return instance[index]
+    except IndexError:
+        return default
+
+
 def TemporaryFile(*args, **kwargs):
     kwargs.update({'dir': setting_temporary_directory.value})
     return tempfile.TemporaryFile(*args, **kwargs)

mayan/apps/documents/widgets.py

@@ -8,6 +8,8 @@ from django.utils.http import urlencode
 from django.utils.safestring import mark_safe
 from django.utils.translation import ugettext, ugettext_lazy as _
 
+from common.utils import index_or_default
+
 from .settings import (
     setting_display_size, setting_preview_size, setting_thumbnail_size
 )
@@ -99,6 +101,8 @@ class InstanceImageWidget(object):
     preview_query_dict = {}
     image_class = 'lazy-load'
     title = None
+    width = None
+    height = None
 
     # Click view
     def get_click_view_kwargs(self, instance):
@@ -221,10 +225,16 @@ class InstanceImageWidget(object):
                 )
 
             result.append(
-                '<i class="spinner fa fa-spinner fa-pulse fa-3x fa-fw"></i> '
-                '<img class="thin_border {image_class}" '
+                '<div class="spinner-container text-primary" style="margin: auto; width: {width}px; height: {height}px; border:1px solid lightgray;">'
+                '<span class="fa-stack fa-lg" style="margin-left: 4px; margin-top: 3px;">'
+                '<i class="fa fa-file-o fa-stack-2x"></i>'
+                '<i class="fa fa-clock-o fa-stack-1x"></i>'
+                '</span>'
+                '</div>'
+                '<img class="thin_border {image_class} pull-left"'
                 'data-url="{preview_full_url}" src="#" '
-                'alt="{alt_text}" /> '.format(
+                '/> '.format(
+                    width=self.width or '32', height=self.height or '32',
                     image_class=self.image_class,
                     preview_full_url=self.get_preview_view_url(instance=instance),
                     alt_text=self.alt_text
@@ -253,6 +263,11 @@ class BaseDocumentThumbnailWidget(InstanceImageWidget):
     preview_view_query_dict = {
         'size': setting_thumbnail_size.value
     }
+    width = setting_thumbnail_size.value.split('x')[0]
+    height = index_or_default(
+        instance=setting_thumbnail_size.value.split('x'),
+        index=1, default=setting_thumbnail_size.value.split('x')[0]
+    )
 
     def get_destination_url(self, instance):
         return instance.get_absolute_url()
@@ -265,6 +280,11 @@ class CarouselDocumentPageThumbnailWidget(BaseDocumentThumbnailWidget):
     preview_view_query_dict = {
         'size': setting_display_size.value
     }
+    width = setting_preview_size.value.split('x')[0]
+    height = index_or_default(
+        instance=setting_preview_size.value.split('x'),
+        index=1, default=setting_preview_size.value.split('x')[0]
+    )
 
 
 class DocumentThumbnailWidget(BaseDocumentThumbnailWidget):