Add Comprehensive Loading, Error, and Empty States to All Frontend Pages#210
Merged
Conversation
- LoadingFallback: add Skeleton, SkeletonCard, SkeletonProfile, SkeletonList, SkeletonText, EmptyState, ErrorDisplay reusable components - ErrorBoundary: use ErrorDisplay with collapsible details and retry - ProfileHeader: add loading prop rendering SkeletonProfile skeleton - CourseGrid: SkeletonCard loading, ErrorDisplay errors, EmptyState for empty results - CredentialList: EmptyState with Add Credential CTA in compact and full views - AchievementDisplay: EmptyState with clear-filters CTA in compact and full views - ProgressChart/CompletionStats/TimeAnalysis: replace inline pulse skeletons with Skeleton, ErrorDisplay (retry), EmptyState - demo/page.tsx: error banner, loading skeleton, ErrorBoundary wrapper - campus/page.tsx: WebGL detection for unsupported state, skeleton via dynamic import, ErrorDisplay for runtime errors - profile/page.tsx: replace inline Loader2/RefreshCw with SkeletonProfile, ErrorDisplay, EmptyState
- Sanitization middleware : - Strips/encodes script tags, HTML entities, and SQL/NoSQL patterns in backend/src/middleware/sanitizer.ts - Added MAX_STRING_LENGTH enforcement and proper trimming of all string inputs - Database queries : - Verified services like userService.ts , EnrollmentService.ts have no raw string concatenation - All database access follows safe patterns - File uploads : - backend/src/middleware/upload.ts already validates MIME types and file extensions for uploads - All routes protected : - Sanitization and pattern detection middleware are applied globally in index.ts , covering all routes - CSP headers : - Added cspMiddleware and securityHeadersMiddleware in backend/src/middleware/security.ts - Applied globally in index.ts with other security headers - Security tests : - Added security.test.ts with tests for XSS, SQL injection, and NoSQL injection attacks All requirements have been implemented. Closes AetherEdu#134
Files Changed ErrorBoundary.tsx — uses ErrorDisplay with retry + collapsible error details Profile/ProfileHeader.tsx — loading prop renders SkeletonProfile Discovery/CourseGrid.tsx — skeleton loading, error with retry, empty state with clear-filters CTA CredentialList.tsx — EmptyState with "Add Credential" CTA in compact and full views AchievementDisplay.tsx — EmptyState with "Clear filters" CTA in compact and full views Analytics/ProgressChart.tsx — skeleton loading, error retry, empty state Analytics/CompletionStats.tsx — skeleton loading, error retry, empty state Analytics/TimeAnalysis.tsx — skeleton loading, error retry, empty state app/demo/page.tsx — error banner, skeleton loading, ErrorBoundary wrapper app/campus/page.tsx — WebGL detection for unsupported empty state, skeleton via dynamic import, error display app/profile/page.tsx — SkeletonProfile, ErrorDisplay, EmptyState replace inline states Definition of Done Reusable Skeleton component with variants (text, card, list, profile) Reusable EmptyState with icon, message, optional CTA Reusable ErrorDisplay with retry and details toggle Every listed page shows loading, error, and empty states Error states include actionable Try Again buttons Empty states include next-step guidance Loading skeletons match approximate layout (no layout shift) Responsive design maintained across all states Closed AetherEdu#136
Penielka
approved these changes
Jun 29, 2026
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
2 participants
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.
Description
Please include a summary of the changes and which issue is fixed. Please also include relevant motivation and context.
Fixes #31
Type of Change
Please delete options that are not relevant.
Checklist:
Closes Add Comprehensive Loading, Error, and Empty States to All Frontend Pages #136