[LiveComponent] Fix - data-loading expressions not working on root node

WebMamba · Dec 9, 2023 · 346dae7 · 346dae7
1 parent bb32456
commit 346dae7
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 2 deletions.
diff --git a/src/LiveComponent/assets/dist/live_controller.js b/src/LiveComponent/assets/dist/live_controller.js
@@ -2392,7 +2392,11 @@ class LoadingPlugin {
     }
     getLoadingDirectives(element) {
         const loadingDirectives = [];
-        element.querySelectorAll('[data-loading]').forEach((element => {
+        let matchingElements = element.querySelectorAll('[data-loading]');
+        if (element.hasAttribute('data-loading')) {
+            matchingElements = [element, ...matchingElements];
+        }
+        matchingElements.forEach((element => {
             if (!(element instanceof HTMLElement) && !(element instanceof SVGElement)) {
                 throw new Error('Invalid Element Type');
             }

diff --git a/src/LiveComponent/assets/src/Component/plugins/LoadingPlugin.ts b/src/LiveComponent/assets/src/Component/plugins/LoadingPlugin.ts
@@ -155,7 +155,15 @@ export default class implements PluginInterface {
     getLoadingDirectives(element: HTMLElement|SVGElement) {
         const loadingDirectives: ElementLoadingDirectives[] = [];
 
-        element.querySelectorAll('[data-loading]').forEach((element => {
+        let matchingElements = element.querySelectorAll('[data-loading]');
+
+        // querySelectorAll doesn't include the element itself
+        if (element.hasAttribute('data-loading')) {
+            // add element at the beginning of matchingElements
+            matchingElements = [element, ...matchingElements];
+        }
+
+        matchingElements.forEach((element => {
             if (!(element instanceof HTMLElement) && !(element instanceof SVGElement)) {
                 throw new Error('Invalid Element Type');
             }

diff --git a/src/LiveComponent/assets/test/controller/loading.test.ts b/src/LiveComponent/assets/test/controller/loading.test.ts
@@ -48,6 +48,35 @@ describe('LiveController data-loading Tests', () => {
         expect(getByTestId(test.element, 'loading-element')).not.toBeVisible();
     });
 
+    it('executes basic loading functionality on root element', async () => {
+        const test = await createTest({food: 'pizza'}, (data: any) => `
+            <div ${initComponent(data)} data-loading="addClass(opacity-20)">
+                <span>I like: ${data.food}</span> 
+                <button data-action="live#$render">Re-Render</button>
+            </div>
+        `);
+
+        test.expectsAjaxCall()
+            .serverWillChangeProps((data: any) => {
+                // to help detect when rendering is done
+                data.food = 'popcorn';
+            })
+            // delay so we can check loading
+            .delayResponse(50);
+
+        // wait for element to hide itself on start up
+        await waitFor(() => expect(test.element).not.toHaveClass('opacity-20'));
+
+        getByText(test.element, 'Re-Render').click();
+        // element should instantly be visible
+        expect(test.element).toHaveClass('opacity-20');
+
+        // wait for loading to finish
+        await waitFor(() => expect(test.element).toHaveTextContent('I like: popcorn'));
+        // loading element should now be hidden
+        expect(test.element).not.toHaveClass('opacity-20');
+    });
+
     it('takes into account the "action" modifier', async () => {
         const test = await createTest({}, (data: any) => `
             <div ${initComponent(data)}>