Add deferred live components #1143

jakubtobiasz · 2023-09-25T22:25:20Z

Q	A
Bug fix?	no
New feature?	yes
Tickets	Fix #994
License	MIT

Initially this feature was called lazy loading, but this name could be misleading, as my solution doesn't provide real lazy loading. So, I named it deferred live components, I guess this name fits better.

How to use it?

<twig:MyComponent defer />

In such case we'll get an empty div. Once live:connect event called, it'll load the component in the background. We can also define a template to be rendered while loading (e.g. a cool spinner or some text).

<twig:MyComponent defer defer-loading-template="my_cool_spinner.html.twig" />

I'm open for any suggestions 🙌🏼!

weaverryan

I've left some notes - but this is wonderful! The name "lazy" is trendier... but defer might be slightly more accurate. Thinking ahead: if we, in the future, extended this to "don't load until the element is in the viewport", how would we name that?

src/LiveComponent/src/EventListener/AddLiveAttributesSubscriber.php

weaverryan · 2023-09-26T13:55:26Z

src/LiveComponent/src/EventListener/AddLiveAttributesSubscriber.php

+            // if the original attributes has a data-live-id, it means the component
+            // was already rendered
+            if (!$hasLiveId && $isDeferred) {
+                $attributes = $attributes->without('defer', 'defer-loading-template');


I'd like the shorter loading-template name... or maybe loadingTemplate... we don't do any transformations from foo-bar in HTML -> to fooBar as a property, so we're typically using camel case attribute names... since they don't actually render in HTML.

I decided to use loading-template as an attribute name, but in the template it's loadingTemplate. kebab-case is a common pick for HTML, so I guess it fits perfectly here.

src/LiveComponent/templates/deferred.html.twig

weaverryan · 2023-09-26T13:57:24Z

src/LiveComponent/src/EventListener/AddLiveAttributesSubscriber.php

+            // was already rendered
+            if (!$hasLiveId && $isDeferred) {
+                $attributes = $attributes->without('defer', 'defer-loading-template');
+                $event->setTemplate('@LiveComponent/deferred.html.twig');


It could be outside of the scope of this PR, but it'd be great to have some semantic configuration so you could control the default loading template globally. I have some semantic config introduced in #1140, so it might make sense to wait for that before adding this new option (e.g. loading_template)

src/LiveComponent/templates/deferred.html.twig

weaverryan

I like it! Though, I do think we're going to need to remove the loading-template from the data-live-props-value. Both for being responsible/clean... but also not exposing template paths to the frontend.

src/LiveComponent/src/EventListener/AddLiveAttributesSubscriber.php

jakubtobiasz · 2023-09-26T16:34:33Z

Thinking ahead: if we, in the future, extended this to "don't load until the element is in the viewport", how would we name that?

I guess we can call it lazy then. Or maybe there's a case to keep both, and have the current way (defer) and the new one (lazy).

weaverryan · 2023-09-26T17:04:27Z

Indeed, I think defer better communicates what this does and lazy would better describe the viewport idea.

smnandre · 2023-09-26T18:38:36Z

src/LiveComponent/templates/deferred.html.twig

@@ -0,0 +1,7 @@
+<{{ loadingTag }} {{ attributes }} data-action="live:connect->live#$render">
+    {% block loadingContent %}


Would this working ?

<twig:Notifications defer> <p>Loading...</p> </twig:Notifications>

If not, i thing this could be a great DX addition... wdyt ?

If you'd want to use the "default" content block you'd just have to name it

<twig:Notifications defer> {# Displayed on page load #} <p>Loading...</p> {# Displayed on demand #} <twig:block name="content"> No notification </twig:block> </twig:Notifications>

I've checked this trying to do

<twig:SomeLiveComponent lazy> {% block loadingContent %} Loading... {% endblock %} </twig:SomeLiveComponent>

But it renders SomeLiveComponent instantly 🥲. I'll try to debug how it works, maybe some adjustments and it'll work.

kbond · 2023-09-26T19:03:00Z

Indeed, I think defer better communicates what this does and lazy would better describe the viewport idea.

So, in the future, to be deferred and lazy, you'd need the following?

<twig:MyComponent defer lazy />

I think that would work best as we could utilize lazy with polling:

<twig:MyComponent defer lazy data-poll />

The above would only load when in the viewport and then only poll when still in the viewport.

jakubtobiasz · 2023-09-26T20:15:45Z

So, in the future, to be deferred and lazy, you'd need the following?

I guess deferred or lazy should be enough 🤔.

kbond · 2023-09-26T21:42:30Z

I guess deferred or lazy should be enough 🤔.

I think we'd need both to allow the following to be possibly:

<twig:MyComponent lazy data-poll />

This would load the component initially, then only poll when in the viewport.

src/TwigComponent/src/MountedComponent.php

kbond · 2023-09-30T19:10:45Z

Question: should this be data-defer? If I understand correctly, since the defer attribute isn't rendered in the actual browser dom, it isn't an issue but... consistency? I don't have a strong opinion myself, just wanted to bring this up for discussion. Assuming we add a lazy attribute later for viewport/current tab detection, this will need to be data-lazy (and we already have data-poll).

smnandre · 2023-10-01T16:38:56Z

Question: should this be data-defer? If I understand correctly, since the defer attribute isn't rendered in the actual browser dom, it isn't an issue but... consistency? I don't have a strong opinion myself, just wanted to bring this up for discussion. Assuming we add a lazy attribute later for viewport/current tab detection, this will need to be data-lazy (and we already have data-poll).

My (very personal) interpretation:

eager = "now"
defer = "bottom of the todo-list"
lazy = "much later / when it'll be needed"

So "defer" is more to me like the kernel.terminate.. and lazy quite working there..

Two other ideas:

"async" simple and not related to "when" it will be renderer..
data-render=live

jakubtobiasz · 2023-10-02T04:53:44Z

The name defer is inspired by attributes available for script tag.

If async is present: The script is downloaded in parallel to parsing the page, and executed as soon as it is available (before parsing completes)
If defer is present (and not async): The script is downloaded in parallel to parsing the page, and executed after the page has finished parsing

The component is "executed" after the page loads (and it's also "downloaded" then in our case 😅).

In terms of data- prefix, I guess we get get rid of it in the Twig files, and add this prefix only in the rendered template in all cases 🤔.

weaverryan · 2023-10-02T16:20:14Z

I think we'd need both to allow the following to be possibly:
<twig:MyComponent lazy data-poll />
This would load the component initially, then only poll when in the viewport.

I was imagining these as 2 different mechanism. The ability to "only poll when in viewport" would be a property of the data-poll specifically - so something like;

<twig:MyComponent lazy data-poll="lazy|$render" />

Yes, that |$render at the end is a little bulky. But the point is, lazy is a modifier of the polling.

weaverryan

Can you take a shot at some docs also?

Thanks!

src/LiveComponent/src/EventListener/DeferLiveComponentSubscriber.php

weaverryan · 2023-10-02T16:24:54Z

src/LiveComponent/src/EventListener/DeferLiveComponentSubscriber.php

+
+        $mountedComponent->setAttributes(
+            $mountedComponent->getAttributes()->without('defer', 'loading-template', 'loading-tag'),
+        );


@kbond does this look clunky to you? The fact that we need to... kind of modify the attributes in $variables[$attributesKey] AND also on MountedComponent?

Should we be doing this in an earlier hook? Something that can intercept the defer input prop earlier and remove it? Maybe set that data onto MountedComponent::extraMetadata() so it can be read here to set the variables?

Hmm, perhaps, and I agree it is clunky but it does work within the current feature set. Opportunity for a future refactor.. I know I've said this for a few things recently. Maybe ugly === ok until we need to duplicate it elsewhere?

Yea, I definitely have that on my mind too - finding the balance. What about:

A) In PostMountEvent https://github.com/symfony/ux/blob/2.x/src/TwigComponent/src/ComponentFactory.php#L195 - we add a new addExtraMetadata() method to the event.

B) Then, we keep track of that and put it into the MountedComponent - https://github.com/symfony/ux/blob/2.x/src/TwigComponent/src/ComponentFactory.php#L91-L113 - a little odd, as we need to carry return that "extra metadata" from the private postMount(), but I can't think of a better way. The user can intercept and remove "extra keys" from PostMount... but they don't have access to "attach" that to the MountedComponent.

Yeah, sounds like that would work. I guess I'd be a little concerned about splitting this logic into two places (assuming I am understanding correctly). It's clunky here but at least it's in one spot (which makes it easier to reason about imo).

Gotcha. I'm leaning towards my solution. It just doesn't feel right to allow defer to get ALL the way into attributes... just for us to remove it later, because it is never meant to be an attribute. It is really a special "prop", which should be processed and removed before it ever gets into attributes.

Sorry for the back and forth @jakubtobiasz but does this make sense? It would allow us to remove the new method in MountedComponent

I'm leaning towards my solution

I'm ok with this - no strong objection.

I'll try to take a look this week 🫡. I'll reach you once I find some difficulties 😂.

weaverryan

I like this a lot more - THANK you :). Can you add a small section in the docs for this too? I'm thinking a new ----- section (like Polling) right above Polling https://symfony.com/bundles/ux-live-component/current/index.html#polling called Lazy-Loaded / Deferred Components

weaverryan · 2023-10-11T14:39:20Z

src/LiveComponent/src/EventListener/DeferLiveComponentSubscriber.php

+        }
+
+        $event->setVariables($variables);
+    }


