Skip to content

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

Merged
RUKAYAT-CODER merged 8 commits into
rinafcode:mainfrom
Netty-kun:fix/issue-1202-guard-infinite-scroll-against-duplicate-page
Sep 6, 2026
Merged

fix: guard infinite scroll against duplicate page loads#1254
RUKAYAT-CODER merged 8 commits into
rinafcode:mainfrom
Netty-kun:fix/issue-1202-guard-infinite-scroll-against-duplicate-page

Conversation

@Netty-kun

@Netty-kun Netty-kun commented Aug 27, 2026

Copy link
Copy Markdown
Contributor

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

Netty-kun and others added 4 commits September 5, 2026 09:58
- useInfiniteScroll: fix bitwise | typo, drop cooldown that contradicted
  the in-flight guard semantics covered by its own tests
- useLazyLoad: un-collapse single-line file, fix WeakMap type and retain
  LazyLoadOptions/DefaultFallback definitions
- useLazyLoad.test: un-collapse and fix mangled vi/toBe assertions
- ci.yml: restore canonical workflow (undo malformed test step)
@RUKAYAT-CODER

Copy link
Copy Markdown
Contributor

Thank you for contributing to the project

@RUKAYAT-CODER
RUKAYAT-CODER merged commit 47d4321 into rinafcode:main Sep 6, 2026
6 of 7 checks passed
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