Skip to content

feat: add activity list skeleton loading state - #545

Open
ghg001 wants to merge 6 commits into
Axionvera:mainfrom
ghg001:feat/issue-99-add-activity-list-skeleton-loading-state
Open

feat: add activity list skeleton loading state#545
ghg001 wants to merge 6 commits into
Axionvera:mainfrom
ghg001:feat/issue-99-add-activity-list-skeleton-loading-state

Conversation

@ghg001

@ghg001 ghg001 commented Aug 29, 2026

Copy link
Copy Markdown

Overview

This PR adds a skeleton loading state for the activity list that matches the app's visual style. While transaction history is loading, users see neutral placeholder rows instead of a blank area or generic spinner. The skeleton is replaced by real transactions when data arrives, and by the empty state when there are no transactions.

Related Issue

Closes #

Changes

🏗️ Activity Skeleton Loading State

  • [ADD] src/components/ActivitySkeleton.tsx

    • Neutral placeholder rows that mirror the activity list item layout.
    • Uses the app's existing design tokens and colors for a consistent look.
    • Light shimmer animation communicates loading without a generic spinner.
    • Contains only grey placeholder blocks — no fake transaction text or values.
  • [MODIFY] app/(tabs)/history.tsx

    • Renders <ActivitySkeleton /> while the transaction history query is loading.
    • Replaces the skeleton with the transaction list once data loads.
    • Replaces the skeleton with the empty state when there are no transactions.
  • [MODIFY] src/components/index.ts

    • Exports ActivitySkeleton from the shared components barrel for reuse.

Verification Results

npm run lint
✅ All checks pass

Manual acceptance check:
✅ Skeleton visible while activity data is loading
✅ Skeleton matches app style (neutral placeholder content)
✅ Skeleton replaced by transactions after load
✅ Skeleton replaced by empty state when no transactions
✅ No fake transaction data shown
Acceptance Criteria Status
Activity loading state is visible ✅ Skeleton renders immediately during fetch
Loading state matches the app style ✅ Uses existing design tokens and neutral grey blocks
Loading state is replaced by transactions when data loads ✅ Transaction list renders after fetch resolves
Loading state is replaced by empty state when there are no transactions ✅ Empty state renders when transaction list is empty
Loading state does not show fake real transaction data ✅ Placeholder rows contain only neutral blocks

Closes #99

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.

Add activity list skeleton loading state

1 participant