vanilla.js pageloader

_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;

_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;

_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);