Separation of concerns: use a loading controller

Two different events can be used: `show-loading` and `hide-loading`.

I'm not 100% sure this is the right way to go, but let's try!

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": "productsV3"}
-  #loading-spinner.spinner-container{"data-productsV3-target": "loading"}
+  #loading-spinner.spinner-container{ "data-controller": "loading" }
     .spinner
     = t('.loading')
   #products-content

app/webpacker/controllers/loading_controller.js

@@ -0,0 +1,22 @@
+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 = () => {
+    this.element.classList.add("hidden");
+  };
+
+  showLoading = () => {
+    this.element.classList.remove("hidden");
+  };
+}

app/webpacker/controllers/productsV3_controller.js

@@ -1,8 +1,6 @@
 import ApplicationController from "./application_controller";
 
 export default class extends ApplicationController {
-  static targets = ["loading"];
-
   connect() {
     super.connect();
     // Fetch the products on page load
@@ -17,19 +15,13 @@ export default class extends ApplicationController {
     this.stimulate("ProductsV3#fetch");
   };
 
-  hideLoading = () => {
-    this.loadingTarget.classList.add("hidden");
-  };
-
-  showLoading = () => {
-    this.loadingTarget.classList.remove("hidden");
-  };
-
   beforeFetch(element, reflex, noop, reflexId) {
-    this.showLoading();
+    const event = new CustomEvent("show-loading");
+    document.dispatchEvent(event);
   }
 
   afterFetch(element, reflex, noop, reflexId) {
-    this.hideLoading();
+    const event = new CustomEvent("hide-loading");
+    document.dispatchEvent(event);
   }
 }