Live Component loading lazy not working

[royvangeel]

Hi,

following the docs defer is supported from v2.13 and lazy loading from v2.17. I installed v2.16, but implementing defer like mentioned in the docs was not working: {{ component('SomeHeavyComponent', { loading: 'defer' }) }}

Later, I've read it should be { defer: true } for v2.16.

As v2.17 is not released yet, I installed 2.x-dev to try lazy loading. { loading: 'defer' } is now working as expected, an ajax call is fired after page load.

Both HTML and Twig syntax for lazy loading doesn't work for me.

<twig:Acme foo="bar" loading="lazy" />
{{ component('SomeHeavyComponent', { loading: 'lazy' }) }}

I put my component far down the page, so I need to scroll to see the component. But no ajax call is fired. On the other hand, the macro placeholder is visible and the loading attribute is present on the element.

[WebMamba]

Could you share some code, a reproducer can be great! Thanks!

[royvangeel]

Yeah, although it's very straightforward:

<?php
declare(strict_types=1);

namespace App\Twig\Components;

use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
use Symfony\UX\LiveComponent\DefaultActionTrait;

#[AsLiveComponent]
class Announcements
{
    use DefaultActionTrait;

    public function getAnnouncements(): array
    {
        return [
            ['title' => 'Hi Foo'],
            ['title' => 'Hi Bar'],
            ['title' => 'Hi Baz'],
        ];
    }
}

<div {{ attributes }}>
    {% for announcement in this.announcements %}
        <p>{{ announcement.title }}</p>
    {% endfor %}
</div>

{% macro placeholder(props) %}
    <p>LOADING</p>
{% endmacro %}

{% extends 'base.html.twig' %}

{% block content %}
    {% for i in 0..100 %}
        <hr />
    {% endfor %}
    <p>Start...</p>
    <twig:Announcements loading="lazy" />
    <p>End...</p>
{% endblock %}

[smnandre]

Not sure why it's not working with the 2.x (probably a split/sync question)

But be sure it will work when 2.17 is released (i just checked to be sure)

You can check using the branch and the link command (you can see an example with the bin/link-locally in the ux.symfony directory)

Concerning defer, the documentation is -for once- in advance.

The defer attribute can be used for now as standalone attribute:

<twig:Announcement defer />

[royvangeel]

I’ll wait for the official 2.17 release, guess that won’t take long anymore? Pretty cool feature 💪🏻

[soupli]

Tried the 2.17 release. Unfortunately this still doesn't seem to work.

As mentioned earlier by @royvangeel, this still does comply: "On the other hand, the macro placeholder is visible and the loading attribute is present on the element."

---

Announcements.php

<?php
declare(strict_types=1);

namespace App\Twig\Components;

use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
use Symfony\UX\LiveComponent\DefaultActionTrait;

#[AsLiveComponent]
class Announcements
{
    use DefaultActionTrait;

    public function getAnnouncements(): array
    {
        return [
            ['title' => 'Hi Foo'],
            ['title' => 'Hi Bar'],
            ['title' => 'Hi Baz'],
        ];
    }
}

index.html.twig

{% block content %}
    <div id="ccc" style="display:none;" class="answer_list" >
        <twig:Announcements loading="lazy" />
        {{ component('Announcements', { loading: 'lazy' }) }}
    </div>

    <input type="button" name="answer" value="Show Div" onclick="showDiv()" />
    <script>
        function showDiv() {
            document.getElementById('ccc').style.display = "block";
        }
    </script>
{% endblock %}

Announcements.html.twig

<div {{ attributes }}>
    {% for announcement in this.announcements %}
        <p>{{ announcement.title }}</p>
    {% endfor %}
</div>

{% macro placeholder(props) %}
    <p>LOADING</p>
{% endmacro %}

[smnandre]

Try adding some LiveProp ? Your component is not "live" for now.

[soupli]

Thanks for your reply @smnandre

Problem seemed to be some persistent cache. Everything working smooth now

[smnandre]

Glad to read this. Enjoy your lazy components :)