Repository navigation
Load the dashboard into the layout it keeps - #16
Merged
Merged
Conversation
The loading skeleton was three grey blocks shaped like nothing on the page, so everything jumped when the runs arrived. Until the first load, the dashboard now lays out a placeholder history of every deployed function at production's typical figures, its readings veiled as bones and its lines and marks hidden, so the loaded page lands in the same place at every width. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
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
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.
The loading skeleton was three grey blocks shaped like nothing on the page, so everything jumped when the runs arrived. Now the page loads straight into the layout it keeps: the real dashboard, its numbers shown as placeholders until they arrive.
How
web/src/placeholder.ts): four days of runs of all 137 deployed functions, built fromVARIANTSand infra's memory sizes and passed through the sametoPointsas real runs. Each variant gets production's rounded typical figures, x86_64 and per-size patterns, and version strings. That way the leaders, line wraps and the arm64 headline match what loads. For example, the warm-start leader is "Node.js 24, Web Function", which wraps where "LLRT" wouldn't.inertdisplay: contentswrapper (so the toolbar stays sticky), with a screen-reader "Loading runs" status. The error and "No runs yet" card is unchanged.index.css): under.pending, readings become pulsing bones the size of their text. That covers.measured, mono text, and a new.datumclass for words the data decides, such as leader names, the arm64 headline and "faster/slower". Plot lines and.marks (dots, bars, ticks, dumbbells) are hidden. Titles, legends, names and controls show as they will.Verified
I compared every in-flow element's position and height, placeholder against the production history, at 320, 360, 390, 640, 768, 1024, 1280, 1440 and 1920 px: no element differs, and the page heights are equal.
Limits
TYPICALtable needs refreshing.Created with Claude Opus 5.5 in Claude Code.
🤖 Generated with Claude Code