Keyboard shortcuts

Press or to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

Deferred

The Deferred element allow you to defer the layout and paint of a element. GPUI follows the Painter's algorithm where elements that get painted after will be drawn on top of a element that got painted earlier. This is where the Deferred element allows you to delay the layout and paint of its child.

Creating a Deferred

The deferred function takes a impl IntoElement which is the child element and returns the Deferred element.

use gpui::{
    AppContext, Application, Context, IntoElement, ParentElement, Render, Window, WindowOptions,
    deferred, div,
};

struct RootView;

impl Render for RootView {
    fn render(&mut self, _window: &mut Window, _cx: &mut Context<Self>) -> impl IntoElement {
        div().child(deferred(div()))
    }
}

fn main() {
    Application::new().run(|app| {
        app.open_window(WindowOptions::default(), |_window, app| {
            app.new(|_cx| RootView)
        })
        .unwrap();
    });
}

Deferred with Priority

This sets the priority at which the element will be deferred at, controlling the order relative to other deferred elements. Higher priority values are drawn on top of lower priority values.

use gpui::{
    AppContext, Application, Context, IntoElement, ParentElement, Render, Window, WindowOptions,
    deferred, div,
};

struct RootView;

impl Render for RootView {
    fn render(&mut self, _window: &mut Window, _cx: &mut Context<Self>) -> impl IntoElement {
        div().child(deferred(div()).with_priority(10))
    }
}

fn main() {
    Application::new().run(|app| {
        app.open_window(WindowOptions::default(), |_window, app| {
            app.new(|_cx| RootView)
        })
        .unwrap();
    });
}