PR #298: User Page & Recent Activity Refactor — Layout Fixes, Locale Routing & Performance Improvements

Hello community and fellow developers,

Continuing my daily contribution series to the Next.js Steemit Wallet, I'm excited to share PR #298, now open and with all tests passing:
🔗 https://github.com/steemit/wallet/pull/298

This PR focuses on polishing the user-facing experience: fixing layout inconsistencies, improving locale-aware routing, and optimizing the rendering performance of the recent activity feed. The result is a more accessible, reliable, and visually consistent profile experience across devices and languages.

---

🔧 Key Changes in PR #298

1. User Profile Page Refactor (src/app/[locale]/[username]/page.tsx)

• Locale-aware routing: Updated dynamic route handling to properly resolve [locale] and [username] params, preventing 404s on non-default language profiles.
• Username normalization: Added sanitization and case-insensitive lookup logic to ensure consistent profile resolution regardless of input format.
• Layout stability: Fixed hydration mismatches and CSS layout shifts by deferring non-critical renders and using useSyncExternalStore for user data subscription.
• Error boundaries: Wrapped profile sections with granular error boundaries to isolate failures (e.g., activity feed errors no longer break the entire page).

2. Recent Activity Component Optimization (src/components/wallet/recent-activity.tsx)

• Simplified rendering logic: Removed redundant useMemo/useCallback wrappers; leveraged server-normalized SteemHistoryItem[] from PR #290 to reduce client-side computation.
• Accessibility improvements:
  • Added proper aria-label and role="list" to activity containers.
  • Ensured all interactive elements have visible focus states and keyboard navigation support.
• Performance tweaks:
  • Virtualized long activity lists using react-window (opt-in via feature flag).
  • Debounced scroll listeners for infinite scroll to reduce main-thread pressure.
• Styling consistency: Unified spacing, typography, and icon sizing with the wallet's design system; removed legacy inline styles.

3. Display Bug Fixes

• Fixed truncated operation descriptions on mobile viewports.
• Resolved overlapping elements in reward history cards when amounts exceed 6 digits.
• Corrected timestamp formatting edge cases for locales with non-Gregorian calendars.

4. Test Coverage & Dev Experience

• Added integration tests for locale + username route resolution.
• Snapshot tests updated for refactored activity component.
• Storybook stories added for RecentActivity variants (empty, loading, error, populated).
• Deprecated legacy formatActivityItem() helper; migration notes in JSDoc.

---

No breaking changes—existing imports continue to work. New utilities are opt-in for cleaner code.

---

✅ Testing & Validation

• [x] All unit/integration tests pass (Jest + React Testing Library)
• [x] Locale routing validated across en, es, fr, zh configurations
• [x] Username edge cases tested: uppercase, special chars, unicode, empty strings
• [x] Activity component rendering verified on mobile, tablet, desktop viewports
• [x] Accessibility audit passed (axe-core + manual screen reader testing)
• [x] Zero visual regressions in profile/activity snapshots

---

Contribution Series Recap

This PR continues the focused series of stability, UX, and performance improvements to the Steemit Wallet:

PR	Status	Focus
PR #298	🟡 Open	User page refactor, locale routing, activity component optimization
PR #290	✅ Merged	Server-side history filtering, pagination, hook refactor
PR #285	🟡 Open	RPC node failover system + accessibility fixes
PR #282	✅ Merged	Redux DevTools credential masking
PR #274	✅ Merged	SSR Redux store isolation fix

Every contribution is designed to harden the wallet's foundation while keeping the developer experience smooth and the user experience fast.

---

Support Secure Steem Development

If you value proactive engineering, UX polish, and performance optimizations for the STEEM ecosystem, please consider supporting my witness: blaze.apps

🗳️ Vote Here:
Vote for blaze.apps Witness

---

Building performant, accessible tooling for the Steem ecosystem*
PR #298: https://github.com/steemit/wallet/pull/298
Previous Post: https://steemit.com/steem-dev/@blaze.apps/pr-290-merged-server-side-history-filtering-and-pagination-now-live-in-steemit-wallet-next-js