From 15c6bb8b0e1f7a6072235be97f0a9ff9001e4150 Mon Sep 17 00:00:00 2001 From: Alice Gaudon Date: Tue, 28 May 2024 16:32:25 +0200 Subject: [PATCH] [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) --- .../02_build_a_dashboard.rst | 28 ++++++++++++++----- 1 file changed, 21 insertions(+), 7 deletions(-) diff --git a/content/developer/tutorials/discover_js_framework/02_build_a_dashboard.rst b/content/developer/tutorials/discover_js_framework/02_build_a_dashboard.rst index 64f926760..2756a6694 100644 --- a/content/developer/tutorials/discover_js_framework/02_build_a_dashboard.rst +++ b/content/developer/tutorials/discover_js_framework/02_build_a_dashboard.rst @@ -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` + + `; + } + + 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 ===============================