feat: add Loading component and loading states#675
Open
Ehsan-saradar wants to merge 1 commit into
Open
Conversation
Adds a `<Loading>` component (with optional bordered card wrapper) and wires it into pages that previously rendered with empty data while async fetches were in flight: - Block detail (`/<chain>/block/:height`): replaces the side-effect-in- computed pattern with `onMounted` + explicit loading state - Dashboard (`/<chain>`): Active Proposals, Application Version, and Node Information sections show loading inside their cards while keeping titles visible - IBC Connection detail: IBC Client and Channels sections show loading while preserving the connection header - Supply (`/<chain>/supply`): preserves table headers, shows loading during pagination - Parameters (`/<chain>/params`): per-section loading for Chain ID, Staking, Governance, Distribution, Slashing, Application Version, Node Information Also fixes a missing `await` in `handleGovernanceParams` so the action's promise settles only after the params are populated.
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.
Summary
Adds a reusable
<Loading>component and wires it into pages that previously rendered with empty data while async fetches were in flight. The goal is to give users a clear visual signal that data is being fetched, rather than a flash of empty cards.Changes
src/components/Loading.vue(new): centered spinner + text inside an optionalbg-base-100card. Props:height,size,text,bordered. Use:bordered=\"false\"to embed inside an existing card that already has its own title and background./<chain>/block/:height): replaces the side-effect-in-computed pattern (whereisFutureBlockwas triggeringfetchBlock) with a properonMountedlifecycle hook and explicitloadingstate. Also ensuresstore.latestis loaded before deciding whether to treat a height as a future block, so the user no longer sees empty "Block Header" / "Transactions" / "Last Commit" cards on first paint./<chain>): Active Proposals, Application Version, and Node Information now show a loading row inside their cards while keeping titles visible. The proposals loading state is sourced from the existinguseGovStore().loading['2']LoadingStatus tracking./<chain>/ibc/connection/:id): top connection header (chain IDs, state, counterparty) stays visible; IBC Client and Channels sections show loading inside their cards while their async RPC calls are in flight./<chain>/supply): table headers stay visible, body is replaced with loading row during initial fetch and during page changes./<chain>/params): per-section loading for Chain ID, Staking, Governance, Distribution, Slashing, Application Version, and Node Information. Each section is awaited independently so loading reflects only that section.CardParameter: accepts a new optionalloadingprop. When set, the card still renders (title visible) and shows the loading component instead of the value grid.useParamsStore.handleGovernanceParams: thePromise.allfor voting/deposit/tally params was previously not awaited, so the action resolved beforegov.itemswas populated. This made.finally()-based loading tracking fire too early. Now awaited correctly.Test plan
/<chain>/block/<height>— should show a single loading card, then the populated block data (no empty cards flash)/<chain>— Active Proposals, Application Version, and Node Information sections show titles + loading until data arrives/<chain>/supplyand click pagination — table headers stay visible, loading row appears during fetch/<chain>/params— each section independently shows loading and resolves to dataitems.length === 0)