ui: js: Load all JS files in deferred mode to speed up page load

- This improves page rendering time. If JS files are not loaded in deferred or
async mode, they will halt the page rendering until JS files are loaded from
network.

- 'defer' mode guarantees that the load order is same as the order in which JS
files appeared in the HTML page.

Tests:

- Run at least one function of each affected JS file and ensure that is works.

Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>

plinth/modules/dynamicdns/templates/dynamicdns.html

@@ -7,6 +7,11 @@
 {% load i18n %}
 {% load static %}
 
+{% block page_js %}
+  <script type="text/javascript" src="{% static 'dynamicdns/dynamicdns.js' %}"
+          defer></script>
+{% endblock %}
+
 {% block extra_content %}
   <h3>{% trans "Status" %}</h3>
 
@@ -52,7 +57,3 @@
     {% trans "No status available." %}
   {% endif %}
 {% endblock %}
-
-{% block page_js %}
-  <script type="text/javascript" src="{% static 'dynamicdns/dynamicdns.js' %}"></script>
-{% endblock %}

plinth/modules/ejabberd/templates/ejabberd.html

@@ -7,6 +7,11 @@
 {% load i18n %}
 {% load static %}
 
+{% block page_js %}
+  <script type="text/javascript" src="{% static 'ejabberd/ejabberd.js' %}"
+          defer></script>
+{% endblock %}
+
 {% block status %}
   {{ block.super }}
 
@@ -30,8 +35,3 @@
   </p>
 
 {% endblock %}
-
-{% block page_js %}
-  <script type="text/javascript"
-          src="{% static 'ejabberd/ejabberd.js' %}"></script>
-{% endblock %}

plinth/modules/matrixsynapse/templates/matrix-synapse.html

@@ -6,6 +6,11 @@
 {% load i18n %}
 {% load static %}
 
+{% block page_js %}
+  <script type="text/javascript" src="{% static 'matrixsynapse/matrixsynapse.js' %}"
+          defer></script>
+{% endblock %}
+
 {% block status %}
   {{ block.super }}
 
@@ -87,8 +92,3 @@
     </div>
   {% endif %}
 {% endblock %}
-
-{% block page_js %}
-  <script type="text/javascript"
-          src="{% static 'matrixsynapse/matrixsynapse.js' %}"></script>
-{% endblock %}

plinth/modules/mediawiki/templates/mediawiki.html

@@ -7,5 +7,6 @@
 {% load static %}
 
 {% block page_js %}
-  <script type="text/javascript" src="{% static 'mediawiki/mediawiki.js' %}"></script>
+  <script type="text/javascript" src="{% static 'mediawiki/mediawiki.js' %}"
+          defer></script>
 {% endblock %}

plinth/modules/networks/templates/connections_edit.html

@@ -6,6 +6,11 @@
 {% load i18n %}
 {% load static %}
 
+{% block page_js %}
+  <script type="text/javascript" src="{% static 'networks/networks.js' %}"
+          defer></script>
+{% endblock %}
+
 {% block content %}
 
   <h3>{{ title }}</h3>
@@ -20,9 +25,3 @@
   </form>
 
 {% endblock %}
-
-{% block page_js %}
-
-  <script type="text/javascript" src="{% static 'networks/networks.js' %}"></script>
-
-{% endblock %}

plinth/modules/sharing/templates/sharing_add_edit.html

@@ -7,6 +7,11 @@
 {% load i18n %}
 {% load static %}
 
+{% block page_js %}
+  <script type="text/javascript" src="{% static 'sharing/sharing_add_edit.js' %}"
+          defer></script>
+{% endblock %}
+
 {% block content %}
 
   <h3>{{ title }}</h3>
@@ -21,7 +26,3 @@
   </form>
 
 {% endblock %}
-
-{% block page_js %}
-  <script type="text/javascript" src="{% static 'sharing/sharing_add_edit.js' %}"></script>
-{% endblock %}

plinth/modules/snapshot/templates/snapshot_manage.html

@@ -7,6 +7,11 @@
 {% load i18n %}
 {% load static %}
 
+{% block page_js %}
+  <script type="text/javascript" src="{% static 'snapshot/snapshot.js' %}"
+          defer></script>
+{% endblock %}
+
 {% block configuration %}
   <form class="form" method="post">
     <div class="button-table">
@@ -71,8 +76,3 @@
     </div>
 </form>
 {% endblock %}
-
-{% block page_js %}
-  <script type="text/javascript" src="{% static 'snapshot/snapshot.js' %}"></script>
-{% endblock %}
-

plinth/modules/tor/templates/tor.html

@@ -7,6 +7,11 @@
 {% load i18n %}
 {% load static %}
 
+{% block page_js %}
+  <script type="text/javascript" src="{% static 'tor/tor.js' %}"
+          defer></script>
+{% endblock %}
+
 {% block status %}
   {{ block.super }}
 
@@ -37,7 +42,3 @@
 {% block internal_zone %}
   {{ block.super }}
 {% endblock %}
-
-{% block page_js %}
-  <script type="text/javascript" src="{% static 'tor/tor.js' %}"></script>
-{% endblock %}

plinth/modules/torproxy/templates/torproxy.html

@@ -6,5 +6,6 @@
 {% load static %}
 
 {% block page_js %}
-  <script type="text/javascript" src="{% static 'torproxy/torproxy.js' %}"></script>
+  <script type="text/javascript" src="{% static 'torproxy/torproxy.js' %}"
+          defer></script>
 {% endblock %}

plinth/modules/users/templates/users_update.html

@@ -7,6 +7,11 @@
 {% load i18n %}
 {% load static %}
 
+{% block page_js %}
+  <script type="text/javascript" src="{% static 'users/users.js' %}"
+          defer></script>
+{% endblock %}
+
 {% block content %}
   <h3>
     {% blocktrans trimmed with username=object.username %}
@@ -67,7 +72,3 @@
     </div>
   </div>
 {% endblock %}
-
-{% block page_js %}
-  <script type="text/javascript" src="{% static 'users/users.js' %}"></script>
-{% endblock %}

plinth/templates/apps.html

@@ -6,6 +6,10 @@
 {% load static %}
 {% load i18n %}
 
+{% block page_js %}
+  <script type="text/javascript" src="{% static 'tags.js' %}" defer></script>
+{% endblock %}
+
 {% block body_class %}apps-page{% endblock %}
 
 {% block tags %}
@@ -46,7 +50,3 @@
     </div>
   {% endif %}
 {% endblock %}
-
-{% block page_js %}
-  <script type="text/javascript" src="{% static 'tags.js' %}"></script>
-{% endblock %}