How can I re-render a component after using a tweening library

[eboody]

Hi guys!

I have a button that, when clicked, runs a piece of code that updates a signal in a loop using the value provided by a tween library.

The code also logs the updated value to the console.

The problem is that while the values are successfully printed in the console, the value on the button does not get updated until the end of the loop.

I am having trouble understanding some aspect of reactivity and I have been searching the documentation, but to no avail.

I am trying to animate components, but I need to solve this issue first.

Can anyone help me out?

use leptos::*;
use tween::Tweener;

#[component]
pub fn Button(cx: Scope) -> impl IntoView {
    let (value, set_value) = create_signal(cx, 0.0);

    let (start, end) = (0.0, 100.0);
    let duration = 150.0;

    let mut tweener = Tweener::sine_in_out(start, end, duration);

    const DT: f32 = 1.0 / 60.0;

    let on_click = move |_| loop {
        set_value(tweener.move_by(DT));
        log!("{:#?}", value());
        if tweener.is_finished() {
            break;
        }
    };

    view! (cx,
            <button on:click=on_click>{value}</button>
    )
}

[gbj]

Let's see... looking at this naively, with no idea how Tweener works, I'll say the following: on_click calls set_value once, at the beginning of its execution. This does not (as in the example in the tweener docs) initialize a loop that keeps setting the value. I don't see any other set_value call in here. I wouldn't expect value to update more than once per click with this code.

I'd expect the naive loop version to probably block the main thread, the browser being a single-threaded environment, but maybe something using recursive request_animation_frame calls?

[eboody]

oh wow thanks for responding! ok Ill take a look!

[ta3pks]

I did try some something similar to this using use_raf_fn to no avail. Tried wrapping the tweener in Rc<RefCell> but getting runtime error saying attempted to get a signal after it was disposed.
For now with my level of leptos knowledge seems this is not achievable. Any further updates on this topic @eboody @gbj ?

//Received WebSocket message
        AppMessage::ValUpdate { table_id, val } => {
            let initial_value = with! { |tables| {
                 tables.iter().find(|t| t.id == table_id).map(|t| t.val)
            }};
            if let Some(initial_value) = initial_value {
                let tweener = Rc::new(RefCell::new(tween::Tweener::sine_in_out(
                    initial_value,
                    val,
                    0.5,
                )));

                let Pausable { pause, .. } = use_raf_fn(move |v| {
                    let v = tweener.borrow_mut().move_by(v.delta);
                    tables.update(|tables| {
                        tables
                            .iter_mut()
                            .find(|t| t.id == table_id)
                            .tap_some_mut(|t| t.val = v);
                    });
                });
                let UseTimeoutFnReturn { start, .. } = use_timeout_fn(
                    move |_: ()| {
                        pause();
                    },
                    500.0,
                );
                start(());
            }
        }

[gbj]

If you have a small, self-contained example you can share, it may be possible to explore it to help you figure it out. I don't think there's enough context in your example here for me to understand what did/didn't work relative to the advice from last year above.