😻 This feels MUCH better to me.

src/LiveComponent/src/EventListener/DeferLiveComponentSubscriber.php

src/TwigComponent/src/MountedComponent.php

weaverryan · 2023-10-12T19:35:14Z

Woohoo! THANK you for this wonderful work and feature Jacob!

This PR was squashed before being merged into the 2.x branch. Discussion ---------- [LiveComponent] Tweaking the defer docs | Q | A | ------------- | --- | Bug fix? | no | New feature? | no | Tickets | None | License | MIT Just some follow-up from #1143 Commits ------- 2f9ef84 [LiveComponent] Tweaking the defer docs

jakubtobiasz force-pushed the gh-994/lazy-live-components branch from eaf7301 to af5f0cf Compare September 25, 2023 22:25

jakubtobiasz changed the title ~~Add a test case covering deferred components~~ Add deferred live components Sep 25, 2023

weaverryan reviewed Sep 26, 2023

View reviewed changes

src/LiveComponent/src/EventListener/AddLiveAttributesSubscriber.php Outdated Show resolved Hide resolved

jakubtobiasz force-pushed the gh-994/lazy-live-components branch from 7f62a42 to fea1c7c Compare September 26, 2023 16:35

smnandre reviewed Sep 26, 2023

View reviewed changes

smnandre reviewed Sep 29, 2023

