Add loading to onepage option

Author: pehala

backend/templates/songs/index.html

@@ -184,40 +184,8 @@ <h6 class="d-inline" ><%:author%></h6>
     $.fn.DataTable.ext.pager.numbers_length = 5;
     $.templates("song", "#songTemplate")
 
-    document.addEventListener('DOMContentLoaded', function () {
-         const back_to_top = $('#back-to-top')
-         $(window).scroll(function () {
-                if ($(this).scrollTop() > 50) {
-                    back_to_top.fadeIn();
-                } else {
-                    back_to_top.fadeOut();
-                }
-            });
-        // scroll body to 0px on click
-
-        back_to_top.click(function () {
-            $('body,html').animate({
-                scrollTop: 0
-            }, 800);
-            return false;
-        });
-
-        $( "#scroll-down" ).click(function() {
-            betterScrollDown()
-        });
-
-        let hidden = false
-        function hideChords(value) {
-            hidden = value
-            if (value) {
-                $(".chord").hide()
-            } else {
-                $(".chord").show()
-            }
-        }
-
-        let wakelock;
-        async function preventSleep(value) {
+    let wakelock;
+    async function preventSleep(value) {
             if(!canWakeLock()) return;
             if (value) {
               try {
@@ -233,27 +201,58 @@ <h6 class="d-inline" ><%:author%></h6>
                 if(wakelock) wakelock.release();
                 wakelock = null;
             }
+    }
+    let hidden = false
+    function hideChords(value) {
+        hidden = value
+        if (value) {
+            $(".chord").hide()
+        } else {
+            $(".chord").show()
         }
-
-        const config = new Map([
+    }
+    const config = new Map([
             ["hide_chords", new BooleanOption(document.getElementById("hideChords"), hideChords, false)],
             ["prevent_sleep", new BooleanOption(document.getElementById("preventSleep"), function(value) {
                 preventSleep(value).then()
             }, false)],
             ["one_page", new BooleanOption(document.getElementById("onePage"), function(value) {
-                if (table)
+                if (table) {
                     table.destroy()
+                    document.getElementById("content").classList.add("d-none");
+                    document.getElementById("spinner").classList.remove("d-none");
+                }
                 table = createDatatable(!value)
             }, false)],
         ])
-        const options = new Options(config)
+    const options = new Options(config)
+    if (!canWakeLock()) {
+        options.set("prevent_sleep", false)
+        options.elements("prevent_sleep").forEach(function (element) {
+            element.disabled = true
+        })
+    }
+    document.addEventListener('DOMContentLoaded', function () {
+         const back_to_top = $('#back-to-top')
+         $(window).scroll(function () {
+                if ($(this).scrollTop() > 50) {
+                    back_to_top.fadeIn();
+                } else {
+                    back_to_top.fadeOut();
+                }
+            });
+        // scroll body to 0px on click
 
-        if (!canWakeLock()) {
-            options.set("prevent_sleep", false)
-            options.elements("prevent_sleep").forEach(function (element) {
-                element.disabled = true
-            })
-        }
+        back_to_top.click(function () {
+            $('body,html').animate({
+                scrollTop: 0
+            }, 800);
+            return false;
+        });
+
+        $( "#scroll-down" ).click(function() {
+            betterScrollDown()
+        });
 
         table.on( 'draw', function () {
             if (hidden) {