Skip to content

Commit

Permalink
minor #1183 [LiveComponent] Tweaking the defer docs (weaverryan)
Browse files Browse the repository at this point in the history
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
  • Loading branch information
weaverryan committed Oct 23, 2023
2 parents 19b6e11 + 2f9ef84 commit 262db2b
Showing 1 changed file with 29 additions and 11 deletions.
40 changes: 29 additions & 11 deletions src/LiveComponent/doc/index.rst
Original file line number Diff line number Diff line change
Expand Up @@ -2220,31 +2220,49 @@ To validate only on "change", use the ``on(change)`` modifier:
class="{{ _errors.has('post.content') ? 'is-invalid' : '' }}"
>

Deferring the Loading
---------------------
Deferring / Lazy Loading Components
-----------------------------------

Certain components might be heavy to load. You can defer the loading of these components
until after the rest of the page has loaded. To do this, use the ``defer`` attribute:
.. versionadded:: 2.13.0

The ability to defer loading a component was added in Live Components 2.13.

If a component is heavy to render, you can defer rendering it until after
the page has loaded. To do this, add the ``defer`` option:

.. code-block:: twig
{{ component('SomeHeavyComponent', { defer: true }) }}
Doing so will render an empty "placeholder" tag with the live attributes. Once the ``live:connect`` event is triggered,
the component will be rendered asynchronously.
This renders an empty ``<div>`` tag, but triggers an Ajax call to render the
real component once the page has loaded.

.. note::

By default the rendered tag is a ``div``. You can change this by specifying the ``loading-tag`` attribute:
Behind the scenes, your component *is* created & mounted during the initial
page load, but it isn't rendered. So keep your heavy work to methods in
your component (e.g. ``getProducts()``) that are only called when rendering.

To add some loading text before the real component is loaded, use the
``loading-template`` option to point to a template:

.. code-block:: twig
{{ component('SomeHeavyComponent', { defer: true, loading-tag: 'span' }) }}
{{ component('SomeHeavyComponent', { defer: true, loading-template: 'spinning-wheel.html.twig' }) }}
If you need to signify that the component is loading, use the ``loading-template`` attribute.
This lets you provide a Twig template that will render inside the "placeholder" tag:
Or override the ``content`` block:

.. code-block:: twig
{{ component('SomeHeavyComponent', { defer: true, loading-template: 'spinning-wheel.html.twig' }) }}
{% component SomeHeavyComponent with { defer: true }) }}
{% block content %}Loading...{% endblock %}
{{ end_component() }}
To change the initial tag from a ``div`` to something else, use the ``loading-tag`` option:

.. code-block:: twig
{{ component('SomeHeavyComponent', { defer: true, loading-tag: 'span' }) }}
Polling
-------
Expand Down

0 comments on commit 262db2b

Please sign in to comment.