[IMP] tutorials: add example code for LazyComponent

js framework/Build a Dashboard/part 8 (LazyComponent)

There is no explicit instructions on how to use `LazyComponent`.

- add an example code snippet for minimal use of `LazyComponent`
- add the `.js` extension to the file you're supposed to create to make it a bit more intuitive
- fix `actions` registry name (missing an s)
- reword instructions in a more straightforward way

closes odoo/documentation#9521

Signed-off-by: Florent Dardenne (dafl) <dafl@odoo.com>
This commit is contained in:
Alice Gaudon 2024-05-28 16:32:25 +02:00
parent 9a0e87e861
commit 15c6bb8b0e

View File

@ -322,17 +322,31 @@ of our users. In that case, it could make sense to lazy load our dashboard, and
related assets, so we only pay the cost of loading the code when we actually want to
look at it.
To do that, we will need to create a new bundle containing all our dashboard assets,
then use the `LazyComponent` (located in `@web/core/assets`).
One way to do this is to use `LazyComponent` (from `@web/core/assets`) as an intermediate
that will load an asset bundle before displaying our component.
.. example::
:file:`example_action.js`:
.. code-block:: javascript
export class ExampleComponentLoader extends Component {
static components = { LazyComponent };
static template = xml`
<LazyComponent bundle="'example_module.example_assets'" Component="'ExampleComponent'" />
`;
}
registry.category("actions").add("example_module.example_action", ExampleComponentLoader);
#. Move all dashboard assets into a sub folder :file:`/dashboard` to make it easier to
add to a bundle.
#. Create a `awesome_dashboard.dashboard` assets bundle containing all content of
the `/dashboard` folder.
#. Modify :file:`dashboard.js` to register itself in the `lazy_components` registry, and not
in the `action` registry.
#. Add in :file:`src/` a file :file:`dashboard_action` that imports `LazyComponent` and registers
it to the `action` registry
the :file:`/dashboard` folder.
#. Modify :file:`dashboard.js` to register itself to the `lazy_components` registry instead of `actions`.
#. In :file:`src/dashboard_action.js`, create an intermediate component that uses `LazyComponent` and
register it to the `actions` registry.
9. Making our dashboard generic
===============================