loading screen2

app/http/server.go

@@ -155,6 +155,7 @@ func addMainTemplate(renderer multitemplate.Renderer, name string) multitemplate
 		"./public/templates/layouts/main.tmpl",
 		"./public/templates/includes/head.tmpl",
 		"./public/templates/includes/sidebar.tmpl",
+		"./public/templates/includes/loadingscreen.tmpl",
 		fmt.Sprintf("./public/templates/views/%s.tmpl", name),
 	)
 	return renderer
@@ -167,6 +168,7 @@ func addManageTemplate(renderer multitemplate.Renderer, name string) multitempla
 		"./public/templates/includes/sidebar.tmpl",
 		"./public/templates/includes/navbar.tmpl",
 		"./public/templates/includes/substitutionmodal.tmpl",
+		"./public/templates/includes/loadingscreen.tmpl",
 		fmt.Sprintf("./public/templates/views/%s.tmpl", name),
 	)
 	return renderer

public/static/css/style.css

@@ -134,3 +134,26 @@ body {
 .modal-footer, .modal-header {
     border-color: #2e3136 !important;
 }
+
+.vertical-center {
+    margin: 0;
+    position: absolute;
+    top: 50%;
+}
+
+.fade-in {
+    opacity: 1;
+    animation-name: fadeInOpacity;
+    animation-iteration-count: 1;
+    animation-timing-function: ease-in;
+    animation-duration: 0.5s;
+}
+
+@keyframes fadeInOpacity {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}

public/templates/includes/head.tmpl

@@ -63,6 +63,33 @@
       setDefaultHeader();
   </script>
 
+  <script>
+    function showLoadingScreen() {
+      const content = document.getElementsByClassName('content')[0];
+      content.style.display = 'none';
+      document.getElementById('loading-container').style.display = 'block';
+    }
+
+    function hideLoadingScreen() {
+        document.getElementById('loading-container').style.display = 'none';
+
+        const content = document.getElementsByClassName('content')[0];
+        content.style.display = 'block';
+        content.classList.add('fade-in');
+    }
+
+    function sleep(ms) {
+        return new Promise(resolve => setTimeout(resolve, ms));
+    }
+
+    async function withLoadingScreen(func) {
+        showLoadingScreen();
+        await func();
+        await sleep(200);
+        hideLoadingScreen();
+    }
+  </script>
+
   <!-- Bootstrap -->
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
         integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

public/templates/includes/loadingscreen.tmpl

@@ -0,0 +1,9 @@
+{{define "loadingscreen"}}
+  <div id="loading-container" class="container-fluid" style="display: none;">
+    <div class="d-flex justify-content-center">
+      <div class="spinner-border text-primary vertical-center" role="status" style="width: 5rem; height: 5rem;">
+        <span class="sr-only" style="color: white !important;">Loading...</span>
+      </div>
+    </div>
+  </div>
+{{end}}

public/templates/layouts/main.tmpl

@@ -7,6 +7,7 @@
     <div class="wrapper">
       {{template "sidebar" .}}
       <div class="main-panel">
+        {{template "loadingscreen" .}}
         {{template "content" .}}
       </div>
     </div>

public/templates/layouts/manage.tmpl

@@ -8,6 +8,7 @@
       {{template "substitutions" .}} <!-- Has to be here for some reason -->
       <div class="main-panel" style="width: 100% !important;">
         {{template "navbar" .}}
+        {{template "loadingscreen" .}}
         {{template "content" .}}
       </div>
     </div>

public/templates/views/blacklist.tmpl

@@ -135,7 +135,7 @@
           });
       }
 
-      loadData();
+      withLoadingScreen(loadData);
     </script>
   </div>
 {{end}}

public/templates/views/index.tmpl

@@ -56,6 +56,6 @@
           }
       }
 
-      loadData();
+      withLoadingScreen(loadData);
   </script>
 {{end}}

public/templates/views/logs.tmpl

@@ -139,7 +139,7 @@
           document.getElementById('page-number').innerText = currentPage;
       }
 
-      loadData();
+      withLoadingScreen(loadData);
     </script>
 
     <script>

public/templates/views/modmaillogs.tmpl

@@ -138,7 +138,7 @@
           return true;
       }
 
-      loadData();
+      withLoadingScreen(loadData);
     </script>
 
     <script>

public/templates/views/panels.tmpl

@@ -265,7 +265,7 @@
           await fillCategories(channels);
       }
 
-      loadData();
+      withLoadingScreen(loadData);
     </script>
   </div>
 

public/templates/views/settings.tmpl

@@ -39,7 +39,8 @@
                     <div class="form-group">
                       <label>Ping @everyone on ticket open</label>
                       <div class="form-check">