View reviewed changes

src/TwigComponent/src/MountedComponent.php Outdated Show resolved Hide resolved

weaverryan reviewed Oct 2, 2023

View reviewed changes

jakubtobiasz force-pushed the gh-994/lazy-live-components branch from 6ce07d0 to 213832a Compare October 11, 2023 06:17

weaverryan reviewed Oct 11, 2023

View reviewed changes

jakubtobiasz force-pushed the gh-994/lazy-live-components branch from 213832a to 2280d97 Compare October 11, 2023 15:24

Add deferred live components

d93cc29

weaverryan force-pushed the gh-994/lazy-live-components branch from 2280d97 to d93cc29 Compare October 12, 2023 19:35

weaverryan merged commit e26be66 into symfony:2.x Oct 12, 2023
10 checks passed

weaverryan mentioned this pull request Oct 12, 2023

[LiveComponent] Tweaking the defer docs #1183

Merged

jakubtobiasz deleted the gh-994/lazy-live-components branch October 12, 2023 20:09

smnandre mentioned this pull request Mar 6, 2024

[LiveComponent] Lazy load LiveComponent #1515

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add deferred live components #1143

Add deferred live components #1143

jakubtobiasz commented Sep 25, 2023

weaverryan left a comment

weaverryan Sep 26, 2023

jakubtobiasz Sep 26, 2023

weaverryan Sep 26, 2023

weaverryan left a comment

jakubtobiasz commented Sep 26, 2023

weaverryan commented Sep 26, 2023

smnandre Sep 26, 2023

jakubtobiasz Sep 26, 2023 •

edited

kbond commented Sep 26, 2023

jakubtobiasz commented Sep 26, 2023

kbond commented Sep 26, 2023

kbond commented Sep 30, 2023

smnandre commented Oct 1, 2023

jakubtobiasz commented Oct 2, 2023

weaverryan commented Oct 2, 2023

weaverryan left a comment

weaverryan Oct 2, 2023

kbond Oct 2, 2023

weaverryan Oct 2, 2023

kbond Oct 2, 2023

weaverryan Oct 2, 2023

kbond Oct 2, 2023

jakubtobiasz Oct 2, 2023

weaverryan left a comment

weaverryan Oct 11, 2023

weaverryan commented Oct 12, 2023

		@@ -0,0 +1,7 @@
		<{{ loadingTag }} {{ attributes }} data-action="live:connect->live#$render">
		{% block loadingContent %}

Add deferred live components #1143

Add deferred live components #1143

Conversation

jakubtobiasz commented Sep 25, 2023

weaverryan left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

weaverryan left a comment

Choose a reason for hiding this comment

jakubtobiasz commented Sep 26, 2023

weaverryan commented Sep 26, 2023

Choose a reason for hiding this comment

jakubtobiasz Sep 26, 2023 • edited

Choose a reason for hiding this comment

kbond commented Sep 26, 2023

jakubtobiasz commented Sep 26, 2023

kbond commented Sep 26, 2023

kbond commented Sep 30, 2023

smnandre commented Oct 1, 2023

jakubtobiasz commented Oct 2, 2023

weaverryan commented Oct 2, 2023

weaverryan left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

weaverryan left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

weaverryan commented Oct 12, 2023

jakubtobiasz Sep 26, 2023 •

edited