Skip to content

Closes issue 68: add skeleton loader components, fix tailwindcss parsing issue by adding postcss config, closes issue 68 - #90

Merged
jobbykings merged 1 commit into
Epondia:mainfrom
Padom2020:feat/68-loading-skeletons
Jun 22, 2026
Merged

Closes issue 68: add skeleton loader components, fix tailwindcss parsing issue by adding postcss config, closes issue 68#90
jobbykings merged 1 commit into
Epondia:mainfrom
Padom2020:feat/68-loading-skeletons

Conversation

@Padom2020

Copy link
Copy Markdown
Contributor

feat(frontend): add skeleton loaders for all data-fetching components

Closes #68

What changed

New skeleton components

  • QuizPlayerSkeleton — matches the QuizPlayer card, header, answer options, and pagination dot layout
  • ProgressDashboardSkeleton, CompletionStatsSkeleton, ProgressChartSkeleton, TimeAnalysisSkeleton — cover all Analytics routes

Extended Skeleton.tsx primitives

  • useSkeletonVisibility(isLoading, minDuration?) hook — enforces a 300ms minimum display time to prevent flash-of-loading on fast connections
  • New composable primitives: SkeletonButton, SkeletonInput, SkeletonBadge, SkeletonStatTile, SkeletonQuizPlayer, SkeletonRoomCard
  • SkeletonError — distinct error state (red-tinted card + retry button) to differentiate from loading state
  • Exported SkeletonRegionProps type

Wired up in consuming components

  • ProgressDashboard — replaced spinner div with ProgressDashboardSkeleton
  • CourseCardSkeleton — replaced manual role="status" div with SkeletonRegion; removed redundant sr-only span (now handled by the region)

Bug fixes

  • Added postcss.config.js — Tailwind CSS was not being parsed due to missing PostCSS config
  • Fixed import path casing: analytics/ProgressDashboardAnalytics/ProgressDashboard

Definition of done coverage

Requirement Status
Skeleton for every async-fetching route
Skeleton shapes match content layout
Pulse animation consistent across all skeletons ✅ (shared Skeleton base)
Minimum 300ms display to avoid flash ✅ (useSkeletonVisibility)
Error state distinct from loading state ✅ (SkeletonError)
Lighthouse CLS < 0.1

…ng issue by adding postcss config, closes issue 68
@jobbykings
jobbykings merged commit 43fb486 into Epondia:main Jun 22, 2026
5 checks passed
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.

Add loading skeletons for all data-fetching components

2 participants