-                        <input class="form-check-input" type="checkbox" name="pingeveryone" value="on" id="ping_everyone" style="width:30px;height:30px;">
+                        <input class="form-check-input" type="checkbox" name="pingeveryone" value="on"
+                               id="ping_everyone" style="width:30px;height:30px;">
                       </div>
                     </div>
                   </div>
@@ -147,7 +148,8 @@
                     <div class="form-group">
                       <label>Support Reps Can View Claimed Tickets</label>
                       <div class="form-check">
-                        <input class="form-check-input" type="checkbox" name="can_view" value="on" id="can_view" style="width:30px;height:30px;" onclick="canViewChanged();">
+                        <input class="form-check-input" type="checkbox" name="can_view" value="on" id="can_view"
+                               style="width:30px;height:30px;" onclick="canViewChanged();">
                       </div>
                     </div>
                   </div>
@@ -155,7 +157,8 @@
                     <div class="form-group">
                       <label>Support Reps Can Type In Claimed Tickets</label>
                       <div class="form-check">
-                        <input class="form-check-input" type="checkbox" name="can_type" value="on" id="can_type" style="width:30px;height:30px;">
+                        <input class="form-check-input" type="checkbox" name="can_type" value="on" id="can_type"
+                               style="width:30px;height:30px;">
                       </div>
                     </div>
                   </div>
@@ -195,7 +198,8 @@
                     <div class="form-group">
                       <label>Enabled</label>
                       <div class="form-check">
-                        <input class="form-check-input" type="checkbox" name="enabled" value="on" id="autoclose_enabled" style="width:30px;height:30px;">
+                        <input class="form-check-input" type="checkbox" name="enabled" value="on" id="autoclose_enabled"
+                               style="width:30px;height:30px;">
                       </div>
                     </div>
                   </div>
@@ -203,7 +207,8 @@
                     <div class="form-group">
                       <label>Close on user leave</label>
                       <div class="form-check">
-                        <input class="form-check-input" type="checkbox" name="enabled" value="on" id="autoclose_on_user_leave" style="width:30px;height:30px;">
+                        <input class="form-check-input" type="checkbox" name="enabled" value="on"
+                               id="autoclose_on_user_leave" style="width:30px;height:30px;">
                       </div>
                     </div>
                   </div>
@@ -343,8 +348,6 @@
             await fillArchiveChannels(channels, settings.archive_channel);
             await fillCategories(channels, settings.category);
         }
-
-        loadData();
     </script>
 
     <script>
@@ -359,8 +362,6 @@
             document.getElementById('can_type').checked = settings.support_can_type;
         }
 
