diff --git a/app/views/admin/products_v3/index.html.haml b/app/views/admin/products_v3/index.html.haml
index 2cb442b141..4c92723599 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": "productsV3"}
-  #loading-spinner.spinner-container{"data-productsV3-target": "loading"}
+  #loading-spinner.spinner-container{ "data-controller": "loading" }
     .spinner
     = t('.loading')
   #products-content
diff --git a/app/webpacker/controllers/loading_controller.js b/app/webpacker/controllers/loading_controller.js
new file mode 100644
index 0000000000..903cc9898d
--- /dev/null
+++ b/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");
+  };
+}
diff --git a/app/webpacker/controllers/productsV3_controller.js b/app/webpacker/controllers/productsV3_controller.js
index 4e783f26c3..62b653c4db 100644
--- a/app/webpacker/controllers/productsV3_controller.js
+++ b/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);
   }
 }