How to use timeout to delay signal changes?

[dgllghr]

I am implementing search that happens as the user types. I want to delay the search until after the user has stopped typing for some small amount of time so that the search requests are not issued too frequently to the server. I am using SSR and cargo-leptos.

Here is my attempt:

use gloo_timers::callback::Timeout;
use leptos::*;

#[component]
pub fn Search(cx: Scope) -> impl IntoView {
    let (q, set_q) = create_signal(cx, String::new());
    let (q_delayed, set_q_delayed) = create_signal(cx, q.get_untracked());
    
    // Add a delay so that the search happens when a key has _not_ been pressed for the
    // delay period
    create_effect(cx, move |to: Option<Timeout>| {
        if let Some(t) = to {
            t.cancel();
        }
        let value = q();
        Timeout::new(SEARCH_DELAY_MS, move || {
            set_q_delayed(value);
        })
    });
    
    let search_results = create_resource(cx, q_delayed, move |q| search(cx, q));
    
    view! {
    // View code
    }
}

async fn search(cx: Scope, q: String) -> Option<Vec<SearchResult>> {
    if &q == "" {
        return Some(vec![]);
    }
    let mut path = // create path to search endpoint with query params

    let results = api_client::fetch(cx, &path).await;
    results.map(|r| r.results)
}

When I run cargo leptos watch with this approach, I get the message:

WARN  [leptos_reactive::signal] [Signal::update] You’re trying to update a Signal<core::option::Option<core::option::Option<alloc::vec::Vec<podadept::models::SearchResult>>>> that has already been disposed of. This is probably either a logic error in a component that creates and disposes of scopes, or a Resource resolving after its scope has been dropped without having been cleaned up.

I tried changing create_resource to create_local_resource and the warnings went away but when I try loading the page, it hangs and never loads.

I get the sense that my approach here is not working well with the reactive system. What is the best way to implement this in leptos?

[gbj]

I wonder if the problem is actually coming from somewhere else in your code. I added stubs for a few bits that were missing from your sample, and is seems to work as intended. You wrote a pretty elegant debounce, here!

use gloo_timers::callback::Timeout;

#[component]
pub fn Search(cx: Scope) -> impl IntoView {
    let (q, set_q) = create_signal(cx, String::new());
    let (q_delayed, set_q_delayed) = create_signal(cx, q.get_untracked());
    
    // Add a delay so that the search happens when a key has _not_ been pressed for the
    // delay period
    create_effect(cx, move |to: Option<Timeout>| {
        if let Some(t) = to {
            t.cancel();
        }
        let value = q();
        Timeout::new(500, move || {
            set_q_delayed(value);
        })
    });
    
    let search_results = create_resource(cx, q_delayed, move |q| search(cx, q));
    
    view! { cx,
        <input on:input=move |ev| set_q(event_target_value(&ev)) value=q/>
        <pre>{move || search_results.read().map(|v| format!("{v:?}"))}</pre>
    }
}

async fn search(cx: Scope, q: String) -> Option<Vec<String>> {
    if &q == "" {
        Some(vec![])
    }
    else {
        gloo_timers::future::TimeoutFuture::new(250).await;
        Some(vec![q.to_string()])
    }
}

EDIT: Actually make sure you are on the latest version, which is now 0.1.0. Depending on your routing setup, it's possible this was actually caused by a bug in the router fixed in the last couple days, in which case — my apologies for th pain!

[dgllghr]

Updating did it. Thank you! I also had to update cargo-leptos. I am still seeing the trying to update a signal that has already been disposed warnings on the server side for SSR, so I am going to ignore those warnings since it is working. My theory is that the page finishes rendering and is sent to the client before the search returns so when the search returns the Scope has been disposed. That's all fine since the search will always start out empty

[gbj]

Yep you're 100% correct that that's what's going on. The warning is safe to ignore in that case.

If you want to suppress it then create_local_resource should work.