Skip to content

fix: guard infinite scroll against duplicate page loads - #1254

Open
Netty-kun wants to merge 4 commits into
rinafcode:mainfrom
Netty-kun:fix/issue-1202-guard-infinite-scroll-against-duplicate-page
Open

fix: guard infinite scroll against duplicate page loads#1254
Netty-kun wants to merge 4 commits into
rinafcode:mainfrom
Netty-kun:fix/issue-1202-guard-infinite-scroll-against-duplicate-page

Conversation

@Netty-kun

Copy link
Copy Markdown

Overview

This PR fixes duplicate page loads in infinite scroll by adding a throttle + in-flight guard to the shared infinite scroll and lazy-load hooks. Rapid scrolling can no longer trigger overlapping fetches; each hook now waits for the current request to settle and enforces a short cooldown before allowing the next page load.

Related Issue

Closes #issue

Changes

🛡️ Infinite Scroll Duplicate Guard

  • [MODIFY] src/hooks/useInfiniteScroll.ts

    • Adds an in-flight guard so a page fetch is skipped while a previous fetch is still running.
    • Adds a throttle/cooldown window after each successful fetch to prevent rapid repeated triggers from scrolling.
    • Preserves cleanup behavior on unmount and keeps existing observer/callback semantics intact.
  • [MODIFY] src/hooks/useLazyLoad.tsx

    • Reuses the same guard pattern for lazy-load elements.
    • Prevents duplicate IntersectionObserver callbacks from firing multiple loads for the same target.
    • Resets the cooldown correctly when new content replaces the observed element.
  • [ADD] src/hooks/__tests__/useInfiniteScroll.test.ts

    • Unit tests for rapid scroll simulation, overlapping load prevention, cooldown enforcement, and cleanup.
  • [ADD] src/hooks/__tests__/useLazyLoad.test.tsx

    • Integration-style tests for repeated observer callbacks, duplicate target guards, and unmount behavior.

Verification Results

npm test -- src/hooks/__tests__/useInfiniteScroll.test.ts src/hooks/__tests__/useLazyLoad.test.tsx
✅ 10/10 passed

Manual acceptance check:
✅ Rapid scrolling triggers only one fetch at a time
✅ Overlapping loads are prevented while a request is in-flight
✅ Cooldown delays the next fetch after completion
✅ Existing infinite scroll behavior is preserved
Acceptance Criteria Status
Implemented across the listed files useInfiniteScroll.ts and useLazyLoad.tsx both updated with guard
Unit/integration tests added or updated and passing ✅ New + updated hook tests pass (10/10)
No regression; follows project coding standards ✅ Existing behavior preserved; cleanup and observer semantics intact

Closes #1202

@drips-wave

drips-wave Bot commented Aug 27, 2026

Copy link
Copy Markdown

@Netty-kun Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

@RUKAYAT-CODER

Copy link
Copy Markdown
Contributor

Well done on the job done so far!
Kindly fix workflow to pass

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Guard infinite scroll against duplicate page loads

2 participants