Trouble with Events not triggering at all

[ogcatt]

Describe the bug
I have a function which loads a threejs file to display an interface. This works fine when loading a single page, but after I visit another page and return back to it, the element disappears.

Leptos Dependencies

leptos = { version = "0.5", features = ["nightly"] }
leptos_meta = { version = "0.5", features = ["nightly"] }
leptos_actix = { version = "0.5", optional = true }
leptos_router = { version = "0.5", features = ["nightly"] }

To fix this, I tried loading it on pageshow and load (as events) and neither trigger on pageload, leaving the script always unloaded.

Relevant Code

#[component]
pub fn Banner() -> impl IntoView {
    let (loaded, load_up) = create_signal(false);

    let handle = window_event_listener(ev::pageshow, move |_ev| {
        load_up(true);
    });
    on_cleanup(move || handle.remove());

    view ! {
        <Show when=move || loaded.get() == true>
            <Script type_="module" src="/scripts/banner.js"></Script>
        </Show>
    }
}

Help would be appreciated. I can provide more details if needed.

[gbj]

Do you mean that the pageshow and load events do not fire on a client-side navigation? That is true—the navigation is being handled entirely in the client so I would not event them to fire. But I also doubt that you actually want to load the JS file every time this component is shown. Why not load the JS file once, when the app loads, and call a function from it whenever you want to? You can export the function from the JS module and bind to it using wasm-bindgen.

[ogcatt]

It is okay re-importing the whole JS file, as the file basically modulates a html element.

My problem is with triggering events. How can I trigger an event in this psuedo-page load?

[gbj]

I do not think that triggering an event is what you want here. If you just want to run some code whenever this component is rendered you could use create_effect, which is essentially the "on mount" hook:

#[component]
pub fn Banner() -> impl IntoView {
    let (loaded, load_up) = create_signal(false);

    create_effect(move |_| {
        load_up(true);
    });

    view ! {
        <Show when=move || loaded.get() == true>
            <Script type_="module" src="/scripts/banner.js"></Script>
        </Show>
    }
}

[ogcatt]

This does not re-load the element after returning back from another page unless I refresh the page or type in the URL directly.

[gbj]

I suspect that is because rendering the same <script> tag again will not load the script again, which is why I suggested loading the script once and calling a function instead. I'm happy to discuss more if you have a reproducible example to share, otherwise there's not much more I can do because I don't know what you're actually trying here.

[gbj]

I converted this to a discussion to take it out of the issue tracker, as I don't think there's any underlying issue with the framework here. Feel free to let me know if you're looking for additional help.

[VincentBerthier]

So, I have a bit of the same problem here.
Here’s the relevant code (with stuff renamed):

#[component]
fn ShowTable(data: Signal<Vec<Data>>) -> impl IntoView {
    {
        move || {
            view! {
                <Transition fallback=move || {
                    view! { <BallSpinner h=40/> }
                }>
                    <Show
                        when=move || !data().is_empty()
                        fallback=|| {
                            view! { <p>"Nothing to show"</p> }
                        }
                    >

                        <p>"There are " {data().len()} " elements"</p>
                    </Show>

                </Transition>
            }
        }
    }
}

If I begin on the page with this component (either a reload initiated by the server, or manually), no event fires anywhere else: buttons, links, etc. Nothing happens (in the case of the links, the address bar is updated, but the browser doesn’t do anything with it).
I have to either force the browser to go to another page then navigate to the problem one, and everything works fine.

A point of interest: if I remove the <Show/>, it works just fine (except that it sometimes shows that I have 0 elements that’s a problem for another time).

And another thing that might be important: I’m using leptos_query to load the data:

let QueryResult { data, .. } = use_query(
    || (),
    |_| async move { get_currencies().await.unwrap_or_default() },
    QueryOptions {
        stale_time: Some(Duration::from_secs(60)),
        ..Default::default()
    },
);
let data: Signal<Vec<Data>> = Signal::derive(move || data.get().unwrap_or_default());

Am I doing something wrong or is there a problem somewhere?

Edit:
I just got the problem after loading a resource, without any <Show/> involved… Page loads just fine, but then no event gets triggered.

#[component]
pub fn DataCard() -> impl IntoView {
    let params = use_params::<DataParam>();
    let key = params().map(|p| p.id).unwrap();
    let loader = create_resource(move || key, get_data);
    view! {
        <ErrorBoundary fallback=|errors| {
            view! { <ErrorMessage msg=MaybeSignal::Static("couldn’t get data") errors=errors/> }
        }>
            <Transition fallback=move || {
                view! { <BallSpinner h=20/> }
            }>
                {move || {
                    loader
                        .get()
                        .map(|mint| data.map(|data| data))
                        .unwrap_or(Ok(Data::default()))
                        .unwrap_or(Data::default())
                        .random_field
                }}

            </Transition>
        </ErrorBoundary>
        <Outlet/>
    }
}

Maybe that’s because of the ugly stuff I have to do to actually get my data?

[gbj]

Your situation appears to be unrelated to the OP, but is likely a hydration error. There are no warnings or errors in the browser console? I don't see any DOM events in the samples you've given, so I assume you're talking about them not being handled somewhere else in the app.

