CBWIRE
InstallSource CodeIssuesSupport
v3.x
v3.x
  • Introduction
  • Getting Started
  • Configuration
  • How It Works
  • Release History
    • What's New With 3.2
    • What's New With 3.1
    • What's New With 3.0
    • What's New With 2.2
    • What's New With 2.1
    • What's New With 2.0
  • Examples
    • Contact Form
    • Multi-select Input
    • File Upload
  • Resources
  • The Essentials
    • Components
    • Templates
    • Data Properties
    • Computed Properties
    • Actions
    • Events
    • Lifecycle Methods
    • JavaScript
    • Testing
  • Wire Features
    • Validation
    • File Uploads
    • Query String
    • Redirecting
    • WireBox
  • Template Features
    • Directives
    • Loading States
    • Polling
    • Prefetching
    • Offline State
    • Defer Loading
    • Dirty State
  • Integrations
    • ContentBox CMS
    • SPAs with Turbo
    • AlpineJS
Powered by GitBook
On this page
  1. Template Features

Defer Loading

Improve user's perceived load times by using deferred loading.

CBWIRE allows you to call an action immediately once your component is rendered.

You can do this by adding the wire:init directive to your component's outer element.

<cfoutput>
<div wire:init="loadTasks">
    <ul>
        <cfloop array="#args.tasks#" index="task">
            <li>#task#</li>
        </cfloop>
    </ul>
</div>
</cfoutput>

<cfscript>
    data = {
        "tasks": []
    };
    
    function loadTasks() {
        data.tasks = getInstance( "TaskService" ).asMemento().get()
    }
</cfscript>

This can be helpful in cases where you don't want to hold up the page from fully loading but want to load some data immediately after the page load.

PreviousOffline StateNextDirty State

Last updated 1 year ago