You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
Repository navigation
feat(loading): add content-shaped skeletons for every route - #467
/voting, the proposal page, and the transaction list showed the same three grey bars whatever was behind them. /dashboard, /neurons, /accounts, and /settings had no pending state, so they showed a blank frame. Split from #447.
Changes
Added a skeletons/ set: one shell per route, plus shared list, card, and row shapes.
Wired the route shells as pendingComponent on all six routes.
Replaced the inline skeletons in the modals, the accounts list, and the transaction list with the shared rows.
Removed MultipleSkeletons.
Kept the /neurons header while the neurons query loads, and rendered the next-page proposals skeleton only during a fetch.
Move the 120ms anti flicker delay into the `.skeleton` class, so every
skeleton holds its space at once and reveals itself late. Remove
`useDelayedFlag` and `LOADING_INDICATOR_DELAY`.
Mark skeleton bars `aria-hidden` and add `SkeletonScreen`, which
announces one "loading" for each region. Stop `animate-pulse` under
`prefers-reduced-motion`.
Fix the card skeletons that hid data already in hand or changed the
card height when they left.
Add a `skeletons/` set of content-shaped shells: one per route, plus
the list, card, and row shapes they share. Wire them as
`pendingComponent` on all six routes.
Replace the inline list skeletons in the modals and the transaction
list with the shared rows. Remove `MultipleSkeletons`.
…e pages
Mirror all six settings sections and the version footer. Show the
proposal placeholders only when showProposals is on. Keep the neurons
header while the query loads. Clamp the stat card bars to the card
width. Render the next-page skeleton only during a fetch.
NeuronCard.tsx:148–239 always renders six metadata rows, but this placeholder reserves only one two-column row and a button. Even without optional warnings or actions, each loaded card is substantially taller. Since this also serves as the query-loading fallback, a non-empty response pushes subsequent cards down on mobile. Match the amount header and six padded label/value rows.
The proposal page puts the Markdown summary in the first card, followed by ProposalDetailsVoting in the second (routes/_auth/voting/proposals/$id/index.tsx:186–190). This shell reverses those regions, so the text and voting placeholders do not occupy the space their content replaces. Put SkeletonText below the first card's header and move the voting placeholders into the second card.
AccountTransactionItem uses three detail lines for ordinary transfers, with the amount below them on phones and in a separate column from sm upward (TransactionItem.tsx:102–186). This shell instead packs everything into two text rows with desktop padding at every width. Transfer results therefore make the list substantially taller on mobile and can resize the dialog. Use the same responsive grid and padding, with separate detail lines and an amount cell.
Mirror the six NeuronCard rows and its APY badge. Put the summary text
in the first proposal card and the vote bar and totals in the second.
Use the responsive transaction grid, with the amount below the details
on a phone.
With AdvancedFeature.AdvancedFollowing enabled, the page's query-loading state uses a four-row card, but this pending shell always renders the compact simple card. If the queries are still loading when the route mounts, the proposal toggle and list move down before data arrives. Pass the same feature flag from VotingPending and render the matching overview shape here, preferably sharing it with VotingOverviewAdvanced.
Share the simple and advanced following card skeletons between the
overviews and the route shell, and pick the card from the same feature
flag as the page.
Below md, the dashboard cards stack, so this single action placeholder leaves the account card too short. AccountCard.tsx:91-100 renders two stacked actions; with subaccounts enabled, AccountsCard.tsx:73-103 shows preview rows plus an action, including two rows while loading. The missing content pushes subsequent cards down when the page replaces the pending shell. Use the same features.subaccounts flag as the dashboard to render the corresponding rows/actions and spacing.
Constrain loading name bar to available column width
At a 320px viewport, the address-book drawer and row padding leave about 130px for this column. The fixed 160px name bar overflows it and overlaps the first action placeholder. Add max-w-full so the loading row stays within its available width, as the real entry's truncated name does.
Mirror AccountCard and AccountsCard in the dashboard shell, picked from
the same feature flag as the page. Clamp the address book name bar to
its column.
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
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.
daniel-wong-dfinity-org-twin
left a comment
Motivation
/voting, the proposal page, and the transaction list showed the same three grey bars whatever was behind them./dashboard,/neurons,/accounts, and/settingshad no pending state, so they showed a blank frame. Split from #447.Changes
skeletons/set: one shell per route, plus shared list, card, and row shapes.pendingComponenton all six routes.MultipleSkeletons./neuronsheader while the neurons query loads, and rendered the next-page proposals skeleton only during a fetch.Prev. #466