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

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)

src/TwigComponent/tests/Integration/ComponentExtensionTest.php

@@ -14,7 +14,6 @@
 use Symfony\Bundle\FrameworkBundle\Test\KernelTestCase;
 use Symfony\UX\TwigComponent\Tests\Fixtures\User;
 use Twig\Environment;
-use Twig\Error\RuntimeError;
 
 /**
  * @author Kevin Bond <kevinbond@gmail.com>