Skip to content

feat: add Loading component and loading states#675

Open
Ehsan-saradar wants to merge 1 commit into
ping-pub:masterfrom
Ehsan-saradar:feat/add-loading-component
Open

feat: add Loading component and loading states#675
Ehsan-saradar wants to merge 1 commit into
ping-pub:masterfrom
Ehsan-saradar:feat/add-loading-component

Conversation

@Ehsan-saradar
Copy link
Copy Markdown
Contributor

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 optional bg-base-100 card. Props: height, size, text, bordered. Use :bordered=\"false\" to embed inside an existing card that already has its own title and background.
  • Block detail (/<chain>/block/:height): replaces the side-effect-in-computed pattern (where isFutureBlock was triggering fetchBlock) with a proper onMounted lifecycle hook and explicit loading state. Also ensures store.latest is 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.
  • Dashboard (/<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 existing useGovStore().loading['2'] LoadingStatus tracking.
  • IBC Connection detail (/<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.
  • Supply (/<chain>/supply): table headers stay visible, body is replaced with loading row during initial fetch and during page changes.
  • Parameters (/<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 optional loading prop. When set, the card still renders (title visible) and shows the loading component instead of the value grid.
  • Bug fix in useParamsStore.handleGovernanceParams: the Promise.all for voting/deposit/tally params was previously not awaited, so the action resolved before gov.items was populated. This made .finally()-based loading tracking fire too early. Now awaited correctly.

Test plan

  • Hard refresh /<chain>/block/<height> — should show a single loading card, then the populated block data (no empty cards flash)
  • Hard refresh /<chain> — Active Proposals, Application Version, and Node Information sections show titles + loading until data arrives
  • Visit an IBC connection detail page — connection header is visible immediately; IBC Client and Channels sections show loading until data arrives
  • Visit /<chain>/supply and click pagination — table headers stay visible, loading row appears during fetch
  • Visit /<chain>/params — each section independently shows loading and resolves to data
  • Visit a chain with governance excluded — Governance Parameters card finishes loading and stays hidden (since items.length === 0)

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.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant