LocalResource + Transition in Leptos 0.8 does not trigger reactivity properly

[CedricGARVENES]

Hi!

I think I’m running into a regression or an unexpected behavior since upgrading to Leptos 0.8 related to LocalResource and Transition.

I have the following use case:

I’m using LocalResource to fetch a list of users (via an HTTP request).

I wrap the display logic in a <Transition fallback=...> so I can show a loading state while the request is in progress.

When LocalResource resolves, I expect Transition to stop showing the fallback and render the loaded data.

However, even though LocalResource resolves successfully (I can see the data is loaded when I log it), Transition still stays stuck on the fallback view.
The LocalResource returns Some(Ok(data)) but Transition does not seem to react to that.

Here’s what I confirmed so far:

• The HTTP request returns 200 and valid data.
• LocalResource.get() returns Some(Ok(...)).
• Still, Transition does not move out of fallback.

Questions

• Is LocalResource still compatible with Transition in Leptos 0.8?
• Or is this considered a bug / regression compared to Leptos 0.7.8 where LocalResource + Transition worked as expected?

Here my code :

#[component]
pub fn AdminHome() -> impl IntoView {
    let reload = RwSignal::new(false);
    let msg = RwSignal::new(String::new());
    let (page, set_page) = signal(1_u32);
    let limit = 10;

     let users = LocalResource::new({
         let reload = reload.clone();
         let page = page.clone();
         move || async move {
             let _ = reload.get();
             reload.set(false);
             let page = page.get();
             Request::get(&format!("/api/users?page={page}&limit={limit}"))
                 .send()
                 .await
                 .map_err(|e| format!("Error request: {}", e))?
                 .json::<ListResponse<User>>()
                 .await
                 .map_err(|e| format!("Error parsing JSON: {}", e))
         }
     });

    fn delete_user(
        user_id: String,
        msg: RwSignal<String>,
        reload: RwSignal<bool>,
    ) -> impl Fn(MouseEvent) {
        move |_| {
            let user_id = user_id.clone();
            let msg = msg.clone();
            let reload = reload.clone();
            spawn_local(async move {
                match Request::delete(&format!("/api/users/{}", user_id))
                    .send()
                    .await
                {
                    Ok(res) if res.ok() => {
                        reload.set(true);
                        msg.set("✅ Utilisateur supprimé avec succès".into());
                    }
                    _ => {
                        msg.set("❌ Erreur lors de la suppression".into());
                    }
                }
            })
        }
    }

    fn user_list_view(
        users: &[User],
        msg: RwSignal<String>,
        reload: RwSignal<bool>,
    ) -> impl IntoView {
        view! {
            <ul>
                {users.iter().map(|user| {
                    log!("User : {:?}", user);
                    view! {
                        <li>
                            <a href={format!("/user/{}", user.id)}>
                                {format!("{} ({})", user.pseudo, user.email)}
                            </a>
                            <button on:click=delete_user(user.id.clone(), msg.clone(), reload.clone())>
                                "Supprimer"
                            </button>
                        </li>
                    }
                }).collect::<Vec<_>>()}
            </ul>
        }
    }

    view! {
        <div>
            <h2>"Liste des utilisateurs"</h2>
            <Transition fallback=move || view! { <p>"Chargement..."</p> }>
                {move || match users.get() {
                    Some(Ok(users)) => {log!("USERS : {:?}", users.data.clone()); user_list_view(&users.data, msg.clone(), reload.clone()).into_any()},
                    Some(Err(e)) => view! { <p>{format!("❌ Error: {e}")}</p> }.into_any(),
                    None => view! { <p>"Chargement...."</p> }.into_any(),
                }}
            <p>{ move || msg.get() }</p>
            </Transition>
            <button on:click=move |_| set_page.update(|p| *p = p.saturating_sub(1))>"Page précédente"</button>
            <button on:click=move |_| set_page.update(|p| *p += 1)>"Page suivante"</button>
            <hr/>
            <SignUpForm />
        </div>
    }
}

Thank you for your help 🙏!

[gbj]

From your description, it sounds like a bug. If you could open an issue with a minimal reproduction/small, self-contained example, that would be helpful!

[CedricGARVENES]

Hi!

After some deeper investigation, I realized that the issue was actually on my side.

In my LocalResource, I was calling reload.set(false);, which obviously causes the resource to re-run every time because the signal is being modified during its execution.
This causes an endless loop.

However, what still confuses me is that this exact same code used to work fine in Leptos 0.7.8 and only broke after updating to 0.8.0.
So the real question/issue is:
Why did this pattern work before, even though it probably shouldn't have?
It seems like this might have been undefined behavior before, which is now being handled more strictly.

Also, since I’m here, I’d like to ask:
What would be the recommended/best way to reload a list of users (fetched with LocalResource) when clicking a button (for example, after deleting a user)?
For now I use a signal like reload that I toggle to trigger the reload, but I’m wondering if there is a cleaner or more idiomatic pattern with Leptos for this kind of use case.

Thank you — and sorry for the false alarm.

You can test with this code :

use gloo_net::http::Request;
use leptos::logging::log;
use leptos::prelude::*;
use leptos::server::LocalResource;
use leptos::{component, view, IntoView};

#[component]
fn App() -> impl IntoView {
    let reload = RwSignal::new(false);
    let page = RwSignal::new(1u32);

    let data = LocalResource::new({
        let reload = reload.clone();
        let page = page.clone();
        move || {
            let reload_value = reload.get();
            async move {
                reload.set(false); // <--- Here the problem

                let page = page.get();
                let resp = Request::get(&format!("https://httpbin.org/get?page={page}"))
                    .send()
                    .await
                    .map_err(|e| format!("request error: {e}"))?;

                let text = resp.text().await.map_err(|e| format!("body error: {e}"))?;

                Ok::<_, String>(text)
            }
        }
    });

    view! {
        <main>
            <h1>"Test Transition + LocalResource"</h1>
            <button on:click=move |_| reload.set(true)>"Reload"</button>
            <button on:click=move |_| page.update(|p| *p += 1)>"Next Page"</button>

            <Transition fallback=move || view! { <p>"Loading..."</p> }>
                {move || {
                    log!("DATA {:?}", data.get());
                    match data.get() {
                        Some(Ok(text)) => view! { <p>{text.clone()}</p> }.into_any(),
                        Some(Err(err)) => view! { <p>{format!("Error: {err}")}</p> }.into_any(),
                        None => view! { <p>"Waiting..."</p> }.into_any(),
                    }
                }}
            </Transition>
        </main>
    }
}

fn main() {
    mount_to_body(|| view! { <App/> });
}

[gbj]

You can either reload a resource by updating a signal (as you say you're doing) or by calling .refetch(). Neither one is any more idiomatic than the other.

As to the other piece: I have not looked into your specific example, but it is often the case that some kind of bug-fix causes incorrect-but-previously-working code (like your infinite loop example) to break, sometimes because the fact that it was "working" was actually a manifestation of the same kind of bug.