Adjust attributes names and allow choosing a custom HTML tag

Author: jakubtobiasz

src/LiveComponent/src/EventListener/AddLiveAttributesSubscriber.php

@@ -35,6 +35,10 @@
  */
 final class AddLiveAttributesSubscriber implements EventSubscriberInterface, ServiceSubscriberInterface
 {
+    private const DEFAULT_LOADING_TAG = 'div';
+
+    private const DEFAULT_LOADING_TEMPLATE = null;
+
     public function __construct(
         private ComponentStack $componentStack,
         private TemplateMap $templateMap,
@@ -75,14 +79,14 @@ public function onPreRender(PreRenderEvent $event): void
             }
 
             $inputProps = $event->getMountedComponent()->getInputProps();
-            $isDeferred = array_key_exists('defer', $inputProps);
+            $isDeferred = \array_key_exists('defer', $inputProps);
 
             if ($isDeferred) {
                 $event->setTemplate('@LiveComponent/deferred.html.twig');
 
-                if ($loadingTemplate) {
-                    $variables['loadingTemplate'] = $loadingTemplate;
-                }
+                $variables['loadingTag'] = $originalAttributes['loading-tag'] ?? self::DEFAULT_LOADING_TAG;
+                $variables['loadingTemplate'] = $originalAttributes['loading-template'] ?? self::DEFAULT_LOADING_TEMPLATE;
+                $attributes = $attributes->without('defer', 'loading-element', 'loading-template');
             }
         }
 

src/LiveComponent/templates/deferred.html.twig

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