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
The anti flicker delay ran only inside QueryStates, so the inline skeletons flashed on every fast query. Some cards also hid data already in hand, or changed height when the skeleton left. Split from #447.
Changes
Moved the 120ms anti flicker delay into the .skeleton class, and removed useDelayedFlag and LOADING_INDICATOR_DELAY.
Fixed CapitalCard, IcpPriceCard, TotalStakedCard, DailyRewardsCard, and the account and stakes cards, so they keep their height and show data already in hand.
Turned off animate-pulse under prefers-reduced-motion.
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.
► src/governance-app-frontend/src/app/styles/main.css Add skeleton CSS variables and animations for skeleton loading indicators ► src/governance-app-frontend/src/common/components/QueryStates.tsx Render SkeletonScreen/SkeletonText when loading instead of simple placeholders ► src/governance-app-frontend/src/common/components/Skeleton.tsx Update Skeleton to use new skeleton class and remove direct animation classes ► src/governance-app-frontend/src/common/components/skeletons/SkeletonScreen.tsx Add SkeletonScreen component to announce loading regions to SRs ► src/governance-app-frontend/src/common/components/skeletons/SkeletonText.tsx Add SkeletonText component to render multiple skeleton lines ► src/governance-app-frontend/src/common/constants/extra.ts Remove LOADING_INDICATOR_DELAY constant (loading indicator delay logic moved to skeletons) ► src/governance-app-frontend/src/common/hooks/useDelayedFlag.ts (Deleted) Removal of delayed loading flag hook (relying on new skeleton approach)
Bug Fix
► src/governance-app-frontend/src/features/dashboard/components/IcpPriceCard.tsx Preserve card height when skeleton is shown by wrapping with min-height container and adjusting loading skeletons ► src/governance-app-frontend/src/features/dashboard/components/TotalStakedCard.tsx Use isTvlLoading/isMetricsLoading to show skeletons, ensure layout stability ► src/governance-app-frontend/src/features/stakes/components/summaryCards/CapitalCard.tsx Show USD line with skeleton only when ticker data is loading, move total staked display to always render ► src/governance-app-frontend/src/features/stakes/components/summaryCards/EarningsCard.tsx Adjust skeleton height from 4 to 5 for consistency ► src/governance-app-frontend/src/features/stakes/components/summaryCards/EngagementCard.tsx Adjust skeleton heights to better fit content and responsiveness ► src/governance-app-frontend/src/features/account/components/AccountCard.tsx Adjust loading skeleton height from 4 to 5 units ► src/governance-app-frontend/src/features/accounts/components/AccountsCard.tsx Adjust multiple skeleton instances to new sizing (h-5, w-...) ► src/governance-app-frontend/src/features/accounts/components/AccountsListItem.tsx Adjust balance skeleton height from 4 to 5 and width to 20 ► src/governance-app-frontend/src/features/accounts/components/AccountsTotalCard.tsx Adjust skeleton heights from 4 to 5 and consistent widths ► src/governance-app-frontend/src/features/dashboard/components/DailyRewardsCard.tsx Wrap reward timestamp area in a div with min height and adjust skeleton height to 5 ► src/governance-app-frontend/src/features/voting/components/FollowedNeuronCard.tsx Adjust known neurons loading skeleton width from 40 to 48 ► src/governance-app-frontend/src/features/voting/components/FollowedNeuronCard.tsx Update conditional rendering to use new SkeletonWrapper for loading content
Inline loading regions are still not announced. SkeletonScreen is only used by the default QueryStates fallback, while the many direct Skeleton callers—including the changed dashboard, account, and stake cards—remain unwrapped, so their loading state has no accessible status despite the new bars being explicitly hidden. Wrap each logical inline skeleton region in one SkeletonScreen (and also cover custom skeleton loadingComponent values) so screen readers receive the promised single loading announcement.
I did not wrap the inline card skeletons in SkeletonScreen. The dashboard shows six or more at once, and each wrapper would announce "Loading" on its own. Before this PR the bars were empty divs, so screen readers skipped them already. The route skeletons in #467 give the one announcement for the page. I changed the PR body to match.
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.
Motivation
The anti flicker delay ran only inside
QueryStates, so the inline skeletons flashed on every fast query. Some cards also hid data already in hand, or changed height when the skeleton left. Split from #447.Changes
.skeletonclass, and removeduseDelayedFlagandLOADING_INDICATOR_DELAY.aria-hidden, and addedSkeletonScreento announce "loading" once for a full loading region (theQueryStatesfallback here, the route skeletons in feat(loading): add content-shaped skeletons for every route #467).CapitalCard,IcpPriceCard,TotalStakedCard,DailyRewardsCard, and the account and stakes cards, so they keep their height and show data already in hand.animate-pulseunderprefers-reduced-motion.Next #467