feat: add TableSkeleton and ErrorState components and apply to list pages#47
Open
YadavAkhileshh wants to merge 1 commit into
Open
feat: add TableSkeleton and ErrorState components and apply to list pages#47YadavAkhileshh wants to merge 1 commit into
YadavAkhileshh wants to merge 1 commit into
Conversation
gkbishnoi07
requested changes
Mar 22, 2026
Collaborator
gkbishnoi07
left a comment
There was a problem hiding this comment.
please resolve your conflicts and add video before/after thanks
Collaborator
|
@YadavAkhileshh are you still working on it? |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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:
Solution
New Components
src/components/custom/loading/TableSkeleton.tsxAnimated placeholder rows that mimic a data table during loading.
Accepts a configurable
rowsprop (default: 5).src/components/custom/error/ErrorState.tsxUser-facing error component built with ShadCN
Alert. Displays a descriptive message with an optional retry button. AcceptsmessageandonRetryprops.Pattern Applied to All 5 Pages
Files Changed
src/components/custom/loading/TableSkeleton.tsx(new)src/components/custom/error/ErrorState.tsx(new)src/pages/organization/offices/Offices.tsxsrc/pages/organization/tellers/Tellers.tsxsrc/pages/centers/Centers.tsxsrc/pages/groups/Groups.tsxsrc/pages/clients/Clients.tsxISSUES.md(updated with workaround annotations)Impact
Testing
npx tsc --noEmitpasses with zero errorssandbox.mifos.communityScreenshots