Skip to content

Commit 7ac022f

Browse files
fix: improve desktop scroll-to-refresh UX
- Add wheel delta accumulator with -50 threshold to prevent accidental refreshes - Desktop now shows same animated refresh indicator as mobile - Visual feedback scales smoothly with scroll amount (0.8x multiplier) - Accumulator resets when scrolling away from top Co-authored-by: Anthony <AnthonyRonning@users.noreply.github.com>
1 parent cb5237d commit 7ac022f

1 file changed

Lines changed: 24 additions & 2 deletions

File tree

‎frontend/src/components/ChatHistoryList.tsx‎

Lines changed: 24 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,7 @@ export function ChatHistoryList({
8989
constpullStartY=useRef(0);
9090
constisPulling=useRef(false);
9191
constpullDistanceRef=useRef(0);
92+
constwheelDeltaAccumulator=useRef(0);
9293

9394
// Fetch initial conversations from API using the OpenSecret SDK
9495
const{ isPending, error }=useQuery({
@@ -287,6 +288,8 @@ export function ChatHistoryList({
287288
};
288289

289290
// Desktop: detect scroll up when already at top (overscroll)
291+
constWHEEL_THRESHOLD=-50;// Require accumulated scroll before triggering
292+
290293
consthandleWheel=(e: WheelEvent)=>{
291294
if(!isDesktopPlatform||isPullRefreshing)return;
292295

@@ -297,8 +300,27 @@ export function ChatHistoryList({
297300
if(container.scrollTop===0&&e.deltaY<0){
298301
// Prevent default to avoid browser overscroll bounce
299302
e.preventDefault();
300-
// Trigger refresh on upward scroll attempt
301-
handleRefresh();
303+
304+
// Accumulate wheel delta to require sustained scroll
305+
wheelDeltaAccumulator.current+=e.deltaY;
306+
307+
// Update pull distance for visual feedback (map wheel delta to pull distance)
308+
constvisualDistance=Math.min(Math.abs(wheelDeltaAccumulator.current)*0.8,80);
309+
pullDistanceRef.current=visualDistance;
310+
setPullDistance(visualDistance);
311+
312+
// Trigger refresh if threshold is reached
313+
if(wheelDeltaAccumulator.current<=WHEEL_THRESHOLD){
314+
wheelDeltaAccumulator.current=0;
315+
handleRefresh();
316+
}
317+
}else{
318+
// Reset accumulator and visual feedback if not at top or scrolling down
319+
wheelDeltaAccumulator.current=0;
320+
if(pullDistanceRef.current>0){
321+
pullDistanceRef.current=0;
322+
setPullDistance(0);
323+
}
302324
}
303325
};
304326

0 commit comments

Comments
 (0)