Skip to content

feat: add skeleton loaders, error boundary, password meter, and session timeout modal#1051

Open
RUKAYAT-CODER wants to merge 12 commits into
DistinctCodes:mainfrom
RUKAYAT-CODER:feat/fe-rukayat-components
Open

feat: add skeleton loaders, error boundary, password meter, and session timeout modal#1051
RUKAYAT-CODER wants to merge 12 commits into
DistinctCodes:mainfrom
RUKAYAT-CODER:feat/fe-rukayat-components

Conversation

@RUKAYAT-CODER
Copy link
Copy Markdown
Contributor

Summary

Implements four frontend components inside rontend/cntr/ as specified in the linked issues.


[FE-07] Skeleton Loader Components

Files: rontend/cntr/Skeletons/ - WorkspaceCardSkeleton.tsx, InvoiceRowSkeleton.tsx, MemberRowSkeleton.tsx, TableRowSkeleton.tsx, Skeletons.test.tsx

  • All use Tailwind �nimate-pulse with grey placeholder blocks matching real component layouts
  • TableRowSkeleton accepts optional cols prop (default 4)
  • Pure presentational - no runtime data props

[FE-09] Global Error Boundary

Files: rontend/cntr/ErrorBoundary/ErrorBoundary.tsx, ErrorBoundary.test.tsx

  • React class component implementing getDerivedStateFromError and componentDidCatch
  • Renders custom allback prop if provided, otherwise default "Something went wrong" UI
  • "Try again" button resets hasError state; errors logged via console.error

[FE-10] Password Strength Meter

Files: rontend/cntr/PasswordStrengthMeter/PasswordStrengthMeter.tsx, PasswordStrengthMeter.test.tsx

  • 4 levels: Weak (red), Fair (orange), Good (yellow), Strong (green)
  • Score based on: length ? 8, uppercase, lowercase, digit, special character - no external libraries
  • Segmented bar + label text; renders nothing for empty password

[FE-14] Session Timeout Warning Modal

Files: rontend/cntr/SessionTimeoutModal/useSessionTimer.ts, SessionTimeoutModal.tsx, SessionTimeoutModal.test.tsx

  • useSessionTimer(expiresAt) - ticks every second, exposes { secondsLeft, showWarning }, clears interval on unmount
  • Modal appears when ? 5 minutes remain; shows MM:SS countdown with �ria-live
  • "Stay signed in" calls onExtend; "Sign out" calls onSignOut

closes #986
closes #988
closes #989
closes #993

@vercel
Copy link
Copy Markdown

vercel Bot commented May 30, 2026

@RUKAYAT-CODER is attempting to deploy a commit to the naijabuz's projects Team on Vercel.

A member of the Team first needs to authorize it.

@drips-wave
Copy link
Copy Markdown

drips-wave Bot commented May 30, 2026

@RUKAYAT-CODER Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

1 participant