From ddfc60c85e100861bf0ca1f21506c0f69ea0957c Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Fri, 30 Jun 2023 15:53:51 +0200
Subject: [PATCH] Don't use events, but call the loading controller itself

---
 app/views/admin/products_v3/index.html.haml   |  2 +-
 .../controllers/loading_controller.js         |  7 -------
 .../controllers/products_controller.js        | 19 +++++++++++++++----
 3 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/app/views/admin/products_v3/index.html.haml b/app/views/admin/products_v3/index.html.haml
index d5551ead36..26e10e7559 100644
--- a/app/views/admin/products_v3/index.html.haml
+++ b/app/views/admin/products_v3/index.html.haml
@@ -11,7 +11,7 @@
 = render partial: 'spree/admin/shared/product_sub_menu'
 
 #products_v3_page{"data-controller": "products", "data-page": @page , "data-perpage": @per_page}
-  #loading-spinner.spinner-container{ "data-controller": "loading" }
+  #loading-spinner.spinner-container{ "data-controller": "loading", "data-products-target": "loading" }
     .spinner
     = t('.loading')
   #products-content
diff --git a/app/webpacker/controllers/loading_controller.js b/app/webpacker/controllers/loading_controller.js
index 903cc9898d..4d93c2bd6c 100644
--- a/app/webpacker/controllers/loading_controller.js
+++ b/app/webpacker/controllers/loading_controller.js
@@ -3,13 +3,6 @@ import ApplicationController from "./application_controller";
 export default class extends ApplicationController {
   connect() {
     super.connect();
-    document.addEventListener("show-loading", this.showLoading);
-    document.addEventListener("hide-loading", this.hideLoading);
-  }
-
-  disconnect() {
-    document.removeEventListener("show-loading", this.showLoading);
-    document.removeEventListener("hide-loading", this.hideLoading);
   }
 
   hideLoading = () => {
diff --git a/app/webpacker/controllers/products_controller.js b/app/webpacker/controllers/products_controller.js
index b79caee14e..ed8d5e02c9 100644
--- a/app/webpacker/controllers/products_controller.js
+++ b/app/webpacker/controllers/products_controller.js
@@ -1,6 +1,8 @@
 import ApplicationController from "./application_controller";
 
 export default class extends ApplicationController {
+  static targets = ["loading"];
+
   connect() {
     super.connect();
     // Fetch the products on page load
@@ -16,12 +18,21 @@ export default class extends ApplicationController {
   }
 
   showLoading = () => {
-    const event = new CustomEvent("show-loading");
-    document.dispatchEvent(event);
+    if (this.getLoadingController()) {
+      this.getLoadingController().showLoading();
+    }
   };
 
   hideLoading = () => {
-    const event = new CustomEvent("hide-loading");
-    document.dispatchEvent(event);
+    if (this.getLoadingController()) {
+      this.getLoadingController().hideLoading();
+    }
+  };
+
+  getLoadingController = () => {
+    return (this.loadongController = this.application.getControllerForElementAndIdentifier(
+      this.loadingTarget,
+      "loading"
+    ));
   };
 }