From c45bdf56dd80940b28f2b6b6ffe05f5111d2b0eb Mon Sep 17 00:00:00 2001
From: Sunil Mohan Adapa <sunil@medhas.org>
Date: Sat, 4 Jan 2025 17:35:45 -0800
Subject: [PATCH] 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   |  9 +++++----
 plinth/modules/ejabberd/templates/ejabberd.html       | 10 +++++-----
 .../matrixsynapse/templates/matrix-synapse.html       | 10 +++++-----
 plinth/modules/mediawiki/templates/mediawiki.html     |  3 ++-
 .../modules/networks/templates/connections_edit.html  | 11 +++++------
 .../modules/sharing/templates/sharing_add_edit.html   |  9 +++++----
 .../modules/snapshot/templates/snapshot_manage.html   | 10 +++++-----
 plinth/modules/tor/templates/tor.html                 |  9 +++++----
 plinth/modules/torproxy/templates/torproxy.html       |  3 ++-
 plinth/modules/users/templates/users_update.html      |  9 +++++----
 plinth/templates/apps.html                            |  8 ++++----
 11 files changed, 48 insertions(+), 43 deletions(-)

diff --git a/plinth/modules/dynamicdns/templates/dynamicdns.html b/plinth/modules/dynamicdns/templates/dynamicdns.html
index 052f697a5..0a517321f 100644
--- a/plinth/modules/dynamicdns/templates/dynamicdns.html
+++ b/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 %}
diff --git a/plinth/modules/ejabberd/templates/ejabberd.html b/plinth/modules/ejabberd/templates/ejabberd.html
index 4e9c6333b..6e2c02f65 100644
--- a/plinth/modules/ejabberd/templates/ejabberd.html
+++ b/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 %}
diff --git a/plinth/modules/matrixsynapse/templates/matrix-synapse.html b/plinth/modules/matrixsynapse/templates/matrix-synapse.html
index f2b3134d6..42b4dc67e 100644
--- a/plinth/modules/matrixsynapse/templates/matrix-synapse.html
+++ b/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 %}
diff --git a/plinth/modules/mediawiki/templates/mediawiki.html b/plinth/modules/mediawiki/templates/mediawiki.html
index 0e39685c8..843c29470 100644
--- a/plinth/modules/mediawiki/templates/mediawiki.html
+++ b/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 %}
diff --git a/plinth/modules/networks/templates/connections_edit.html b/plinth/modules/networks/templates/connections_edit.html
index 4a3725592..59bb64073 100644
--- a/plinth/modules/networks/templates/connections_edit.html
+++ b/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 %}
diff --git a/plinth/modules/sharing/templates/sharing_add_edit.html b/plinth/modules/sharing/templates/sharing_add_edit.html
index e48a265bb..e38fffc39 100644
--- a/plinth/modules/sharing/templates/sharing_add_edit.html
+++ b/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 %}
diff --git a/plinth/modules/snapshot/templates/snapshot_manage.html b/plinth/modules/snapshot/templates/snapshot_manage.html
index ab7a5c670..24be26f8a 100644
--- a/plinth/modules/snapshot/templates/snapshot_manage.html
+++ b/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 %}
-
diff --git a/plinth/modules/tor/templates/tor.html b/plinth/modules/tor/templates/tor.html
index 812cf7c6a..ece5c5f5f 100644
--- a/plinth/modules/tor/templates/tor.html
+++ b/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 %}
diff --git a/plinth/modules/torproxy/templates/torproxy.html b/plinth/modules/torproxy/templates/torproxy.html
index fdfb9fde3..4466771ba 100644
--- a/plinth/modules/torproxy/templates/torproxy.html
+++ b/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 %}
diff --git a/plinth/modules/users/templates/users_update.html b/plinth/modules/users/templates/users_update.html
index 1600f843d..2eb84bb85 100644
--- a/plinth/modules/users/templates/users_update.html
+++ b/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 %}
diff --git a/plinth/templates/apps.html b/plinth/templates/apps.html
index d4f5106d8..098be288b 100644
--- a/plinth/templates/apps.html
+++ b/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 %}