Optimize admin page performance with lazy loading and limit sessions query to last 5 classes
This PR optimizes the admin page load times by limiting the database query to retrieve only the last 5 sessions initially, and adds on-demand loading functionality to view additional sessions up to the last 365 days.
Problem
The admin page was retrieving ALL sessions from the database and using client-side CSS collapse to hide sessions beyond the first 5. This approach:
- Loaded unnecessary data from the database
- Consumed more memory
- Resulted in slower page load times, especially with large datasets
- Added complexity with collapse/expand UI logic
Solution
Modified the sessions queryset to use database-level limiting with [:5] slice and added AJAX-based "Load More" functionality:
Before:
sessions = (
Session.objects.select_related()
.annotate(...)
.order_by("-start_date") # Retrieves ALL sessions
)
After:
sessions = (
Session.objects.select_related()
.annotate(...)
.order_by("-start_date")[:5] # Retrieves only last 5 sessions
)
New Load More Functionality:
- Added
/admin/load-more-sessions/AJAX endpoint that loads 10 sessions at a time - Sessions are limited to the last 365 days to prevent loading extremely old data
- "Load More Classes" button appears when additional sessions are available
- Additional sessions are fetched only when requested, maintaining performance
Also cleaned up the template by removing the now-unnecessary collapse functionality:
- Removed
session-collapseCSS classes from table rows - Removed the Show/Hide toggle button
- Simplified template logic
- Added conditional "Load More" button with loading indicators
Benefits
- ✅ Faster database queries - Limited to 5 sessions on initial load
- ✅ Reduced memory usage - Only loads necessary data initially
- ✅ Improved page load times - Especially noticeable with large datasets
- ✅ Cleaner template code - Removed conditional collapse logic
- ✅ Better scalability - Performance remains constant as data grows
- ✅ On-demand data loading - View more sessions without impacting initial load
- ✅ 365-day data limit - Prevents loading extremely old sessions
User Experience
Admins see the last 5 classes on initial page load for optimal performance. When more sessions are available within the last 365 days, a "Load More Classes" button allows viewing additional sessions without page reload. The optimization maintains fast initial load times while providing access to historical data when needed.
Testing
Added comprehensive test suite in test_admin_load_more_sessions.py covering:
- Staff user access control
- Authentication requirements
- Pagination functionality
- AJAX response format validation
Fixes #877.
💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.
I still want a way to view more classes, up to all the classes in the last 365 days, but I don’t want them initially fetched on page load.
@copilot
I still want a way to view more classes, up to all the classes in the last 365 days, but I don’t want them initially fetched on page load.
@copilot
I've implemented a "Load More Classes" button that allows viewing additional sessions up to all classes from the last 365 days without initially fetching them on page load.
Implementation details:
- Added
/admin/load-more-sessions/AJAX endpoint that loads 10 sessions at a time - Sessions are limited to the last 365 days as requested
- "Load More Classes" button appears below the initial 5 sessions
- Additional sessions are fetched only when the button is clicked
- Shows "Loading..." indicator during requests
- Button is hidden when all sessions are loaded, showing a message instead
The performance optimization is maintained - only the initial 5 sessions are loaded on page load, with additional sessions fetched on demand. This provides the best of both worlds: fast initial load times and the ability to view more historical data when needed.
Commit: 6699198