Skip to content

feat: UX states for empty, loading, and error - #31

Merged
aguilar1x merged 2 commits into
ACTA-Team:developfrom
jean1222312432:feat/ux-states-empty-loading-error
Jun 24, 2026
Merged

aguilar1x merged 2 commits into
ACTA-Team:developfrom
jean1222312432:feat/ux-states-empty-loading-error

Conversation

@jean1222312432

@jean1222312432 jean1222312432 commented Jun 24, 2026

Copy link
Copy Markdown
Contributor

Summary

  • Add shared Skeleton and StatePanel components to @acta-products/ui.
  • Replace spinner loading with skeleton placeholders in credential list and detail views.
  • Show connect-wallet CTA when vault is empty and no session exists.
  • Wire error states through StatePanel with retry actions and i18n copy (en/es).

Closes #18

Summary by CodeRabbit

  • New Features

    • Added shared loading placeholders and empty-state panels across credentials screens.
    • Improved the “no credentials” experience with wallet-connect guidance when no session is active.
  • Bug Fixes

    • Updated loading and empty/error views to provide clearer, more consistent feedback.
    • Added accessible status regions for loading content.
  • Documentation

    • Expanded user-facing copy in English and Spanish for the updated empty state.

Extract shared Skeleton and StatePanel components to @acta-products/ui. Replace spinner loading with skeleton placeholders in list and detail views. Show a connect-wallet CTA when the vault is empty and no session exists. Wire error states through StatePanel with retry actions and i18n copy.
@vercel

vercel Bot commented Jun 24, 2026

Copy link
Copy Markdown

@jean1222312432 is attempting to deploy a commit to the ACTA Team on Vercel.

A member of the Team first needs to authorize it.

@coderabbitai

coderabbitai Bot commented Jun 24, 2026

Copy link
Copy Markdown

Review Change Stack

Warning

Review limit reached

@jean1222312432, we couldn't start this review because you've reached your PR review rate limit.

More reviews will be available in 48 minutes and 29 seconds. Learn how PR review limits work.

Your organization has used up its prepaid credits, and credit purchases are no longer available. Enable the review add-on in the billing tab to keep reviews running — you're only billed for reviews past your plan's rate limits ($0.25/file).

⌛ How to resolve this issue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based credits.

🚦 How do rate limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please see our Fair Usage Limits Policy for further information.

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 252d852e-a3ea-4dde-bfeb-e5f4ee142b99

📥 Commits

Reviewing files that changed from the base of the PR and between 4f105d6 and e798d64.

📒 Files selected for processing (1)
  • packages/acta/src/mock.ts
📝 Walkthrough

Walkthrough

Credential history views now use shared Skeleton and StatePanel components for loading, empty, and not-found states. The list view adds session-aware connect-wallet copy, and the UI package exports the new shared primitives.

Changes

Credential history state UI

Layer / File(s) Summary
Shared state primitives
packages/ui/src/components/skeleton.tsx, packages/ui/src/components/state-panel.tsx, packages/ui/src/index.ts
Adds Skeleton and StatePanel to the UI package and re-exports both from the package index.
Credential detail states
apps/credit-history/src/components/credentials/credential-detail-view.tsx
Renders loading as a skeleton card inside a status region and switches the not-found view to StatePanel.
Credential list states
apps/credit-history/src/components/credentials/credentials-view.tsx, apps/credit-history/src/i18n/messages/en.json, apps/credit-history/src/i18n/messages/es.json
Renders the list loading state as skeletons, adds a session-aware empty state with a connect action, and updates the matching translation strings.

Possibly related issues

Possibly related PRs

  • ACTA-Team/products-acta#29: Updates the same credential list view that this PR now refines with skeleton and session-aware empty states.
  • ACTA-Team/products-acta#30: Introduces the credential detail state flow that this PR updates to use shared loading and not-found UI.
  • ACTA-Team/products-acta#28: Adds the session/wallet connection context consumed by the new empty-state connect action.

Suggested reviewers

  • JosueBrenes
  • aguilar1x

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Poem

A rabbit hopped through loading gray,
then found a panel bright and kind today.
With skeleton leaves and wallet light,
the empty burrow feels just right.
🐇✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 16.67% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Linked Issues check ✅ Passed The PR aligns with #18: shared UI, skeleton loading, empty-state wallet CTA, and i18n-backed states are present.
Out of Scope Changes check ✅ Passed No unrelated changes are evident; the edits support the requested UX-state and shared-component work.
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title clearly summarizes the main UX-state changes across empty, loading, and error views.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@jean1222312432 jean1222312432 changed the title feat(credit-history): UX states for empty, loading, and error feat: UX states for empty, loading, and error Jun 24, 2026

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick comments (2)
apps/credit-history/src/components/credentials/credentials-view.tsx (1)

