[yew-devel] [PATCH yew-comp 1/2] tasks: improve behavior of loading additional tasks

[Dominik Csapak]

currently, the task list gets refreshed any of the last 20 entries in
the store get rendered. This also happens though when e.g. the selection
changes or other things cause a redraw even if the position in the list
did not change, which cause unnecessary reloads.

Instead, use the scroll callback of DataTable to only load additional
task when the users scrolls into the last 500px (20 rows would be >600px
for the Desktop theme, and <480px for the crisp theme, so 500px is a
good middle ground).

Signed-off-by: Dominik Csapak <d.csapak at proxmox.com>
---
 src/tasks.rs | 25 +++++++++++++++++++------
 1 file changed, 19 insertions(+), 6 deletions(-)

diff --git a/src/tasks.rs b/src/tasks.rs
index 67fa7b1..3c531c1 100644
--- a/src/tasks.rs
+++ b/src/tasks.rs
@@ -10,6 +10,8 @@ use pwt::widget::form::{Field, Form, FormContext, InputType};
 use gloo_timers::callback::Timeout;
 use html::IntoEventCallback;
 use serde_json::Map;
+use wasm_bindgen::JsCast;
+use web_sys::HtmlElement;
 use yew::html::IntoPropValue;
 use yew::virtual_dom::{VComp, VNode};
 
@@ -32,7 +34,7 @@ use super::{TaskStatusSelector, TaskTypeSelector};
 
 const FILTER_UPDATE_BUFFER_MS: u32 = 150;
 const BATCH_LIMIT: u64 = 500;
-const LOAD_BUFFER_ROWS: usize = 20;
+const LOAD_BUFFER_PX: i32 = 500;
 
 #[derive(PartialEq, Properties)]
 #[builder]
@@ -168,12 +170,7 @@ impl LoadableComponent for ProxmoxTasks {
             FormContext::new().on_change(ctx.link().callback(|_| Msg::UpdateFilter));
 
         let row_render_callback = DataTableRowRenderCallback::new({
-            let store = store.clone();
-            let link = link.clone();
             move |args: &mut _| {
-                if args.row_index() > store.data_len().saturating_sub(LOAD_BUFFER_ROWS) {
-                    link.send_message(Msg::LoadBatch(store.data_len() as u64));
-                }
                 let record: &TaskListItem = args.record();
                 match record.status.as_deref() {
                     Some("RUNNING" | "OK") | None => {}
@@ -399,6 +396,22 @@ impl LoadableComponent for ProxmoxTasks {
         DataTable::new(columns, self.store.clone())
             .class("pwt-flex-fit")
             .selection(self.selection.clone())
+            .on_table_scroll({
+                let link = ctx.link().clone();
+                let store = self.store.clone();
+                move |event: Event| {
+                    if let Some(target) = event
+                        .target()
+                        .and_then(|target| target.dyn_into::<HtmlElement>().ok())
+                    {
+                        if target.scroll_height() - (target.scroll_top() + target.client_height())
+                            < LOAD_BUFFER_PX
+                        {
+                            link.send_message(Msg::LoadBatch(store.data_len() as u64));
+                        }
+                    }
+                }
+            })
             .on_row_dblclick(move |_: &mut _| {
                 link.send_message(Msg::ShowTask);
             })
-- 
2.39.5