Lazy Loading
Overview
A slow component can slow down the loading of an entire page. CBWIRE's lazy loading feature allows you to delay loading your components until the page is fully rendered.
Let's create a slow component that users will hate.
<!--- ./views/someview.cfm --->
#wire( "SlowComponent" )#
// ./wires/SlowComponent.cfc
component extends="cbwire.model.Component" {
function onMount() {
sleep( 2000 ); // Make this component slow
}
}
<!--- ./wires/slowcomponent.cfm --->
<cfoutput>
<div>
<h1>Slow Component</h1>
</div>
</cfoutput>
Changing this to a lazy-loaded component is as simple as using wire( lazy=true ).
#wire( name="SlowComponent", lazy=true )#
This will cause Livewire to skip this component on the initial page load. Once visible in the viewport, Livewire will request a network to load the component fully.
Placeholder
As your components load, you often want to display some indicator, such as a spinner, to your users. You can do this easily using the placeholder() method.
// ./wires/SlowComponent.cfc
component extends="cbwire.model.Component" {
function onMount() {
sleep( 2000 ); // Make this component slow
}
function placeholder() {
return "<div>Loading...</div>";
}
}
The placeholder and the main component must use the same root element type, such as a div. You will get rendering errors if you don't use the same root element.
Placeholder using ColdBox view
You can render a ColdBox view for a placeholder using the view() method.
// ./wires/SlowComponent.cfc
component extends="cbwire.model.Component" {
function onMount() {
sleep( 2000 ); // Make this component slow
}
function placeholder() {
return view( "spinner" ); // renders ./views/spinner.cfm
}
}
Last updated
Was this helpful?