Closed ranglang closed 4 years ago
Hi, now useLazy is a hook, this greatly improve the development experience when making dynamic import or request
import { useLazy } from "atomico/use-lazy";
function WebComponent() {
let AsyncNode = useLazy(() => import("./pages/product"));
return (
<host shadowDom>
<AsyncNode loading="loading..." error="error...!" />
</host>
);
}
import { useLazy } from "atomico/use-lazy";
function WebComponent() {
let AsyncNode = useLazy(async () => {
// import or use a virtual-dom fragment locally
let { default: Products } = await import("./pages/product");
// initialize the call to your api
let request = await fetch("products");
// Return a component or virtual nodes to show the component
return (await request.json()).map(dataProduct => (
<Products {...dataProduct} />
));
});
return (
<host shadowDom>
<AsyncNode loading="loading...!" error="error...!" />
</host>
);
}
Codepen example Hook documentation
thanks for your issue let me share this new functionality
i just forgot to add the loading view. thank you, the atomicojs is really easy for web components
it cause error
import { useLazy } from "atomico/use-lazy"; let Products = useLazy(() => import("./pages/product"));