[VincentBerthier]

No, not a single error, warning or message anywhere.
And I pretty much always end up in that case where everything just stops running and I have no idea why.
If the links worked but the rest failed I would assume I messed up in the reactive parts somewhere, but no, even replacing the <A> by <a> doesn’t change anything.

I just don’t understand where it can come from it’s super frustrating… Not even the Transitions work as they’re supposed to now.
I’ll just scrap everything and redo it from scratch…

[VincentBerthier]

So, I’m a bit of a dummy: I had hidden the errors in my browser’s console to have a look at some stuff and forgot to show them back…
I do have an error, and (surprise, surprise…) I’ve managed to identify the problem. Or at least, to locate it, because I’m not sure it’s something I’m doing wrong or a bug.

The error is panicked at /home/vincent/.cargo/registry/src/index.crates.io-6f17d22bba15001f/leptos_reactive-0.5.7/src/memo.rs:561:35: already borrowed: BorrowMutError

Here’s the code:

#[component]
pub fn Users() -> impl IntoView {
    let QueryResult { data, .. } = use_query(
        || (),
        |_| async move { get_users().await.unwrap_or_default() },
        QueryOptions::default(),
    );
    let users: Signal<Vec<User>> = Signal::derive(move || data.get().unwrap_or_default());
    let count = move || users().len();
    view! {
        <h2>Users</h2>
        <Transition fallback=move || {
            view! { <BallSpinner h=40/> }
        }>
            <Show
                when=move || !users().is_empty()

                fallback=move || {
                    {
                        view! { <p>No user</p> }
                    }
                }
            >

                <p>"There are " {count} " users"</p>

                <ul>
                    <For each=users key=|user| user.uuid.clone() let:user>
                        <li>{user.uuid} ": " {user.name}</li>
                    </For>
                </ul>
            </Show>
        </Transition>
    }
}

• As it is, I get the error.
• If I replace {count} by {move || { users().len }}, error.
• If I remove the line <p>"There are " {count} " users"</p> no error.
• If I move the line outside of the <Transition/> I get an hydration warning, but everything works fine.

My conclusion is that you can’t use a signal (counting its derivations) twice in a <Transition/>. Is that something I’m doing wrong?

Edit:

I tried to switched to create_resource:

#[component]
pub fn Users() -> impl IntoView {
    let users_resource: Resource<(), UserResponse> =
        create_resource(|| (), move |_| get_users());
    view! {
        <h2>Users</h2>
        <Transition fallback=move || {
            view! { <BallSpinner h=40/> }
        }>
            {move || {
                users_resource()
                    .map(|users| {
                        match users {
                            Err(_) => view! { <p>"Error loading users"</p> }.into_view(),
                            Ok(users) => view! { <UserData users=users/> }.into_view(),
                        }
                    })
            }}

        </Transition>
    }
}

#[component]
fn UserData(users: Vec<User>) -> impl IntoView {
    let count = users.len();
    view! {
        <p>"Il y a " {count} " users"</p>
        <ul>
            <For each=move || users.clone() key=|user| user.uuid.clone() let:user>
                <li>{user.uuid} ": " {user.name}</li>
            </For>
        </ul>
    }
}

And… it seems to be working fine… So I guess I’m doing something wrong with leptos_query or they’re the ones with a bug, nothing to do with Leptos itself.

[anvlkv]

I'm trying to load a script and update a signal from on:load.

the on:load is never called but I do see the script is loaded (rive is available on window in dev tools). I tried with and w/o defer and async attributes.

use std::collections::HashSet;

use leptos::*;
use leptos_meta::*;
use leptos_router::*;

#[derive(Clone)]
pub struct JsLibs(pub ReadSignal<HashSet<String>>);

#[component]
pub fn App() -> impl IntoView {
    // Provides context that manages stylesheets, titles, meta tags, etc.
    provide_meta_context();

    let (js_libs, set_js_libs) = create_signal(HashSet::new());

    provide_context(JsLibs(js_libs));

    view! {
        <Stylesheet id="leptos" href="/pkg/style.css"/>


        <Script defer={"defer"} on:load={move |_| {
            // never gets here
            log::info!("loaded rive");
            set_js_libs.update(|s| {s.insert("Rive".to_string());})
        }} src="https://unpkg.com/@rive-app/[email protected]"/>

            <div class="font-sans h-screen w-screen overflow-hidden flex flex-col bg-stone-300 dark:bg-stone-950 text-slate-950 dark:text-slate-50">
                <Router>
                    <Routes>
                        <Route path="/:lang" view=LocalizedView>
                            ...
                        </Route>
                        <Route path="/*any" view=NotFound/>
                    </Routes>
                </Router>
            </div>
    }
}

[gbj]

I'm pretty sure the issue in this case is that the JS <script> is finished loading before your WASM binary is finished loading, which means the load event has already fired before you've attached an event listener for it.

[anvlkv]

Thanks. With the above it was sometimes the case that my code would call for rive methods but they wouldn't be available yet. In my case I concluded to use sync script and not rely on a signal to tell me if its loaded.

How would you approach lazy loading a library in leptos? For example if one page of entire app uses the library and the library is rather large.