29 lines
828 B
JavaScript
29 lines
828 B
JavaScript
import { directive } from 'lit/directive.js';
|
|
import { AsyncDirective } from 'lit/async-directive.js';
|
|
|
|
/**
|
|
* In order to speed up the first meaningful paint, use this directive
|
|
* on content that is:
|
|
* - (visually) hidden
|
|
* - out of the page flow (having position: 'absolute|fixed')
|
|
*
|
|
* A good practice would be to use it in overlays,
|
|
* For hidden tab panels, collapsible content etc. it's also useful
|
|
* @example
|
|
* <lion-combobox name="combo" label="Combo">
|
|
* ${lazyRender(
|
|
* largeListOfData.map(entry => html` <expensive-option>${entry}</expensive-option> `),
|
|
* )}
|
|
* </lion-combobox>
|
|
*/
|
|
export const lazyRender = directive(
|
|
class extends AsyncDirective {
|
|
render(tplResult) {
|
|
setTimeout(() => {
|
|
this.setValue(tplResult);
|
|
});
|
|
}
|
|
},
|
|
);
|
|
|
|
// export const lazyRender = () => {};
|