diff --git a/docs/releases/2.5.rst b/docs/releases/2.5.rst
index a408cd9cf9..1ae949b1a9 100644
--- a/docs/releases/2.5.rst
+++ b/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
 --------
diff --git a/mayan/apps/appearance/static/appearance/js/base.js b/mayan/apps/appearance/static/appearance/js/base.js
index 52e5079c21..83ac822c96 100644
--- a/mayan/apps/appearance/static/appearance/js/base.js
+++ b/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();
 
diff --git a/mayan/apps/common/utils.py b/mayan/apps/common/utils.py
index e24404368c..bcea9cb1dd 100644
--- a/mayan/apps/common/utils.py
+++ b/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)
diff --git a/mayan/apps/documents/widgets.py b/mayan/apps/documents/widgets.py
index 90e1695563..f4382dd695 100644
--- a/mayan/apps/documents/widgets.py
+++ b/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):