> For the complete documentation index, see [llms.txt](https://cbwire.ortusbooks.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://cbwire.ortusbooks.com/features/lazy-loading.md).

# Lazy Loading

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.

```html
<!--- ./views/someview.bxm|cfm --->
<div>
    #wire( "SlowComponent" )#
</div>
```

{% tabs %}
{% tab title="BoxLang" %}

```javascript
// ./wires/SlowComponent.bx
class extends="cbwire.model.Component" {
    function onMount() {
        sleep( 2000 ); // Make this component slow
    }
}
```

{% endtab %}

{% tab title="CFML" %}

```javascript
// ./wires/SlowComponent.cfc
component extends="cbwire.model.Component" {
    function onMount() {
        sleep( 2000 ); // Make this component slow
    }
}
```

{% endtab %}
{% endtabs %}

{% tabs %}
{% tab title="BoxLang" %}

```html
<!--- ./wires/slowcomponent.bxm --->
<bx:output>
    <div>
        <h1>Slow Component</h1>
    </div>
</bx:output>
```

{% endtab %}

{% tab title="CFML" %}

```html
<!--- ./wires/slowcomponent.cfm --->
<cfoutput>
    <div>
        <h1>Slow Component</h1>
    </div>
</cfoutput>
```

{% endtab %}
{% endtabs %}

Changing this to a lazy-loaded component is as simple as using **wire( lazy=true )**.

```html
#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.

{% hint style="info" %}
Lazy loading also delays the execution of the **onMount()** lifecycle method.
{% endhint %}

## 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.

```javascript
function onMount() {
    sleep( 2000 ); // Make this component slow
}

function placeholder() {
    return "<div>Loading...</div>";
}
```

{% hint style="info" %}
By default, CBWIRE inserts an empty **\<div>\</div>** for your component before it loads.
{% endhint %}

{% hint style="warning" %}
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.
{% endhint %}

## Placeholder using ColdBox view

You can render a ColdBox view for a placeholder using the **view()** method.

```javascript
function placeholder() {
    return view( "spinner" ); // renders ./views/spinner.bxm|cfm
}
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://cbwire.ortusbooks.com/features/lazy-loading.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.