use_infinite_scroll constantly loading

im trying to create an infinite scroll view but leptos-use component constantly triggers (video, see scrollbar), overloading both client and server with content

minimal sample code to reproduce:

[package]
name = "leptos_scroll_bug"
version = "0.1.0"
edition = "2021"

[dependencies]
leptos = { version = "0.6.12", features = ["csr", "nightly"] }
leptos-use = "0.10.10"

<html>
    <body>
    </body>
</html>

use leptos::*;
use leptos_use::*;

fn main() {
    let el = create_node_ref();
    let (data, set_data) = create_signal(vec![1, 2, 3, 4, 5, 6]);
    let _ = use_infinite_scroll_with_options(
        el,
        move |_| async move {
            let len = data.with(|d| d.len());
            set_data.update(|data| *data = (1..len+6).collect());
        },
        UseInfiniteScrollOptions::default().distance(10.0),
    );

    mount_to_body(move || view! {
        <div node_ref=el>
            <For each=move || data.get() key=|i| *i let:item>
                {item} <hr/>
            </For>
        </div>
    })
}

i think this is related to use_scroll(): it seems to not properly detect element height and position, always returning 0 to position and true to arrived_state. use_window_scroll() behaves as expected instead (and im doing my math manually with that currently).

i saw issue #31 mentions doing use_scroll("html") but that seems to not work too.

am i missing something? does infinite scroll require more setup to work as intended? the online demo works flawlessly, so i considered wrongdoing on my part, but even the simplest example appears to not work so im reporting this here!

Synphonyte / leptos-use

use_infinite_scroll constantly loading #120