Skip to content

feat: add TableSkeleton and ErrorState components and apply to list pages#47

Open
YadavAkhileshh wants to merge 1 commit into
openMF:devfrom
YadavAkhileshh:feat/loading-skeleton-error-state
Open

feat: add TableSkeleton and ErrorState components and apply to list pages#47
YadavAkhileshh wants to merge 1 commit into
openMF:devfrom
YadavAkhileshh:feat/loading-skeleton-error-state

Conversation

@YadavAkhileshh
Copy link
Copy Markdown
Contributor

Summary

Introduces two reusable UI components and applies them across five core list pages to replace blank white screens during loading and silent error swallowing with proper user feedback.

Problem

All list pages currently show a blank white screen while API data is fetching, and silently log errors to the console on failure with
no user-facing message. This is one of the most noticeable gaps compared to the Angular reference app.

Affected pages:

  • Offices
  • Tellers
  • Centers
  • Groups
  • Clients

Solution

New Components

src/components/custom/loading/TableSkeleton.tsx
Animated placeholder rows that mimic a data table during loading.
Accepts a configurable rows prop (default: 5).

src/components/custom/error/ErrorState.tsx
User-facing error component built with ShadCN Alert. Displays a descriptive message with an optional retry button. Accepts
message and onRetry props.

Pattern Applied to All 5 Pages

if (isLoading)  <TableSkeleton />
if (error)      <ErrorState message="..." onRetry={...} />
else            render data table

Files Changed

  • src/components/custom/loading/TableSkeleton.tsx (new)
  • src/components/custom/error/ErrorState.tsx (new)
  • src/pages/organization/offices/Offices.tsx
  • src/pages/organization/tellers/Tellers.tsx
  • src/pages/centers/Centers.tsx
  • src/pages/groups/Groups.tsx
  • src/pages/clients/Clients.tsx
  • ISSUES.md (updated with workaround annotations)

Impact

  • Improves UX with skeleton loading states instead of blank screens
  • Gives users actionable feedback on API failures with retry option
  • Establishes a reusable pattern for all remaining pages
  • Components are generic and extendable for other layouts

Testing

  • npx tsc --noEmit passes with zero errors
  • Loading states verified by throttling network in Chrome DevTools
  • Error states verified by pointing to an invalid API endpoint
  • Tested across all 5 pages on sandbox.mifos.community

Screenshots

State Before After
Loading Blank white screen Animated skeleton rows
Error Silent / blank Error alert with retry button
Success Data renders Data renders (unchanged)

Copy link
Copy Markdown
Collaborator

@gkbishnoi07 gkbishnoi07 left a comment

Choose a reason for hiding this comment

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

please resolve your conflicts and add video before/after thanks

@gkbishnoi07
Copy link
Copy Markdown
Collaborator

@YadavAkhileshh are you still working on it?

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.

2 participants