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?