[LiveComponent] New placeholder macro to generate defer/lazy skeleton

When you use defer/lazy component you can customize the "loading" content in the calling template. But for components that you reuse on multiple pages, it leads to code duplicates.

Moreover, you cannot adapt the size / content depending on the props.

So... introducing the "placeholder" macro.

If you define such macro in your lazy component template, it will be called to generate this temporary content.

And you'll get the props of your component as parameters

Author: smnandre

src/LiveComponent/src/EventListener/DeferLiveComponentSubscriber.php

@@ -52,6 +52,7 @@ public function onPreRender(PreRenderEvent $event): void
             return;
         }
 
+        $componentTemplate = $event->getMetadata()->getTemplate();
         $event->setTemplate('@LiveComponent/deferred.html.twig');
 
         $variables = $event->getVariables();
@@ -66,6 +67,8 @@ public function onPreRender(PreRenderEvent $event): void
             $variables['loadingTag'] = $mountedComponent->getExtraMetadata('loading-tag');
         }
 
+        $variables['componentTemplate'] = $componentTemplate;
+
         $event->setVariables($variables);
     }
 

src/LiveComponent/src/Test/TestLiveComponent.php

@@ -43,7 +43,7 @@ public function __construct(
         private UrlGeneratorInterface $router,
     ) {
         $this->client->catchExceptions(false);
-        $this->data['attributes']['data-live-id'] ??= 'in-a-real-scenario-it-would-already-have-one---provide-one-yourself-if-needed';
+        $this->data['attributes']['id'] ??= 'in-a-real-scenario-it-would-already-have-one---provide-one-yourself-if-needed';
     }
 
     public function render(): RenderedComponent

src/LiveComponent/templates/deferred.html.twig

@@ -2,6 +2,11 @@
     {% block loadingContent %}
         {% if loadingTemplate != null %}
             {{ include(loadingTemplate) }}
+        {% else %}
+            {% from componentTemplate import placeholder %}
+            {% if placeholder is defined %}
+                {{ placeholder(__props|default) }}
+            {% endif %}
         {% endif %}
     {% endblock %}
 </{{ loadingTag }}>

src/LiveComponent/tests/Fixtures/Component/DeferredComponentWithPlaceholder.php

@@ -0,0 +1,18 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Symfony\UX\LiveComponent\Tests\Fixtures\Component;
+
+use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
+use Symfony\UX\LiveComponent\Attribute\LiveProp;
+use Symfony\UX\LiveComponent\DefaultActionTrait;
+
+#[AsLiveComponent('deferred_component_with_placeholder', method: 'get')]
+final class DeferredComponentWithPlaceholder
+{
+    use DefaultActionTrait;
+
+    #[LiveProp]
+    public int $rows = 6;
+}

src/LiveComponent/tests/Fixtures/templates/components/deferred_component_with_placeholder.html.twig

@@ -0,0 +1,9 @@
+<div {{ attributes }}>
+    {# for row in this.rows ... #}
+</div>
+
+{% macro placeholder(props) %}
+    {%- for i in 1..props.rows -%}
+        <span class="loading-row"></span>
+    {%- endfor -%}
+{% endmacro %}

src/LiveComponent/tests/Fixtures/templates/render_component_with_placeholder.html.twig

@@ -0,0 +1 @@
+<twig:deferred_component_with_placeholder rows="2" />

src/LiveComponent/tests/Fixtures/templates/render_deferred_component_with_placeholder.html.twig

@@ -0,0 +1 @@
+<twig:deferred_component_with_placeholder rows="2" defer />

src/LiveComponent/tests/Functional/EventListener/DeferLiveComponentSubscriberTest.php

@@ -77,6 +77,27 @@ public function testItIncludesGivenTemplateWhileLoadingDeferredComponent(): void
         $this->assertStringContainsString('Long awaited data', $div->html());
     }
 
+    public function testItIncludesComponentTemplateBlockAsPlaceholder(): void
+    {
+        $div = $this->browser()
+            ->visit('/render-template/render_deferred_component_with_placeholder')
+            ->assertSuccessful()
+            ->crawler()
+            ->filter('div');
+
+        $this->assertSame('<span class="loading-row"></span><span class="loading-row"></span>', trim($div->html()));
+    }
+
+    public function testItDoesNotIncludesPlaceholderWhenRendered(): void
+    {
+        $div = $this->browser()
+            ->visit('/render-template/render_component_with_placeholder')
+            ->assertSuccessful()
+            ->crawler();
+
+        $this->assertStringNotContainsString('<span class="loading-row">', $div->html());
+    }
+
     public function testItAllowsToSetCustomLoadingHtmlTag(): void
     {
         $crawler = $this->browser()

src/LiveComponent/tests/Functional/EventListener/InterceptChildComponentRenderSubscriberTest.php

@@ -128,7 +128,7 @@ public function testItUsesKeysToRenderChildrenLiveIds(): void
             ->assertSuccessful()
             ->assertHtml()
             ->assertElementCount('ul li', 3)
-            // check for the live-id we expect based on the key
+            // check for the id we expect based on the key
             ->assertContains('id="live-521026374-the-key0"')
             ->assertNotContains('key="the-key0"')
             ->visit($urlWithChangedFingerprints)