130-139: 🚀 Performance & Scalability | 🔵 Trivial | ⚡ Quick win

Consider reflecting the connecting state on the CTA.

connect() runs an async flow (simulated ~800ms latency) but the button has no pending/disabled treatment, so the user can fire multiple overlapping connect() calls and gets no feedback while it resolves. Failures are only sent to console.error, leaving the UI silent. Since useSession() already exposes a 'connecting' status, you can disable the button and swap the label.

♻️ Possible adjustment
                 <Button
                   size="sm"
                   className="cursor-pointer gap-1.5"
-                  onClick={() => connect().catch(console.error)}
+                  disabled={sessionStatus === 'connecting'}
+                  onClick={() => connect().catch(console.error)}
                 >
                   <Wallet className="size-3.5" />
-                  {tSession('connect')}
+                  {sessionStatus === 'connecting' ? tSession('connecting') : tSession('connect')}
                 </Button>
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@apps/credit-history/src/components/credentials/credentials-view.tsx` around
lines 130 - 139, The CTA in CredentialsView should reflect the async connect
flow so users can’t trigger overlapping calls and get no feedback while it
resolves. Update the Button that calls connect() to use the useSession() status,
disabling it when status is 'connecting' and swapping the label to a
connecting/pending state. Also handle the connect() promise failure in the same
place so the UI can surface or route the error instead of only relying on
console.error.
apps/credit-history/src/i18n/messages/en.json (1)

60-61: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

Duplicate copy across namespaces.

credentials.empty.connectDescription is identical to the existing session.connectCta ("Connect your Stellar wallet to access your credentials."). Not a defect, but consider reusing one key to avoid drift between the two strings over time.

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@apps/credit-history/src/i18n/messages/en.json` around lines 60 - 61, The
duplicate wallet copy in the i18n messages should be consolidated so
`credentials.empty.connectDescription` does not repeat the same string as
`session.connectCta`. Update the message definitions in the JSON namespace to
reuse a single source of truth, and adjust the relevant consumers so they
reference the shared key instead of maintaining two identical translations.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@apps/credit-history/src/components/credentials/credentials-view.tsx`:
- Around line 130-139: The CTA in CredentialsView should reflect the async
connect flow so users can’t trigger overlapping calls and get no feedback while
it resolves. Update the Button that calls connect() to use the useSession()
status, disabling it when status is 'connecting' and swapping the label to a
connecting/pending state. Also handle the connect() promise failure in the same
place so the UI can surface or route the error instead of only relying on
console.error.

In `@apps/credit-history/src/i18n/messages/en.json`:
- Around line 60-61: The duplicate wallet copy in the i18n messages should be
consolidated so `credentials.empty.connectDescription` does not repeat the same
string as `session.connectCta`. Update the message definitions in the JSON
namespace to reuse a single source of truth, and adjust the relevant consumers
so they reference the shared key instead of maintaining two identical
translations.

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 394be4a7-a72e-47d9-b85a-59f756d04ec8

📥 Commits

Reviewing files that changed from the base of the PR and between 775d2d4 and 4f105d6.

📒 Files selected for processing (7)
  • apps/credit-history/src/components/credentials/credential-detail-view.tsx
  • apps/credit-history/src/components/credentials/credentials-view.tsx
  • apps/credit-history/src/i18n/messages/en.json
  • apps/credit-history/src/i18n/messages/es.json
  • packages/ui/src/components/skeleton.tsx
  • packages/ui/src/components/state-panel.tsx
  • packages/ui/src/index.ts

…ining

The bare NEXT_PUBLIC_MOCK_MODE global was never replaced in transpiled workspace packages, so mock modes always fell back to normal.
@aguilar1x
aguilar1x merged commit c238e47 into ACTA-Team:develop Jun 24, 2026
3 of 4 checks passed
@grantfox-oss grantfox-oss Bot mentioned this pull request Jun 24, 2026
9 tasks
@coderabbitai coderabbitai Bot mentioned this pull request Jun 26, 2026
8 tasks
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.

UX states: empty, loading, and error

2 participants