Avoid recreating entire page between nested routes

[shivjm]

Navigating back and forth between two nested routes seems to entirely recreate the parent component from the top down: CSS properties don’t transition like I’ve set them up to, the Dev Tools show my selection moving up to body, and simply storing the ul and comparing it with the one after navigation shows they’re different. I also separately verified this behaviour with create_effect. Here’s the router:

            <ErrorBoundary fallback=move |errors| {
                view! {
                    <pre>
                        {move || {
                            errors
                                .get()
                                .into_iter()
                                .map(|(_, e)| view! { <li>{e.to_string()}</li> })
                                .collect_view()
                        }}

                    </pre>
                }
            }>
                <Routes>
                    <Route path="" view=Accounts>
                        <Route path="" view=NoAccount/>
                        <Route path="/account/:account" view=AccountRegister/>
                    </Route>
                </Routes>
            </ErrorBoundary>

And here’s my Accounts component:

#[component]
pub fn Accounts() -> impl IntoView {
    let (convert_in_url, _) = create_query_signal::<bool>("convert");
    let convert = move || convert_in_url().unwrap_or(false);
    provide_context(Signal::derive(move || ConvertAmounts(convert())));

    Ok::<Fragment, HledgerWebError>(view! {
        <Tools/>
        <ErrorBoundary fallback=|errors| {
            warn!("errors rendering Accounts");
            view! {
                "Failed to render view:"
                <pre>
                    {move || {
                        errors
                            .get()
                            .into_iter()
                            .map(|(_, e)| view! { <li>{e.to_string()}</li> })
                            .collect_view()
                    }}

                </pre>
            }
        }>
            <Await
                future=move || fetch_all_balances()
                let:data
                children=move |data| {
                    let (accounts, commodities) = data.clone()?;
                    let route_context = use_route();
                    let is_account_page = move || {
                        route_context.child().map(|c| c.path() != "").unwrap_or(false)
                    };
                    Ok::<
                        _,
                        ServerFnError,
                    >(
                        view! {
                            <ul class="accounts" class=("accounts--collapsed", is_account_page())>
                                <AccountListItems accounts=accounts commodities=commodities/>
                            </ul>
                        },
                    )
                }
            />

            <Outlet/>

        </ErrorBoundary>
    })
}

fetch_all_balances is a server function. It’s not clear to me whether I should use create_resource for it. It’s only meant to be loaded once, which is what’s happening now.

I would have expected the ul to remain on the page without rerendering and only toggle the class as required. Is there something wrong with how I’ve set this up? The final rendered pages are correct; the only issue is the apparent lack of fine-grained reactivity.

I’m using Leptos 0.6 with hydration. Do let me know if there’s any additional information that would be helpful.

(Mostly reproduced from the Leptos Discord for posterity.)

[shivjm]

As I put together an MWE, I discovered that the problem was is_account_page():

<ul class="accounts" class=("accounts--collapsed", is_account_page())>

I changed it to is_account_page, thereby using the reactive version, to fix it. I was confused, though. Since is_account_page() is a static value, my code should never have worked at all. @gbj explained that it’s actually the Await that’s being re-rendered:

But the signal is still being read inside a function being passed into the view (https://docs.rs/leptos/latest/src/leptos/await_.rs.html#119)

So when that one signal changes, it causes the whole body of the Await to be rerendered