Skip to content

fix(timeline): fix blank room timeline when app returns from background#657

Merged
7w1 merged 3 commits intoSableClient:devfrom
Just-Insane:fix/timeline-blank-on-foreground
Apr 10, 2026
Merged

fix(timeline): fix blank room timeline when app returns from background#657
7w1 merged 3 commits intoSableClient:devfrom
Just-Insane:fix/timeline-blank-on-foreground

Conversation

@Just-Insane
Copy link
Copy Markdown
Contributor

Description

When the app returns from background, retryImmediately() triggers a fresh sliding sync response. If the server includes initial: true for the currently open room, the SDK emits RoomEvent.TimelineReset, replacing the live timeline with a new empty one. eventsLength drops to 0 but isReady stays true, leaving the message list visually blank for ~500 ms until events re-arrive from the server.

Changes

RoomTimeline.tsx

  • Added a useLayoutEffect that detects eventsLength dropping to 0 while the timeline is already visible (isReady === true). It immediately sets isReady = false and resets hasInitialScrolledRef, re-arming the existing initial-scroll logic. Uses useLayoutEffect so the transition happens before the browser paints — the blank frame is never shown.

  • Expanded showLoadingPlaceholders, vListItemCount, and the container opacity to include the !isReady case, so skeleton placeholders are shown immediately during the reload rather than leaving an invisible list.

Before / After

Before After
Room goes blank for ~500 ms on foreground return Skeleton placeholders appear instantly, then content fades in

Fixes #

Type of change

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • This change requires a documentation update

Checklist:

  • My code follows the style guidelines of this project
  • I have performed a self-review of my own code
  • I have commented my code, particularly in hard-to-understand areas
  • My changes generate no new warnings

AI disclosure:

Fully AI generated (explain what all the generated code does in moderate detail).

The useLayoutEffect guard and the three !isReady condition expansions were fully AI generated. The effect fires synchronously before paint when eventsLength drops to 0 on an already-visible timeline, hides content and resets the initial-scroll flag. The existing 80 ms scroll timer then re-runs once events refill and calls setIsReady(true). The showLoadingPlaceholders / vListItemCount changes ensure VList renders 3 placeholder skeleton rows (matching the existing pagination-loading behaviour) while events are absent.

When the app returns from background, retryImmediately() triggers a fresh
sliding sync response. If the server includes initial:true for the open room,
the SDK emits RoomEvent.TimelineReset, replacing the live timeline with a new
empty one. eventsLength drops to 0 but isReady stays true, leaving the message
list visible but empty for ~500 ms until events re-arrive.

Add a useLayoutEffect that detects eventsLength dropping to 0 while the timeline
is already visible (isReady === true). It hides the content (opacity 0) and
resets hasInitialScrolledRef so the initial-scroll effect re-arms. When events
refill the timeline the existing 80 ms scroll timer fires again and sets
isReady back to true, revealing the content.
@Just-Insane Just-Insane requested review from 7w1 and hazre as code owners April 9, 2026 19:13
@7w1 7w1 added this pull request to the merge queue Apr 10, 2026
Merged via the queue into SableClient:dev with commit 72da551 Apr 10, 2026
12 checks passed
github-merge-queue bot pushed a commit that referenced this pull request Apr 10, 2026
> [!IMPORTANT]
> Merging this PR will create a new release.

## Features

* Add support for rendering bundled urls per MSC4095
([#590](#590) by @nushea)
* Improve code blocks with faster, more accurate syntax highlighting,
broader language support, and separate light and dark theme options.
([#576](#576) by @hazre)
* Add statuses to DMs
([#644](#644) by @nushea)
* Add custom DM images and descriptions
([#644](#644) by @nushea)
* Add statuses to Member Tile
([#644](#644) by @nushea)
* Add the ability to set Global Name Colors dependent on the theme
(dark/light) ([#656](#656) by
@nushea)
* Add a setting to collapse sidebar folders by default.
([#624](#624) by @7w1)
* Add a "Dismiss" button to command response messages.
([#625](#625) by @7w1)
* Update threads: various fixes, browse all room threads, and see live
reply counts on messages.
([#564](#564) by @Just-Insane)
* Re-introduced custom HTML formatting for long messages
([#641](#641) by @Septicity)
* You can now share direct links to specific settings, and opening one
takes you to the right section and highlights the target option.
([#577](#577) by @hazre)
* Settings now use route-based navigation with improved desktop and
mobile behavior, including better back and close handling.
([#577](#577) by @hazre)

## Fixes

* Use file name instead of "a voice message" for non-voice audio files.
([#651](#651) by @mvanhorn)
* Constrain bug report modal to viewport height to prevent overflow.
([#652](#652) by @mvanhorn)
* Fix dms navigation not navigating to dms when local storage is messed
up. ([#653](#653) by @7w1)
* Fix reply button not capturing editor focus.
([#623](#623) by @7w1)
* Fixes links not being clickable in formatted messages, including
messages that use abbreviations.
([#632](#632) by @hazre)
* Fix some zero-width (invisible) names
([#640](#640) by @nushea)
* Fix iOS elastic bounce-back overscroll on the root element.
([#650](#650) by @mvanhorn)
* Fixed the "sticky scrolling" issue in encrypted rooms with many PMP
messages. ([#626](#626) by
@Septicity)
* Fix blank room timeline when app returns from background. When sliding
sync delivers an `initial: true` response for the open room, a
`TimelineReset` event now correctly shows skeleton placeholders while
events reload instead of leaving an empty view.
([#657](#657) by @Just-Insane)
* Image zooming is now centered on the cursor position
([#602](#602) by @mini-bomba)
* Image zooming is now multiplicative instead of additive, resulting in
a consistent "zooming speed".
([#602](#602) by @mini-bomba)
* Image zoom buttons now zoom towards the center of the screen
([#602](#602) by @mini-bomba)
* Right clicks no longer drag images in the viewer.
([#620](#620) by @Septicity)
* Updated Support links to point to https://opencollective.com/sable
([#661](#661) by @7w1)
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.

2 participants