From c6c9925da01f16f78d745801e2e72d359c359f1d Mon Sep 17 00:00:00 2001
From: Peter Stockings <pstockings@jadeworld.com>
Date: Tue, 15 Aug 2023 22:31:08 +1000
Subject: [PATCH] Attempt to improve initial page load by adding defer
 attribute to scripts, will attempt to add defer to inline scripts as well
 soon

---
 templates/base.html                   | 38 ++++++++++++++-------------
 templates/calendar.html               |  2 +-
 templates/dashboard.html              |  8 +++---
 templates/partials/topset.html        |  2 +-
 templates/partials/workout_modal.html |  2 +-
 templates/partials/workout_tags.html  |  2 +-
 templates/person.html                 |  6 ++---
 7 files changed, 31 insertions(+), 29 deletions(-)

diff --git a/templates/base.html b/templates/base.html
index 13bc9b8..7aa5384 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -6,27 +6,32 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
     <title>Workout Tracker</title>
-    <script src="/static/js/plotly-basic-2.20.0.min.js"></script>
+    <script src="/static/js/plotly-basic-2.20.0.min.js" defer></script>
     <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap" rel="stylesheet" />
     <link href="/static/css/tw-elements.min.css" rel="stylesheet">
-    <script src="/static/js/tailwindcss@3.2.4.js"></script>
+    <script src="/static/js/tailwindcss@3.2.4.js" defer></script>
     <script>
