Skip to content

Commit ab1ede8

Browse files
committed
refactor: wallpaper grid layout and increase infinite scroll threshold
- Replace magic number with scrollbarGap variable in column width calculation - Use distinct keys for wallpaper and skeleton divs to avoid key collisions - Increase infinite scroll fetch threshold from 15 to 30 rows for smoother loading
1 parent 28f352f commit ab1ede8

File tree

1 file changed

+5
-4
lines changed

1 file changed

+5
-4
lines changed

src/renderer/components/wallpapers-grid/content-components.tsx

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -488,13 +488,14 @@ export const WallpaperGrid = <T extends BaseWallpaper>({
488488
const skeletonRows = 1;
489489
const skeletonCount = isFetchingNextPage ? columnCount * skeletonRows : 0;
490490
const rowCount = Math.ceil((allWallpapers.length + skeletonCount) / columnCount);
491+
const scrollbarGap = 3;
491492

492493
return (
493494
<Grid
494495
ref={gridRef}
495496
width={width}
496497
height={height}
497-
columnWidth={Math.floor(width / columnCount) - 3}
498+
columnWidth={Math.floor(width / columnCount) - scrollbarGap}
498499
columnCount={columnCount}
499500
rowHeight={rowHeight}
500501
rowCount={rowCount}
@@ -504,7 +505,7 @@ export const WallpaperGrid = <T extends BaseWallpaper>({
504505
if (index < allWallpapers.length) {
505506
const wallpaper = allWallpapers[index];
506507
return (
507-
<div key={key} style={style} className="p-1.5">
508+
<div key={`skeleton-${key}`} style={style} className="p-1.5">
508509
<Wallpaper
509510
wallpaper={wallpaper}
510511
onWallpaperApply={onWallpaperApply}
@@ -519,15 +520,15 @@ export const WallpaperGrid = <T extends BaseWallpaper>({
519520
// Skeleton placeholder
520521
if (index < allWallpapers.length + skeletonCount) {
521522
return (
522-
<div key={key} style={style} className="p-1.5">
523+
<div key={`wallpaper-${key}`} style={style} className="p-1.5">
523524
<Skeleton className="bg-muted h-full w-full rounded-lg"></Skeleton>
524525
</div>
525526
);
526527
}
527528
}}
528529
onSectionRendered={({ rowStopIndex, columnStopIndex }) => {
529530
// Infinite loading: fetch next page when within threshold of the end
530-
const thresholdRows = 15; // Fetch when 15 rows from the end (adjust as needed)
531+
const thresholdRows = 30; // Fetch when X rows from the end
531532
const lastVisibleIndex = rowStopIndex * columnCount + columnStopIndex;
532533
const thresholdIndex = allWallpapers.length - columnCount * thresholdRows;
533534

0 commit comments

Comments
 (0)