Fix loadingDirectives match elements from nested components

Author: smnandre

src/LiveComponent/assets/dist/live_controller.js

@@ -2403,7 +2403,8 @@ class LoadingPlugin {
     }
     getLoadingDirectives(element) {
         const loadingDirectives = [];
-        let matchingElements = element.querySelectorAll('[data-loading]');
+        let matchingElements = [...element.querySelectorAll('[data-loading]')];
+        matchingElements = matchingElements.filter((elt) => elt.closest('[data-controller="live"]') === element);
         if (element.hasAttribute('data-loading')) {
             matchingElements = [element, ...matchingElements];
         }

src/LiveComponent/assets/src/Component/plugins/LoadingPlugin.ts

@@ -150,7 +150,10 @@ export default class implements PluginInterface {
 
     getLoadingDirectives(element: HTMLElement|SVGElement) {
         const loadingDirectives: ElementLoadingDirectives[] = [];
-        let matchingElements = element.querySelectorAll('[data-loading]');
+        let matchingElements = [...element.querySelectorAll('[data-loading]')];
+
+        // ignore elements which are inside a nested "live" component
+        matchingElements = matchingElements.filter((elt) => elt.closest('[data-controller="live"]') === element);
 
         // querySelectorAll doesn't include the element itself
         if (element.hasAttribute('data-loading')) {