From fea1c7ced4081bde819d4dbb4f175406198f714d Mon Sep 17 00:00:00 2001
From: Jacob Tobiasz <jakub.tobiasz@icloud.com>
Date: Tue, 26 Sep 2023 18:15:24 +0200
Subject: [PATCH] Adjust attributes names and allow choosing a custom HTML tag

---
 .../EventListener/AddLiveAttributesSubscriber.php    | 12 ++++++++----
 src/LiveComponent/templates/deferred.html.twig       | 12 +++++++-----
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/LiveComponent/src/EventListener/AddLiveAttributesSubscriber.php b/src/LiveComponent/src/EventListener/AddLiveAttributesSubscriber.php
index eb1135eb169..7897db6b197 100644
--- a/src/LiveComponent/src/EventListener/AddLiveAttributesSubscriber.php
+++ b/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');
             }
         }
 
diff --git a/src/LiveComponent/templates/deferred.html.twig b/src/LiveComponent/templates/deferred.html.twig
index 1c0b6625b60..0705be8e4ee 100644
--- a/src/LiveComponent/templates/deferred.html.twig
+++ b/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 }}>