From 63680e2b42fda875ec2b8351a6bbb01f23c07839 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Igor=20Ste=CC=A8pien=CC=81?= <igor@istepien.dev>
Date: Mon, 9 Oct 2023 23:34:57 +0200
Subject: [PATCH] vanilla.js pageloader

---
 _dev/js/theme/components/PageLoader.js     | 17 ---------
 _dev/js/theme/components/customer/index.js |  1 -
 _dev/js/theme/components/usePageLoader.js  | 40 ++++++++++++++++++++++
 _dev/js/theme/index.js                     |  4 +--
 4 files changed, 42 insertions(+), 20 deletions(-)
 delete mode 100644 _dev/js/theme/components/PageLoader.js
 create mode 100644 _dev/js/theme/components/usePageLoader.js

diff --git a/_dev/js/theme/components/PageLoader.js b/_dev/js/theme/components/PageLoader.js
deleted file mode 100644
index 239c227b..00000000
--- a/_dev/js/theme/components/PageLoader.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import $ from 'jquery';
-
-class PageLoader {
-  constructor() {
-    this.$body = $('body');
-  }
-
-  showLoader() {
-    this.$body.addClass('page-loader-active');
-  }
-
-  hideLoader() {
-    this.$body.removeClass('page-loader-active');
-  }
-}
-
-export default PageLoader;
diff --git a/_dev/js/theme/components/customer/index.js b/_dev/js/theme/components/customer/index.js
index 9f1aa423..b5a4ceb0 100644
--- a/_dev/js/theme/components/customer/index.js
+++ b/_dev/js/theme/components/customer/index.js
@@ -1,5 +1,4 @@
 import DOMReady from "../../utils/DOMReady";
-import $ from "jquery";
 
 const initCustomerLinksTriggerActive = () => {
   const url = window.location.pathname;
diff --git a/_dev/js/theme/components/usePageLoader.js b/_dev/js/theme/components/usePageLoader.js
new file mode 100644
index 00000000..41a3b8d3
--- /dev/null
+++ b/_dev/js/theme/components/usePageLoader.js
@@ -0,0 +1,40 @@
+/**
+ * A utility module for managing the page loader state.
+ *
+ * @return {showLoader, hideLoader}
+ * @example
+ * const pageLoader = usePageLoader();
+ * pageLoader.showLoader(); // Display the page loader
+ * pageLoader.hideLoader(); // Hide the page loader
+ */
+const usePageLoader = () => {
+  const body = document.body;
+  const ACTIVE_CLASS = 'page-loader-active';
+
+  /**
+   * Show the page loader.
+   *
+   * @method showLoader
+   * @returns {void}
+   */
+  const showLoader = () => {
+    body.classList.add(ACTIVE_CLASS);
+  };
+
+  /**
+   * Hide the page loader.
+   *
+   * @method hideLoader
+   * @returns {void}
+   */
+  const hideLoader = () => {
+    body.classList.remove(ACTIVE_CLASS);
+  };
+
+  return {
+    showLoader,
+    hideLoader,
+  };
+};
+
+export default usePageLoader;
diff --git a/_dev/js/theme/index.js b/_dev/js/theme/index.js
index c546b29e..d8be1ce2 100644
--- a/_dev/js/theme/index.js
+++ b/_dev/js/theme/index.js
@@ -24,14 +24,14 @@ for (const i in EventEmitter.prototype) {
 import usePasswordPolicy from './components/password/usePasswordPolicy';
 import Form from './components/form';
 import PageLazyLoad from './components/Lazyload';
-import PageLoader from './components/PageLoader';
 import httpRequestErrorHandler from './handler/error/httpRequestErrorHandler';
+import usePageLoader from "./components/usePageLoader";
 
 prestashop.pageLazyLoad = new PageLazyLoad({
   selector: '.lazyload',
 });
 
-prestashop.pageLoader = new PageLoader();
+prestashop.pageLoader = usePageLoader();
 
 prestashop.on('handleError', httpRequestErrorHandler);