Skip to content

Improve pagination request cancellation and add skeleton loading states#34

Merged
ovation22 merged 1 commit intomainfrom
feature/improve-pagination-and-loading-states
Feb 4, 2026
Merged

Improve pagination request cancellation and add skeleton loading states#34
ovation22 merged 1 commit intomainfrom
feature/improve-pagination-and-loading-states

Conversation

@ovation22
Copy link
Copy Markdown
Owner

Summary

This PR fixes pagination issues and improves loading UX across the application.

Pagination Fix

  • Fixed bug where navigating away from slow-loading pages would display error messages from cancelled requests
  • Implemented proper cancellation token handling to cancel in-flight API requests when users navigate or change filters
  • Cancelled requests no longer update UI state or show error messages

Loading State Improvements

  • Added FluentUI skeleton loading states to all dashboard widgets for better UX
  • Skeletons show animated shimmer effects that match the structure of actual content
  • Prevents layout shift when data loads

Prerender Optimization

  • Disabled prerendering on data-heavy pages to prevent double API calls
  • Home page keeps prerendering for optimal initial load experience

Testing

  • Verified that navigating away from slow requests no longer shows ghost errors
  • Confirmed skeleton states display correctly during widget loading
  • Tested pagination with 8M+ records - no timeout errors on navigation

Fixed an issue where navigating away from slow-loading pages would still
display error messages from cancelled requests. Implemented proper
cancellation token handling in the Horses grid to cancel in-flight API
requests when users navigate to different pages or change filters.

Changes:
- Add cancellation token support to Horses page data loading
- Cancel previous requests when new pagination/filter requests start
- Only show errors for non-cancelled requests
- Prevent cancelled requests from updating UI state

Also added FluentUI skeleton loading states to dashboard widgets for
better UX during initial data loading:
- HorseGenderStats: Shows 2 skeleton items with animated shimmer
- HorseLegTypeStats: Shows 5 skeleton items for each leg type
- HorseColorStats: Shows skeleton grid matching configured layout

Disabled prerendering on data-heavy pages (Horses, Breeding, etc.) to
prevent double API calls during initial render. Home page keeps
prerendering for better initial page load experience.
@github-actions
Copy link
Copy Markdown

github-actions bot commented Feb 4, 2026

Test Results

723 tests  ±0   723 ✅ ±0   6s ⏱️ ±0s
  1 suites ±0     0 💤 ±0 
  1 files   ±0     0 ❌ ±0 

Results for commit 0095000. ± Comparison against base commit 7901eb5.

@ovation22 ovation22 merged commit 9f94096 into main Feb 4, 2026
2 checks passed
@ovation22 ovation22 deleted the feature/improve-pagination-and-loading-states branch February 4, 2026 17:51
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.

1 participant