Make chat faster

templates/base.html

@@ -295,7 +295,6 @@
           $(function () {
             $('img.unveil').unveil(200);
           });
-          const loading_page = `{% include "loading-page.html" %}`;
         </script>
       {% endcompress %}
 
@@ -379,10 +378,10 @@
         <script type="text/javascript">{{ request.profile.user_script|safe }}</script>
       {% endif %}
 
-      <div id="bodyend">
-        {% block bodyend %}{% endblock %}
+      <div id="extra_js">
+        {% block extra_js %}{% endblock %}
       </div>
-
+      {% block bodyend %}{% endblock %}
       {% block footer %}
         <footer>
           <span id="footer-content">

templates/chat/chat.html

@@ -82,7 +82,7 @@
           {% include 'chat/user_online_status.html' %}
         </div>
         <div id="chat-box">
-          <img src="{{static('loading.gif')}}" id="loader">
+          <img src="{{static('loading.gif')}}" id="loader" style="display: none;">
           <ul id="chat-log">
             {% include 'chat/message_list.html' %}
           </ul>

templates/chat/chat_js.html

@@ -1,10 +1,4 @@
 <script type="text/javascript">
-  let META_HEADER = [
-    "{{_('Recent')}}",
-    "{{_('Following')}}",
-    "{{_('Admin')}}",
-    "{{_('Other')}}",
-  ];
   let isMobile = window.matchMedia("only screen and (max-width: 799px)").matches;
 
   function load_next_page(last_id, refresh_html=false) {

templates/chat/message.html

@@ -1,12 +1,12 @@
 <li class="message" id="message-{{ message.id }}" message-id="{{ message.id }}">
-  <a href="{{ url('user_page', message.author.user.username) }}">
+  <a href="{{ url('user_page', message.author.username) }}">
     <img src="{{ gravatar(message.author, 135) }}" class="profile-pic">
   </a>
   <div class="body-message">
     <div class="user-time">
       <span class="username {{ message.author.css_class }}">
-        <a href="{{ url('user_page', message.author.user.username) }}">
-          {{ message.author }}
+        <a href="{{ url('user_page', message.author.username) }}">
+          {{ message.author.username }}
         </a>
       </span>
       <span class="time">

templates/three-column-content.html

@@ -28,6 +28,8 @@
 
 {% block js_media %}
   <script type="text/javascript">
+    let loadingPage;
+
     function activateBlogBoxOnClick() {
       $('.blog-box').on('click', function () {
         var $description = $(this).children('.blog-description');
@@ -64,15 +66,15 @@
         $elem.addClass('active');
       }
       $(window).off("scroll");
-      $('.middle-right-content').html(loading_page);
+      $('.middle-right-content').html(loadingPage);
       $.get(url, function (data) {
         var reload_content = $(data).find('.middle-right-content');
-        var bodyend_script = $(data).find('#bodyend');
+        var bodyend_script = $(data).find('#extra_js');
         if (reload_content.length) {
           window.history.pushState("", "", url);
           $('html, body').animate({scrollTop: 0}, 'fast');
           $('.middle-right-content').html(reload_content.first().html());
-          $('#bodyend').html(bodyend_script.first().html());
+          $('#extra_js').html(bodyend_script.first().html());
           $("#loading-bar").hide().css({ width: 0});
           if (reload_content.hasClass("wrapper")) {
             $('.middle-right-content').addClass("wrapper");
@@ -114,6 +116,9 @@
         navigateTo($(this), true);
       });
       registerNavigation();
+      $.get("{{static('html/loading-page.html')}}", function(data) {
+        loadingPage = data;
+      });
     });
   </script>
 {% endblock %}
@@ -141,11 +146,14 @@
   {% block after_posts %}{% endblock %}
 {% endblock %}
 
+{% block extra_js %}
+  {% block three_col_js %}{% endblock %}
+{% endblock %}
+
 {% block bodyend %}
   {{ super() }}
   {% if REQUIRE_JAX %}
     {% include "mathjax-load.html" %}
   {% endif %}
   {% include "comments/math.html" %}
-  {% block three_col_js %}{% endblock %}
 {% endblock %}