Apps: smoother prediction animation#797
Merged
microbit-matt-hillsdon merged 7 commits intoappsfrom Mar 18, 2026
Merged
Conversation
|
Preview build will be at |
Replace CSS variable names (without var, so just nonsense colours) with useToken. This gets us the green back on the percentage. Simplfy LedIcon and move the subscription to the place where it matters.
Add initiallyOn prop to LedIcon so the CSS variable is correct from the first paint, removing the need for an eager getState() call in ActionNameCard. Add missing displayName for forwardRef lint rule. Remove stale comment in PercentageMeter.
microbit-grace
approved these changes
Mar 18, 2026
microbit-grace
left a comment
microbit-grace
left a comment
There was a problem hiding this comment.
LGTM, tested out on iOS and the experience is observably better (less jerky graphlines) in the testing model page than before.
microbit-matt-hillsdon
changed the title
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Addresses #700
When running prediction, CreateAI can be glitchy on slower devices as the prediction step runs every 250ms triggering a redraw of parts of the React tree. Most of the processing delay is taken up not with processing, but with updating in React, which is not really intended for responsive animation.
The fix
The LedIcon and ActionNameCard have colour changes when they become the detected action, these are now subscribed to outside of react and the HTML elements modified directly. The PercentageDisplay, PercentageMeter, ActionCertaintyCard have their data updated similarly. The LedIcon in PredictedAction changes the actual icon data inside its LedIcon, so it would be more intrusive to move entirely outside of the React update tree, so there is still some slowdown when the predicted action changes. However, it happens much less often.
Performance before fix
Performance data was collected in a web browser with CPU throttling at 20x on an M1 Macbook. Both sample screenshots show around 2s of data.
Performance after fix
This shows shorter updates happening more regularly, which corresponds to a smoother UI.