Allow to define a loading template for deferred live component

Author: jakubtobiasz

src/LiveComponent/src/EventListener/AddLiveAttributesSubscriber.php

@@ -76,12 +76,17 @@ public function onPreRender(PreRenderEvent $event): void
 
             $hasLiveId = isset($originalAttributes['data-live-id']);
             $isDeferred = array_key_exists('defer', $originalAttributes);
+            $loadingTemplate = $originalAttributes['defer-loading-template'] ?? null;
 
             // if the original attributes has a data-live-id, it means the component
             // was already rendered
             if (!$hasLiveId && $isDeferred) {
-                $attributes = $attributes->without('defer');
+                $attributes = $attributes->without('defer', 'defer-loading-template');
                 $event->setTemplate('@LiveComponent/deferred.html.twig');
+
+                if ($loadingTemplate) {
+                    $variables['loadingTemplate'] = $loadingTemplate;
+                }
             }
         }
 

src/LiveComponent/templates/deferred.html.twig

@@ -1 +1,5 @@
-<div {{ attributes }} data-action="live:connect->live#$render"></div>
+<div {{ attributes }} data-action="live:connect->live#$render">
+    {% if loadingTemplate is defined and loadingTemplate != null %}
+        {{ include(loadingTemplate) }}
+    {% endif %}
+</div>