The Problem
When a user clicks the Trickle "Continue" button, nothing visibly happens for several seconds if the next block contains heavy media (e.g. a Narrative with large images). Trickle unlocks and renders the next block immediately, but that block signals to the framework that it is "ready" only after all its images have finished downloading.
During that gap, the user sees no feedback. The button disappears (or stays visible depending on config) but the page appears static. On slow connections or with large images, this gap can last 5-10 seconds or more. Users reasonably conclude the click did not register, or that the course is broken.
There is also no existing mechanism to prevent users from manually scrolling down to the unfinished block early. The content is in the DOM, just not fully rendered visually.
Why It Matters
- Users interpret silence as failure, not progress. A blank pause after interaction erodes trust in the course.
- Support tickets and drop-off are predictable outcomes of this pattern at scale.
- The framework already has the signal we need (
_isReady fires when a component finishes loading) - we just do not use it for user feedback.
Proposed Solution
Show a loading spinner immediately when the Trickle button is clicked, and hide it once the next block's components report they are ready.
- User clicks the Trickle button.
- Immediately: a loading spinner appears at the button position. Needs to also account for when the button is hidden.
- The next block renders and its components load their media in the background.
- Once all components in that block report ready, the spinner is dismissed and (if enabled) the page scrolls to the new block as normal.
Suggest waiting until #232 is approved and merged.
Mockups
🚧 TBD - will post proposed solutions here
The Problem
When a user clicks the Trickle "Continue" button, nothing visibly happens for several seconds if the next block contains heavy media (e.g. a Narrative with large images). Trickle unlocks and renders the next block immediately, but that block signals to the framework that it is "ready" only after all its images have finished downloading.
During that gap, the user sees no feedback. The button disappears (or stays visible depending on config) but the page appears static. On slow connections or with large images, this gap can last 5-10 seconds or more. Users reasonably conclude the click did not register, or that the course is broken.
There is also no existing mechanism to prevent users from manually scrolling down to the unfinished block early. The content is in the DOM, just not fully rendered visually.
Why It Matters
_isReadyfires when a component finishes loading) - we just do not use it for user feedback.Proposed Solution
Show a loading spinner immediately when the Trickle button is clicked, and hide it once the next block's components report they are ready.
Suggest waiting until #232 is approved and merged.
Mockups
🚧 TBD - will post proposed solutions here