fix: load more manual click by restorenode · Pull Request #244 · initia-labs/interwovenkit

restorenode · 2026-07-24T09:27:50Z

Before

LoadMoreButton used react-intersection-observer to auto-fetch all remaining pages instantly upon scrolling into view. Because it triggered immediately, the button's text could flash on screen for no functional reason before vanishing.

before.mov

After

LoadMoreButton is now a deterministic, manually clicked button, aligning with standard UX patterns across Initia applications.

suggested-update.mov

Summary by CodeRabbit

New Features
- Load-more controls now begin fetching additional results automatically as the user nears them.
- Loading state is reflected via accessibility attributes, with a spinner shown during fetches.
- The load-more UI supports custom styling for improved layout.
Bug Fixes
- Prevented additional load-more actions while a page is already being fetched.
- Updated bridge history and withdrawal pagination to align the loading state and spacing with the active next-page request.

coderabbitai · 2026-07-24T09:28:21Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 319adee2-a741-4a57-bb77-25bb88ad1e43

📥 Commits

Reviewing files that changed from the base of the PR and between f758ec4 and c069851.

📒 Files selected for processing (3)

packages/interwovenkit-react/src/components/LoadMoreButton.module.css
packages/interwovenkit-react/src/components/LoadMoreButton.tsx
packages/interwovenkit-react/src/pages/bridge/op/WithdrawalList.tsx

🚧 Files skipped from review as they are similar to previous changes (2)

packages/interwovenkit-react/src/pages/bridge/op/WithdrawalList.tsx
packages/interwovenkit-react/src/components/LoadMoreButton.tsx

Walkthrough

Changes

Scroll-aware pagination

Layer / File(s)	Summary
Scroll-root context wiring `packages/interwovenkit-react/src/components/PageScrollContext.tsx`, `packages/interwovenkit-react/src/components/Scrollable.tsx`, `packages/interwovenkit-react/src/components/Page.tsx`	The page captures its scroll container and provides it to descendant components through React context.
Visibility-triggered loading control `packages/interwovenkit-react/src/components/LoadMoreButton.tsx`, `packages/interwovenkit-react/src/components/LoadMoreButton.module.css`	`LoadMoreButton` observes the page scroll root with a 200px margin, guards auto-loading and clicks while loading, supports custom classes, and renders loading accessibility attributes and a spinner.
Pagination integration and spacing `packages/interwovenkit-react/src/pages/bridge/...`	Bridge history receives load-more spacing, while withdrawal pagination uses `isFetchingNextPage` for the button’s loading state.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Sequence Diagram(s)

sequenceDiagram
  participant Page
  participant PageScrollContext
  participant LoadMoreButton
  participant useInView
  participant WithdrawalList
  Page->>PageScrollContext: provide Scrollable root
  LoadMoreButton->>PageScrollContext: read scroll root
  LoadMoreButton->>useInView: observe with 200px root margin
  useInView-->>LoadMoreButton: report inView
  LoadMoreButton->>WithdrawalList: invoke onClick when not loading
  WithdrawalList-->>LoadMoreButton: provide isFetchingNextPage

Suggested reviewers: simcheolhwan

Poem

A bunny spots the button near,
And loads the next page without fear.
The scroll root helps each hop take flight,
A spinner glows in full delight.
More bridge history joins the queue—
Hop, hop, fetch, and peek anew!

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly reflects the main change from auto-loading to manual clicking for the load-more button.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

📝 Generate docstrings

Create stacked PR
Commit on current branch

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch fix/loadmore-manual-click

_{Comment @coderabbitai help to get the list of available commands.}

simcheolhwan · 2026-07-24T15:16:02Z

The symptom in the Before video (all remaining pages loading instantly on scroll) seems to come from two implementation defects rather than the auto-scroll pattern itself:

Both call sites pass onClick as an inline function, so its reference changes on every render. Since the effect depends on [inView, onClick], it re-runs on every render regardless of scrolling. While new items are suspended inside AsyncBoundary with zero height, the button stays in the viewport and pages cascade until everything is loaded.
disabled only blocks clicks, not the effect, so fetchNextPage() keeps firing while a fetch is in flight. With React Query v5 defaulting to cancelRefetch: true, the in-flight request can get cancelled and restarted repeatedly.

Would you be open to trying a fix that keeps the pattern and addresses the root cause instead? Something like:

// LoadMoreButton.tsx
useEffect(() => {
  if (inView && !disabled) onClick()
}, [inView, disabled, onClick])

// BridgeHistory.tsx
const loadMore = useCallback(() => setPage((page) => page + 1), [])

// WithdrawalList.tsx
const loadMore = useCallback(() => fetchNextPage(), [fetchNextPage])

This should make loading trigger only when the intersection state actually changes, preserving the scroll UX. Could you test whether this resolves the instant-load issue on your end?

restorenode · 2026-07-27T04:11:52Z

The symptom in the Before video (all remaining pages loading instantly on scroll) seems to come from two implementation defects rather than the auto-scroll pattern itself:

Both call sites pass onClick as an inline function, so its reference changes on every render. Since the effect depends on [inView, onClick], it re-runs on every render regardless of scrolling. While new items are suspended inside AsyncBoundary with zero height, the button stays in the viewport and pages cascade until everything is loaded.

disabled only blocks clicks, not the effect, so fetchNextPage() keeps firing while a fetch is in flight. With React Query v5 defaulting to cancelRefetch: true, the in-flight request can get cancelled and restarted repeatedly.

