alemi/upub
alemi/upub
1
0
Fork 1
Code Issues 4 Pull requests Projects Releases Packages Wiki Activity Actions

fix(web): more reliable infinite scroll

Browse source 
since there's no button anymore it really needs to work always
This commit is contained in:
əlemi 2024-06-12 15:21:37 +02:00
parent 014da01982
commit 42ae2633f2
Signed by: alemi
GPG key ID: A4895B84D311642C
2 changed files with 15 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
web/src/app.rs
View file

@ -2,7 +2,7 @@ use leptos::*;
use leptos_router::*; use leptos_router::*;
use crate::prelude::*; use crate::prelude::*;
use leptos_use::{signal_throttled, storage::use_local_storage, use_cookie, use_element_size, use_window_scroll, utils::{FromToStringCodec, JsonCodec}, UseElementSizeReturn}; use leptos_use::{signal_debounced, signal_debounced_with_options, signal_throttled, signal_throttled_with_options, storage::use_local_storage, use_cookie, use_element_size, use_window_scroll, utils::{FromToStringCodec, JsonCodec}, DebounceOptions, ThrottleOptions, UseElementSizeReturn};
#[derive(Clone, Copy)] #[derive(Clone, Copy)]
pub struct Feeds { pub struct Feeds {
@ -184,7 +184,7 @@ fn Scrollable() -> impl IntoView {
} }
}); });
let element = create_node_ref(); let element = create_node_ref();
let should_load = use_scroll_limit(element, 1750.0); let should_load = use_scroll_limit(element, 500.0);
provide_context(should_load); provide_context(should_load);
view! { view! {
<div class="mb-1" node_ref=element> <div class="mb-1" node_ref=element>
@ -223,15 +223,22 @@ where
{ {
let (load, set_load) = create_signal(false); let (load, set_load) = create_signal(false);
let (_x, y) = use_window_scroll(); let (_x, y) = use_window_scroll();
let UseElementSizeReturn { height: screen_height, .. } = use_element_size("html");
let UseElementSizeReturn { height, .. } = use_element_size(el); let UseElementSizeReturn { height, .. } = use_element_size(el);
let scroll_state = Signal::derive(move || (y.get(), height.get())); let scroll_state = Signal::derive(move || (y.get(), height.get(), screen_height.get()));
let scroll_state_throttled = signal_throttled(scroll_state, 200.); let scroll_state_throttled = signal_debounced(
scroll_state,
50.
);
let _ = watch( let _ = watch(
move || scroll_state_throttled.get(), move || scroll_state_throttled.get(),
move |(y, height), _, _| { move |(y, height, screen), _, _| {
let before = load.get(); let before = load.get();
let after = y + offset >= *height; let after = *height <= *screen || y + screen + offset >= *height;
if after != before { set_load.set(after) }; let force = *y + screen >= *height;
if force || after != before || *height < *screen {
set_load.set(after)
}
}, },
false, false,
); );

9
web/src/timeline/feed.rs
View file

@ -8,14 +8,7 @@ pub fn Feed(tl: Timeline) -> impl IntoView {
if let Some(auto_scroll) = use_context::<Signal<bool>>() { if let Some(auto_scroll) = use_context::<Signal<bool>>() {
let _ = leptos::watch( let _ = leptos::watch(
move || auto_scroll.get(), move || auto_scroll.get(),
move |new, old, _| { move |at_end, _, _| if *at_end { tl.spawn_more(auth) },
match old {
None => tl.spawn_more(auth), // always do it first time
Some(old) => if *new && new != old {
tl.spawn_more(auth);
},
}
},
true, true,
); );
} }