From mboxrd@z Thu Jan 1 00:00:00 1970
Return-Path: <yew-devel-bounces@lists.proxmox.com>
Received: from firstgate.proxmox.com (firstgate.proxmox.com [212.224.123.68])
by lore.proxmox.com (Postfix) with ESMTPS id 20D921FF187
for <inbox@lore.proxmox.com>; Wed, 7 May 2025 16:37:50 +0200 (CEST)
Received: from firstgate.proxmox.com (localhost [127.0.0.1])
by firstgate.proxmox.com (Proxmox) with ESMTP id DAB833DEEC;
Wed, 7 May 2025 16:38:07 +0200 (CEST)
From: Dominik Csapak <d.csapak@proxmox.com>
To: yew-devel@lists.proxmox.com
Date: Wed, 7 May 2025 16:37:59 +0200
Message-Id: <20250507143800.3461963-4-d.csapak@proxmox.com>
X-Mailer: git-send-email 2.39.5
In-Reply-To: <20250507143800.3461963-1-d.csapak@proxmox.com>
References: <20250507143800.3461963-1-d.csapak@proxmox.com>
MIME-Version: 1.0
X-SPAM-LEVEL: Spam detection results: 0
AWL 0.022 Adjusted score from AWL reputation of From: address
BAYES_00 -1.9 Bayes spam probability is 0 to 1%
DMARC_MISSING 0.1 Missing DMARC policy
KAM_DMARC_STATUS 0.01 Test Rule for DKIM or SPF Failure with Strict Alignment
SPF_HELO_NONE 0.001 SPF: HELO does not publish an SPF Record
SPF_PASS -0.001 SPF: sender matches SPF record
Subject: [yew-devel] [PATCH yew-comp 1/2] tasks: improve behavior of loading
additional tasks
X-BeenThere: yew-devel@lists.proxmox.com
X-Mailman-Version: 2.1.29
Precedence: list
List-Id: Yew framework devel list at Proxmox <yew-devel.lists.proxmox.com>
List-Unsubscribe: <https://lists.proxmox.com/cgi-bin/mailman/options/yew-devel>,
<mailto:yew-devel-request@lists.proxmox.com?subject=unsubscribe>
List-Archive: <http://lists.proxmox.com/pipermail/yew-devel/>
List-Post: <mailto:yew-devel@lists.proxmox.com>
List-Help: <mailto:yew-devel-request@lists.proxmox.com?subject=help>
List-Subscribe: <https://lists.proxmox.com/cgi-bin/mailman/listinfo/yew-devel>,
<mailto:yew-devel-request@lists.proxmox.com?subject=subscribe>
Reply-To: Yew framework devel list at Proxmox <yew-devel@lists.proxmox.com>
Content-Type: text/plain; charset="us-ascii"
Content-Transfer-Encoding: 7bit
Errors-To: yew-devel-bounces@lists.proxmox.com
Sender: "yew-devel" <yew-devel-bounces@lists.proxmox.com>
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@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
_______________________________________________
yew-devel mailing list
yew-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/yew-devel