From 355df433c1b658651dc543fb1d07381e3a8320d0 Mon Sep 17 00:00:00 2001
From: Wruczek <wruczekk@gmail.com>
Date: Tue, 15 Jan 2019 13:29:39 +0100
Subject: [PATCH] Added a ban list loader, hiding the table until it fully
 initializes

---
 src/js/bans.js                   | 5 +++++
 src/private/templates/bans.latte | 9 ++++++++-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/js/bans.js b/src/js/bans.js
index 5a057ac..ff02e09 100644
--- a/src/js/bans.js
+++ b/src/js/bans.js
@@ -12,6 +12,11 @@ $(document).ready(function() {
         language: {
             url: "https://cdn.datatables.net/plug-ins/1.10.19/i18n/" + DATATABLES_LANGUAGE_NAME + ".json"
         },
+        initComplete: function(settings, json) {
+            console.log("DataTables Loaded")
+            $("#banlist-loader").hide()
+            $("#banlist").show()
+        }
         /*
         TODO:
         It looks better with the "search" text as an placeholder instead of the label
diff --git a/src/private/templates/bans.latte b/src/private/templates/bans.latte
index a6bdd2a..6f7de57 100644
--- a/src/private/templates/bans.latte
+++ b/src/private/templates/bans.latte
@@ -16,6 +16,7 @@
                     <i class="fas fa-info-circle"></i>{_"BANS_EMPTY"}
                 </div>
             {else}
+                <!-- Tip shown when the table shrinks, telling you that you can tap a row to view more -->
                 <div id="responsive-table-details-tip" class="alert alert-info alert-dismissible fade show" style="display: none" role="alert">
                     <i class="fas fa-info-circle"></i>{_"BANS_VIEW_MORE_TIP"}
                     <button type="button" class="close" data-dismiss="alert" aria-label="{_"ARIA_CLOSE"}">
@@ -24,6 +25,7 @@
                 </div>
 
                 {if $ipbanned !== false}
+                    <!-- IP ban alert -->
                     <div class="alert alert-danger ban-alert banned" role="alert">
                         <i class="fas fa-exclamation-circle fa-2x"></i>
                         <div>
@@ -35,7 +37,12 @@
                     </div>
                 {/if}
 
-                <table id="banlist" class="table display dt-responsive no-wrap" width="100%">
+                <!-- Loader shown when DataTables is initialising the table -->
+                <div id="banlist-loader" class="position-relative p-3">
+                    <div class="loader"></div>
+                </div>
+
+                <table id="banlist" class="table display dt-responsive no-wrap" width="100%" style="display: none">
                     <thead>
                     <tr>
                         <th data-priority="1">{_"BANS_HEADER_TARGET"}</th>