Added a ban list loader, hiding the table until it fully initializes

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

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>