-        loadClaimSettings();
-
         async function updateClaimSettings() {
             const data = {
                 support_can_view: document.getElementById('can_view').checked,
@@ -387,62 +388,60 @@
     </script>
 
     <script>
-      const minuteNanos = 60 * 1000 * 1000 * 1000;
+        const minuteNanos = 60 * 1000 * 1000 * 1000;
-      const hourNanos = 60 * minuteNanos;
+        const hourNanos = 60 * minuteNanos;
-      const dayNanos = 24 * hourNanos;
+        const dayNanos = 24 * hourNanos;
 
-      function fromNanoSeconds(nanoseconds) {
+        function fromNanoSeconds(nanoseconds) {
-          const days = Math.floor(nanoseconds / dayNanos);
+            const days = Math.floor(nanoseconds / dayNanos);
-          nanoseconds -= (days * dayNanos);
+            nanoseconds -= (days * dayNanos);
 
-          const hours = Math.floor(nanoseconds / hourNanos);
+            const hours = Math.floor(nanoseconds / hourNanos);
-          nanoseconds -= (hours * hourNanos);
+            nanoseconds -= (hours * hourNanos);
 
-          const minutes = Math.floor(nanoseconds / minuteNanos);
+            const minutes = Math.floor(nanoseconds / minuteNanos);
-          
-          return [days, hours, minutes];
-      }
 
-      async function loadAutoCloseSettings() {
+            return [days, hours, minutes];
-          const res = await axios.get('/api/{{.guildId}}/autoclose');
+        }
-          const settings = res.data;
 
-          document.getElementById('autoclose_enabled').checked = settings.enabled;
+        async function loadAutoCloseSettings() {
-          document.getElementById('autoclose_on_user_leave').checked = settings.on_user_leave;
+            const res = await axios.get('/api/{{.guildId}}/autoclose');
+            const settings = res.data;
 
-          const sinceOpen = fromNanoSeconds(settings.since_open_with_no_response);
+            document.getElementById('autoclose_enabled').checked = settings.enabled;
-          document.getElementById('sinceopen_days').value = sinceOpen[0];
+            document.getElementById('autoclose_on_user_leave').checked = settings.on_user_leave;
-          document.getElementById('sinceopen_hours').value = sinceOpen[1];
-          document.getElementById('sinceopen_minutes').value = sinceOpen[2];
 
-          const sinceLast = fromNanoSeconds(settings.since_last_message);
+            const sinceOpen = fromNanoSeconds(settings.since_open_with_no_response);
-          document.getElementById('sincelast_days').value = sinceLast[0];
+            document.getElementById('sinceopen_days').value = sinceOpen[0];
-          document.getElementById('sincelast_hours').value = sinceLast[1];
+            document.getElementById('sinceopen_hours').value = sinceOpen[1];
-          document.getElementById('sincelast_minutes').value = sinceLast[2];
+            document.getElementById('sinceopen_minutes').value = sinceOpen[2];
-      }
 
-      function toNanoSeconds(days, hours, minutes) {
+            const sinceLast = fromNanoSeconds(settings.since_last_message);
-          return days * dayNanos + hours * hourNanos + minutes * minuteNanos;
+            document.getElementById('sincelast_days').value = sinceLast[0];
-      }
+            document.getElementById('sincelast_hours').value = sinceLast[1];
+            document.getElementById('sincelast_minutes').value = sinceLast[2];
+        }
 
-      async function updateAutoCloseSettings() {
+        function toNanoSeconds(days, hours, minutes) {
-          const data = {
+            return days * dayNanos + hours * hourNanos + minutes * minuteNanos;
-              enabled: document.getElementById('autoclose_enabled').checked,
+        }
-              on_user_leave: document.getElementById('autoclose_on_user_leave').checked,
-              since_open_with_no_response: toNanoSeconds(document.getElementById('sinceopen_days').value, document.getElementById('sinceopen_hours').value, document.getElementById('sinceopen_minutes').value),
-              since_last_message: toNanoSeconds(document.getElementById('sincelast_days').value, document.getElementById('sincelast_hours').value, document.getElementById('sincelast_minutes').value),
-          };
 
-          const res = await axios.post('/api/{{.guildId}}/autoclose', data);
+        async function updateAutoCloseSettings() {
-          if (res.status !== 200 || !res.data.success) {
+            const data = {
-              showToast('Error', res.data.error);
+                enabled: document.getElementById('autoclose_enabled').checked,
-              return;
+                on_user_leave: document.getElementById('autoclose_on_user_leave').checked,
-          }
+                since_open_with_no_response: toNanoSeconds(document.getElementById('sinceopen_days').value, document.getElementById('sinceopen_hours').value, document.getElementById('sinceopen_minutes').value),
+                since_last_message: toNanoSeconds(document.getElementById('sincelast_days').value, document.getElementById('sincelast_hours').value, document.getElementById('sincelast_minutes').value),
+            };
 
-          showToast('Success', 'Auto close settings updated');
+            const res = await axios.post('/api/{{.guildId}}/autoclose', data);
-      }
+            if (res.status !== 200 || !res.data.success) {
+                showToast('Error', res.data.error);
+                return;
+            }
 
-      loadAutoCloseSettings();
+            showToast('Success', 'Auto close settings updated');
+        }
     </script>
 
     <script>
@@ -508,5 +507,13 @@
             return success;
         }
     </script>
+
+    <script>
+        withLoadingScreen(() => {
+            loadData();
+            loadClaimSettings();
+            loadAutoCloseSettings();
+        });
+    </script>
   </div>
 {{end}}

public/templates/views/tags.tmpl

@@ -118,7 +118,7 @@
           }
       }
 
-      loadData();
+      withLoadingScreen(loadData);
     </script>
   </div>
 {{end}}

public/templates/views/ticketlist.tmpl

@@ -52,7 +52,7 @@
         }
     }
 
-    loadData();
+    withLoadingScreen(loadData);
   </script>
 </div>
 {{end}}

public/templates/views/ticketview.tmpl

@@ -106,7 +106,7 @@
         }
     }
 
-    loadData();
+    withLoadingScreen(loadData);
   </script>
 
   <script>

public/templates/views/whitelabel.tmpl

@@ -214,8 +214,6 @@
           document.getElementById('status').value = res.data.status;
       }
 
-      loadStatus();
-
       async function loadErrors() {
           const res = await axios.get('/user/whitelabel/errors');
           if (res.status !== 200 || !res.data.success) {
@@ -235,8 +233,6 @@
           }
       }
 
-      loadErrors();
-
       async function loadGuilds() {
           // get selected guild
           const settingsRes = await axios.get('/user/whitelabel');
@@ -271,6 +267,10 @@
           }
       }
 
-      loadGuilds();
+      withLoadingScreen(() => {
+          loadStatus();
+          loadErrors();
+          loadGuilds();
+      });
   </script>
 {{end}}