Would you be open to trying a fix that keeps the pattern and addresses the root cause instead? Something like:
// LoadMoreButton.tsx
useEffect(() => {
  if (inView && !disabled) onClick()
}, [inView, disabled, onClick])
// BridgeHistory.tsx
const loadMore = useCallback(() => setPage((page) => page + 1), [])

// WithdrawalList.tsx
const loadMore = useCallback(() => fetchNextPage(), [fetchNextPage])
This should make loading trigger only when the intersection state actually changes, preserving the scroll UX. Could you test whether this resolves the instant-load issue on your end?

Yes, I came across the same root causes. I considered fixing the effect directly, but decided dropping auto-scroll entirely was the better call. Separately, auto-triggering the instant the button glimpses into view isn't very intuitive. I went with manual click since that's the typical pattern in Initia apps, it's more aesthetic, and it's simpler to reason about long-term. Let me know which direction you would like to go. Do you think we should just have auto-scroll and just get rid of the button?

cloudflare-workers-and-pages · 2026-07-27T05:00:44Z

Deploying interwovenkit-testnet with Cloudflare Pages

Latest commit:	`c069851`
Status:	✅ Deploy successful!
Preview URL:	https://ab03340d.interwovenkit-testnet.pages.dev
Branch Preview URL:	https://fix-loadmore-manual-click.interwovenkit-testnet.pages.dev

View logs

cloudflare-workers-and-pages · 2026-07-27T05:00:44Z

Deploying interwovenkit with Cloudflare Pages

Latest commit:	`c069851`
Status:	✅ Deploy successful!
Preview URL:	https://4d6d2dd2.interwovenkit.pages.dev
Branch Preview URL:	https://fix-loadmore-manual-click.interwovenkit.pages.dev

View logs

cloudflare-workers-and-pages · 2026-07-27T05:00:49Z

Deploying interwovenkit-staging with Cloudflare Pages

Latest commit:	`c069851`
Status:	✅ Deploy successful!
Preview URL:	https://ca125f6d.interwovenkit-staging.pages.dev
Branch Preview URL:	https://fix-loadmore-manual-click.interwovenkit-staging.pages.dev

View logs

coderabbitai

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@packages/interwovenkit-react/src/components/LoadMoreButton.tsx`:
- Around line 1-2: Remove the useInView observer and useEffect/useEffectEvent
machinery from LoadMoreButton, including the viewport-margin configuration and
effect that invokes onClick. Preserve the button’s existing onClick handler so
loading occurs only through manual clicks, while retaining the disabled
behavior.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

Push a commit to this branch (recommended)
Create a new PR with the fixes

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 9a09425c-0541-4d5a-9cc4-90594e7c8568

📥 Commits

Reviewing files that changed from the base of the PR and between 85fb437 and 4b38802.

⛔ Files ignored due to path filters (1)

pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (1)

packages/interwovenkit-react/src/components/LoadMoreButton.tsx

…ss a11y/spacing review feedback

- Guard clicks instead of disabling so focus and aria-busy survive - Rename the disabled prop to isLoading to match its render behavior - Remove the :disabled color; --gray-6 was under 1.5:1 in both themes - Correct the comment on why the click fallback is needed

restorenode added 2 commits July 24, 2026 16:21

fix(bridge): replace auto-scroll pagination with manual load more button

56ebc92

chore(deps): remove unused react-intersection-observer

85fb437

restorenode requested a review from simcheolhwan as a code owner July 24, 2026 09:27

fix(bridge): auto-load pages ahead of scroll with manual click fallback

4b38802

coderabbitai Bot reviewed Jul 27, 2026

View reviewed changes

Comment thread packages/interwovenkit-react/src/components/LoadMoreButton.tsx

simcheolhwan reviewed Jul 27, 2026

View reviewed changes

restorenode and others added 2 commits July 27, 2026 13:11

fix(bridge): scope intersection root to the scrollable page and addre…

f758ec4

…ss a11y/spacing review feedback

restorenode closed this Aug 13, 2026

restorenode deleted the fix/loadmore-manual-click branch August 13, 2026 07:04

Navigation Menu

Uh oh!

fix: load more manual click - #244

fix: load more manual click#244
restorenode wants to merge 5 commits into
mainfrom
fix/loadmore-manual-click

restorenode commented Jul 24, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented Jul 24, 2026 •

edited

Loading

Uh oh!

simcheolhwan commented Jul 24, 2026

Uh oh!

restorenode commented Jul 27, 2026

Uh oh!

cloudflare-workers-and-pages Bot commented Jul 27, 2026 •

edited

Loading

Uh oh!

cloudflare-workers-and-pages Bot commented Jul 27, 2026 •

edited

Loading

Uh oh!

cloudflare-workers-and-pages Bot commented Jul 27, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

restorenode commented Jul 24, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Before

After

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented Jul 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Sequence Diagram(s)

Uh oh!

simcheolhwan commented Jul 24, 2026

Uh oh!

restorenode commented Jul 27, 2026

Uh oh!

cloudflare-workers-and-pages Bot commented Jul 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Deploying interwovenkit-testnet with Cloudflare Pages

Uh oh!

cloudflare-workers-and-pages Bot commented Jul 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Deploying interwovenkit with Cloudflare Pages

Uh oh!

cloudflare-workers-and-pages Bot commented Jul 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Deploying interwovenkit-staging with Cloudflare Pages

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

restorenode commented Jul 24, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Jul 24, 2026 •

edited

Loading

cloudflare-workers-and-pages Bot commented Jul 27, 2026 •

edited

Loading

cloudflare-workers-and-pages Bot commented Jul 27, 2026 •

edited

Loading

cloudflare-workers-and-pages Bot commented Jul 27, 2026 •

edited

Loading