Use modernized waitMe plugin (#3213)

Author: PromoFaux

package-lock.json

@@ -50,7 +50,7 @@
     "nprogress": "0.2.0",
     "qrious": "4.0.2",
     "select2": "4.0.13",
-    "waitme": "1.19.0"
+    "modernized-waitme": "1.0.0"
   },
   "devDependencies": {
     "autoprefixer": "^10.4.21",

package.json

@@ -5,7 +5,7 @@
  *  This file is copyright under the latest version of the EUPL.
  *  Please see LICENSE file for your rights under this license. */
 
-/* global moment:false, apiUrl: false, apiFailure: false, updateFtlInfo: false, NProgress:false */
+/* global moment:false, apiUrl: false, apiFailure: false, updateFtlInfo: false, NProgress:false, WaitMe:false */
 
 $(function () {
   // CSRF protection for AJAX requests, this has to be configured globally
@@ -635,6 +635,7 @@ function listAlert(type, items, data) {
   );
 }
 
+let waitMe = null;
 // Callback function for the loading overlay timeout
 function loadingOverlayTimeoutCallback(reloadAfterTimeout) {
   // Try to ping FTL to see if it finished restarting
@@ -650,7 +651,7 @@ function loadingOverlayTimeoutCallback(reloadAfterTimeout) {
       if (reloadAfterTimeout) {
         location.reload();
       } else {
-        $(".wrapper").waitMe("hide");
+        waitMe.hideAll();
       }
     })
     .fail(function () {
@@ -661,7 +662,7 @@ function loadingOverlayTimeoutCallback(reloadAfterTimeout) {
 
 function loadingOverlay(reloadAfterTimeout = false) {
   NProgress.start();
-  $(".wrapper").waitMe({
+  waitMe = new WaitMe(".wrapper", {
     effect: "bounce",
     text: "Pi-hole is currently applying your changes...",
     bg: "rgba(0,0,0,0.7)",

scripts/js/utils.js

@@ -99,7 +99,7 @@ is_authenticated = mg.request_info.is_authenticated
     <link rel="stylesheet" href="<?=pihole.fileversion('vendor/daterangepicker/daterangepicker.min.css')?>">
     <link rel="stylesheet" href="<?=pihole.fileversion('vendor/bootstrap-toggle/bootstrap-toggle.min.css')?>">
 <? end ?>
-    <link rel="stylesheet" href="<?=pihole.fileversion('vendor/waitMe/waitMe.min.css')?>">
+    <link rel="stylesheet" href="<?=pihole.fileversion('vendor/waitMe-js/waitMe.min.css')?>">
     <link rel="stylesheet" href="<?=pihole.fileversion('vendor/select2/select2.min.css')?>">
     <link rel="stylesheet" href="<?=pihole.fileversion('vendor/adminLTE/AdminLTE.min.css')?>">
 
@@ -119,6 +119,6 @@ is_authenticated = mg.request_info.is_authenticated
     <script defer src="<?=pihole.fileversion('vendor/bootstrap/js/bootstrap.min.js')?>"></script>
     <script defer src="<?=pihole.fileversion('vendor/adminLTE/adminlte.min.js')?>"></script>
     <script defer src="<?=pihole.fileversion('vendor/bootstrap-notify/bootstrap-notify.min.js')?>"></script>
-    <script defer src="<?=pihole.fileversion('vendor/waitMe/waitMe.min.js')?>"></script>
+    <script defer src="<?=pihole.fileversion('vendor/waitMe-js/modernized-waitme-min.js')?>"></script>
     <script defer src="<?=pihole.fileversion('vendor/nprogress/nprogress.min.js')?>"></script>
     <script defer src="<?=pihole.fileversion('scripts/js/utils.js')?>"></script>