Add preloader for 3 col

resources/common.js

@@ -333,6 +333,38 @@ function onWindowReady() {
         });
     }
 
+    $.ajaxSetup({
+        beforeSend: function (xhr, settings) {
+            if (!(/^(GET|HEAD|OPTIONS|TRACE)$/.test(settings.type)) && !this.crossDomain)
+                xhr.setRequestHeader('X-CSRFToken', $.cookie('csrftoken'));
+        }
+    });
+
+    setTimeout(() => {
+        $("[data-src]img").each(function() {
+            $(this).attr("src", $(this).attr("data-src"));
+        })
+        $("[data-src]iframe").each(function() {
+            $(this).attr("src", $(this).attr("data-src"));
+        })
+    }, "100");
+
+    $('form').submit(function (evt) {
+        // Prevent multiple submissions of forms, see #565
+        $("input[type='submit']").prop('disabled', true);
+    });
+
+    registerPopper($('#nav-lang-icon'), $('#lang-dropdown'));
+    registerPopper($('#user-links'), $('#userlink_dropdown'));
+    $('.lang-dropdown-item').click(function() {
+        $('select[name="language"]').val($(this).attr('value'));
+        $('#form-lang').submit();
+    })
+    $('#logout').on('click', () => $('#logout-form').submit());
+}
+
+$(function() {
+    onWindowReady();
     var $nav_list = $('#nav-list');
     $('#navicon').click(function (event) {
         event.stopPropagation();
@@ -372,38 +404,7 @@ function onWindowReady() {
         $nav_list.hide();
     });
 
-    $.ajaxSetup({
-        beforeSend: function (xhr, settings) {
-            if (!(/^(GET|HEAD|OPTIONS|TRACE)$/.test(settings.type)) && !this.crossDomain)
-                xhr.setRequestHeader('X-CSRFToken', $.cookie('csrftoken'));
-        }
-    });
 
-    setTimeout(() => {
-        $("[data-src]img").each(function() {
-            $(this).attr("src", $(this).attr("data-src"));
-        })
-        $("[data-src]iframe").each(function() {
-            $(this).attr("src", $(this).attr("data-src"));
-        })
-    }, "100");
-
-    $('form').submit(function (evt) {
-        // Prevent multiple submissions of forms, see #565
-        $("input[type='submit']").prop('disabled', true);
-    });
-
-    registerPopper($('#nav-lang-icon'), $('#lang-dropdown'));
-    registerPopper($('#user-links'), $('#userlink_dropdown'));
-    $('.lang-dropdown-item').click(function() {
-        $('select[name="language"]').val($(this).attr('value'));
-        $('#form-lang').submit();
-    })
-    $('#logout').on('click', () => $('#logout-form').submit());
-}
-
-$(function() {
-    onWindowReady();
     $('#nav-darkmode-icon').on('click', function() {
         if (localStorage.getItem("darkmode") === "true") {
             localStorage.setItem("darkmode", "false");

templates/three-column-content.html

@@ -9,12 +9,18 @@
                 width: 98%;
                 margin-left: 0;
             }
+            .middle-right-content {
+                display: inline-flex;
+            }
         }
         @media(max-width: 799px) {
             #content {
                 width: 100%;
                 margin-left: 0;
             }
+            .middle-right-content {
+                display: block;
+            }
         }
 
         /* TODO: remove this       */
@@ -94,45 +100,6 @@
                 });
             }
 
-            var $nav_list = $('#nav-list');
-            $('#navicon').click(function (event) {
-                event.stopPropagation();
-                $nav_list.toggle();
-                if ($nav_list.is(':hidden'))
-                    $(this).blur().removeClass('hover');
-                else {
-                    $(this).addClass('hover');
-                    $nav_list.find('li ul').css('left', $('#nav-list').width()).hide();
-                }
-            }).hover(function () {
-                $(this).addClass('hover');
-            }, function () {
-                $(this).removeClass('hover');
-            });
-
-            $nav_list.find('li a .nav-expand').click(function (event) {
-                event.preventDefault();
-                $(this).parent().siblings('ul').css('display', 'block');
-            });
-
-            $nav_list.find('li a').each(function () {
-                if (!$(this).siblings('ul').length)
-                    return;
-                $(this).on('contextmenu', function (event) {
-                    event.preventDefault();
-                }).on('taphold', function () {
-                    $(this).siblings('ul').css('display', 'block');
-                });
-            });
-
-            $nav_list.click(function (event) {
-                event.stopPropagation();
-            });
-
-            $('html').click(function () {
-                $nav_list.hide();
-            });
-
             $.ajaxSetup({
                 beforeSend: function (xhr, settings) {
                     if (!(/^(GET|HEAD|OPTIONS|TRACE)$/.test(settings.type)) && !this.crossDomain)
@@ -162,7 +129,8 @@
             })
             $('#logout').on('click', () => $('#logout-form').submit());
         }
-        $(document).ready(function () {
+        $(function () {
+            const loading_page = `{% include "loading-page.html" %}`;
             window.addEventListener('popstate', (e) => {
                 window.location.href = e.currentTarget.location.href;
             });
@@ -173,6 +141,7 @@
                 if (url === '#') return;
                 $('.left-sidebar-item').removeClass('active');
                 $(this).addClass('active');
+                $('.middle-right-content').html(loading_page);
                 $.get(url, function(data) {
                     var reload_content = $(data).find('.middle-right-content');
 
@@ -217,7 +186,7 @@
     {% block before_posts %}{% endblock %}
     <div id="three-col-container">
         {% block left_sidebar %}{% endblock %}
-        <div class="middle-right-content" style="display: inline-flex;">
+        <div class="middle-right-content">
             {% block three_col_media %}{% endblock %}
             {% block three_col_js %}{% endblock %}
             <div class="middle-content">