-        tailwind.config = {
-            darkMode: "class",
-            theme: {
-                fontFamily: {
-                    sans: ["Roboto", "sans-serif"],
-                    body: ["Roboto", "sans-serif"],
-                    mono: ["ui-monospace", "monospace"],
+        window.addEventListener('DOMContentLoaded', _ => {
+            tailwind.config = {
+                darkMode: "class",
+                theme: {
+                    fontFamily: {
+                        sans: ["Roboto", "sans-serif"],
+                        body: ["Roboto", "sans-serif"],
+                        mono: ["ui-monospace", "monospace"],
+                    },
                 },
-            },
-            corePlugins: {
-                preflight: false,
-            },
-        };
+                corePlugins: {
+                    preflight: false,
+                },
+            };
+        });
     </script>
     <link href="/static/css/style.css" rel="stylesheet">
-    <script src="/static/js/tw-elements.min.js"></script>
+    <script src="/static/js/tw-elements.min.js" defer></script>
+    <script src="/static/js/htmx.min.js" defer></script>
+    <script src="/static/js/hyperscript.min.js" defer></script>
+    <script src="/static/js/sweetalert2@11.js" defer></script>
 
     <script>
         function debounce(func, timeout = 300) {
@@ -185,9 +190,6 @@
         </div>
     </template>
 
-    <script src="/static/js/htmx.min.js"></script>
-    <script src="/static/js/hyperscript.min.js"></script>
-    <script src="/static/js/sweetalert2@11.js"></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/templates/calendar.html b/templates/calendar.html
index bfc18ed..76d3b26 100644
--- a/templates/calendar.html
+++ b/templates/calendar.html
@@ -49,7 +49,7 @@
                 <option value="all">All</option>
             </select>
             <script>
-                te.Select.getOrCreateInstance(document.querySelector("#workout-view-picker")).setValue("{{ selected_view | safe }}");
+                window.addEventListener('DOMContentLoaded', _ => te.Select.getOrCreateInstance(document.querySelector("#workout-view-picker")).setValue("{{ selected_view | safe }}"));
             </script>
         </div>
     </div>
diff --git a/templates/dashboard.html b/templates/dashboard.html
index 938bdfe..92494d4 100644
--- a/templates/dashboard.html
+++ b/templates/dashboard.html
@@ -22,7 +22,7 @@
                         </select>
                     </div>
                 </div>
-                <script>te.Select.getOrCreateInstance(document.querySelector("#dashboard-people-multi-select")).setValue({{ selected_person_ids | list_to_string | safe}})</script>
+                <script>window.addEventListener('DOMContentLoaded', _ => te.Select.getOrCreateInstance(document.querySelector("#dashboard-people-multi-select")).setValue({{ selected_person_ids | list_to_string | safe}}))</script>
             </div>
         </div>
         <div class="w-full lg:w-1/4 sm:w-full px-3 mb-6 md:mb-0">
@@ -43,7 +43,7 @@
                         </select>
                     </div>
                 </div>
-                <script>te.Select.getOrCreateInstance(document.querySelector("#dashboard-exercise-multi-select")).setValue({{ selected_exercise_ids | list_to_string | safe}})</script>
+                <script> window.addEventListener('DOMContentLoaded', _ => te.Select.getOrCreateInstance(document.querySelector("#dashboard-exercise-multi-select")).setValue({{ selected_exercise_ids | list_to_string | safe}}))</script>
             </div>
         </div>
         <div class="w-full lg:w-1/4 sm:w-full  px-3 mb-6 md:mb-0"><label
@@ -129,13 +129,13 @@
                         <div id="person-{{ p['PersonId'] }}-exercise-{{ e['ExerciseId'] }}"
                             class="w-full mt-2 aspect-video"></div>
                         <script>
-                            Plotly.newPlot(document.getElementById("person-{{ p['PersonId'] }}-exercise-{{ e['ExerciseId'] }}"), [{
+                            window.addEventListener('DOMContentLoaded', _ => Plotly.newPlot(document.getElementById("person-{{ p['PersonId'] }}-exercise-{{ e['ExerciseId'] }}"), [{
                                 x: {{ e['EstimatedOneRepMaxProgressions']['StartDates'] | replace('"', "'") | safe }},
                                 y: {{ e['EstimatedOneRepMaxProgressions']['Estimated1RMs'] | replace('"', "'") | safe }},
                                 text: {{ e['EstimatedOneRepMaxProgressions']['TopSets'] | replace('"', "'") | safe }},
                                 name: "{{ p['PersonName'] }} - {{ e['ExerciseName'] }}",
                                 hovertemplate
-                            }], layout, config);
+                            }], layout, config));
                         </script>
                         {% endif %}
                         <table class="min-w-full divide-y divide-gray-200">
diff --git a/templates/partials/topset.html b/templates/partials/topset.html
index d7109c8..fec9d4c 100644
--- a/templates/partials/topset.html
+++ b/templates/partials/topset.html
@@ -19,7 +19,7 @@
             </select>
         </div>
         <script>
-            te.Select.getOrCreateInstance(document.querySelector("#topset-exercise-select-{{ topset_id }}")).setValue("{{ exercise_id }}");
+            window.addEventListener('DOMContentLoaded', _ => te.Select.getOrCreateInstance(document.querySelector("#topset-exercise-select-{{ topset_id }}")).setValue("{{ exercise_id }}"));
         </script>
         {% endif %}
     </td>
diff --git a/templates/partials/workout_modal.html b/templates/partials/workout_modal.html
index f6b2ed3..5997114 100644
--- a/templates/partials/workout_modal.html
+++ b/templates/partials/workout_modal.html
@@ -124,7 +124,7 @@
                                     </select>
                                 </div>
                                 <script>
-                                    te.Select.getOrCreateInstance(document.querySelector("#workout-exercise-select-{{ workout['WorkoutId'] }}"));
+                                    window.addEventListener('DOMContentLoaded', _ => te.Select.getOrCreateInstance(document.querySelector("#workout-exercise-select-{{ workout['WorkoutId'] }}")));
                                 </script>
                             </div>
                         </div>
diff --git a/templates/partials/workout_tags.html b/templates/partials/workout_tags.html
index c9dc99d..9184361 100644
--- a/templates/partials/workout_tags.html
+++ b/templates/partials/workout_tags.html
@@ -48,7 +48,7 @@
                     </select>
                 </div>
                 <script>
-                    te.Select.getOrCreateInstance(document.querySelector("#workout-tag-select-{{ workout_id }}")).setValue({{ selected_workout_tag_ids| list_to_string | safe }});
+                    window.addEventListener('DOMContentLoaded', _ => te.Select.getOrCreateInstance(document.querySelector("#workout-tag-select-{{ workout_id }}")).setValue({{ selected_workout_tag_ids| list_to_string | safe }}));
                 </script>
             </div>
         </div>
diff --git a/templates/person.html b/templates/person.html
index d2bfe2f..7285348 100644
--- a/templates/person.html
+++ b/templates/person.html
@@ -25,7 +25,7 @@
                         <option value="all" selected>All</option>
                     </select>
                     <script>
-                        te.Select.getOrCreateInstance(document.querySelector("#workout-view-picker")).setValue("all");
+                        window.addEventListener('DOMContentLoaded', _ => te.Select.getOrCreateInstance(document.querySelector("#workout-view-picker")).setValue("all"));
                     </script>
                 </div>
             </div>
@@ -56,7 +56,7 @@
                     </select>
                 </div>
                 <script>
-                    te.Select.getOrCreateInstance(document.querySelector("#multiSelection")).setValue({{ selected_exercise_ids| list_to_string | safe }});
+                    window.addEventListener('DOMContentLoaded', _ => te.Select.getOrCreateInstance(document.querySelector("#multiSelection")).setValue({{ selected_exercise_ids| list_to_string | safe }}));
                 </script>
             </div>
             <div class="w-full md:w-1/4 px-3 mb-6 md:mb-0">
@@ -117,7 +117,7 @@
                     </select>
                 </div>
                 <script>
-                    te.Select.getOrCreateInstance(document.querySelector("#graph-axis-multiselect")).setValue({{ graph_axis | safe }});
+                    window.addEventListener('DOMContentLoaded', _ => te.Select.getOrCreateInstance(document.querySelector("#graph-axis-multiselect")).setValue({{ graph_axis | safe }}));
                 </script>
             </div>
         </div>