Description
I'm trying to add the loading state behaviour documented at https://symfony.com/bundles/ux-live-component/current/index.html#targeting-loading-for-a-specific-action to my application.
I think I'm running into a bug that is not specific for my setup (PHP 8.2.14, Symfony 5.4.33, symfony/ux-live-component 2.13.3).
I have a component that looks like this:
Class:
#[AsLiveComponent(
'test_child',
'@test_child.component.html.twig'
)]
class TestChildComponent extends AbstractController
{
use DefaultActionTrait;
#[LiveAction]
public function slowOperation(): void
{
sleep(2);
}
}Template:
<div {{ attributes }}>
<a
data-action="live#action"
data-action-name="slowOperation"
>
Click me...
</a>
<div data-loading="action(slowOperation)|show">Loading...</div>
</div>This works as expected when embedding the component into a template which is served through a "normal" Controller action:
(Please see https://www.dropbox.com/scl/fo/cifcwzq66p5fkxmw0lsh6/h?rlkey=h2o2z1753sdoqeqhis17vqf3n&dl=0 for hi-resolution versions of the screen recordings)
The "loading" message briefly flashes while the page and its component is being loaded, and is then only shown while the request for the "slowOperation" action is running, being removed when this has finished — as expected.
This behaviour becomes broken when I put the TestChildComponent into a TestParentComponent, like this:
Parent class:
#[AsLiveComponent(
'test_parent',
'@test_parent.component.html.twig'
)]
class TestParentComponent extends AbstractController
{
use DefaultActionTrait;
}Parent template:
<div {{ attributes }}>
<twig:test_child />
</div>My assumption is that this should not change the behaviour in any way, but it does:
As before, there is only a brief flash of the loading message upon full-page-load. However, when clicking the button and thus triggering the action, the loading message is shown but remains shown, even after the action/request has finished.
Only subsequent clicks then result in the correct behaviour.
I'm seeing even wilder misbehaviour in my actual code, where the element with the data-loading attribute is shown (and remains shown) even when I'm only leaving a form field and no action is triggered at all.