Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 24 additions & 0 deletions packages/web/app/components/board-page/climbs-list.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -126,6 +126,30 @@ const ClimbsList = ({ boardDetails, initialClimbs }: ClimbsListProps) => {
}
}, [page, hasDoneFirstFetch, isFetchingClimbs]); // Depend on the page query parameter

// Auto-trigger load when content doesn't fill the scroll container
const wasFetchingRef = useRef(isFetchingClimbs);

useEffect(() => {
const wasFetching = wasFetchingRef.current;
wasFetchingRef.current = isFetchingClimbs;

// Only check when fetch just completed (was fetching, now not)
// OR on initial mount when not fetching
const fetchJustCompleted = wasFetching && !isFetchingClimbs;
const isInitialCheck = !wasFetching && !isFetchingClimbs && climbs.length > 0;

if (!hasMoreResults || isFetchingClimbs) return;
if (!fetchJustCompleted && !isInitialCheck) return;

const scrollContainer = document.getElementById('content-for-scrollable');
if (!scrollContainer) return;

const needsMoreContent = scrollContainer.scrollHeight <= scrollContainer.clientHeight;
if (needsMoreContent) {
fetchMoreClimbs();
}
}, [hasMoreResults, isFetchingClimbs, climbs.length, fetchMoreClimbs]);

return (
<InfiniteScroll
dataLength={climbs.length}
Expand Down
6 changes: 4 additions & 2 deletions packages/web/app/components/index.css
Original file line number Diff line number Diff line change
Expand Up @@ -19,12 +19,14 @@ html, body {
}

/* Prevent horizontal scroll on layout components */
.ant-layout,
.ant-layout-content {
.ant-layout {
max-width: 100%;
overflow-x: hidden;
}

/* Note: .ant-layout-content overflow is controlled by inline styles on #content-for-scrollable
to enable proper infinite scroll detection. Do not set overflow here. */

/* Prevent double-tap zoom globally while preserving pinch-to-zoom */
html {
touch-action: manipulation;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,11 @@ export const useQueueDataFetching = ({
initialSize: searchParams.page ? searchParams.page + 1 : 1,
});

const hasMoreResults = data && data[0] && size * PAGE_LIMIT < data[0].totalCount;
// When data exists, calculate normally. Otherwise default to true while loading
// (so infinite scroll works during SSR hydration), or false after loading completes with no data
const hasMoreResults = data?.[0]?.totalCount !== undefined
? size * PAGE_LIMIT < data[0].totalCount
: Boolean(isFetchingClimbs);
const totalSearchResultCount = (data && data[0] && data[0].totalCount) || null;

const climbSearchResults = useMemo(
Expand Down