Skip to content

fix: /blocks gap when pausing then resuming #220

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
o-az wants to merge 1 commit into
base: main
Choose a base branch
from
+23 −13
Draft

fix: /blocks gap when pausing then resuming #220

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
36 changes: 23 additions & 13 deletions apps/explorer/src/routes/_layout/blocks.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,24 +84,23 @@ function RouteComponent() {
setLiveBlocks((prev) => {
// Don't add if already exists
if (prev.some((b) => b.number === latestBlock.number)) return prev

// If we have existing blocks, check for continuity
const prevLatest = prev[0]?.number
if (prevLatest != null && latestBlock.number != null) {
Copy link
Member

@bpierre bpierre Dec 9, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

should we stick to strict equals? or just prevLatest && latestBlock.number

// If there's a gap (new block is more than 1 ahead), reset
// This happens when returning from another page or after pausing
if (latestBlock.number > prevLatest + 1n) {
// Clear to trigger refetch with fresh data
return []
}
}

// Prepend new block and keep only BLOCKS_PER_PAGE
return [latestBlock, ...prev].slice(0, BLOCKS_PER_PAGE)
})
}, [latestBlock, live, page])

// Re-initialize when navigating back to page 1 with live mode
React.useEffect(() => {
if (page === 1 && live && queryData.blocks) {
setLiveBlocks((prev) => {
// Only reinitialize if we have no blocks or stale data
if (prev.length === 0) {
return queryData.blocks.slice(0, BLOCKS_PER_PAGE)
}
return prev
})
}
}, [page, live, queryData.blocks])

// Calculate which blocks to show for this page
const startBlock = currentLatest
? currentLatest - BigInt((page - 1) * BLOCKS_PER_PAGE)
Expand Down Expand Up @@ -135,6 +134,17 @@ function RouteComponent() {
placeholderData: keepPreviousData,
})

// Re-initialize liveBlocks when empty and fetchedBlocks is ready
// Don't fall back to queryData.blocks here - it may be stale after a gap reset.
// The blocks memo handles the temporary display while fetchedBlocks loads.
React.useEffect(() => {
Copy link
Member

@bpierre bpierre Dec 9, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we could skip the useEffect here since we check for liveBlocks.length === 0 and fetchedBlocks.length > 0, guaranteeing that the next render will fill liveBlocks

if (page === 1 && live && liveBlocks.length === 0) {
if (fetchedBlocks && fetchedBlocks.length > 0) {
setLiveBlocks(fetchedBlocks.slice(0, BLOCKS_PER_PAGE))
}
}
}, [page, live, liveBlocks.length, fetchedBlocks])

// Use live blocks on page 1 when live, otherwise use fetched/loader data
const blocks = React.useMemo(() => {
if (page === 1 && live && liveBlocks.length > 0) {
Expand Down