website icon indicating copy to clipboard operation
website copied to clipboard

Optimize admin page performance with lazy loading and limit sessions query to last 5 classes

Open Copilot opened this issue 5 months ago • 2 comments

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-collapse CSS 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.

Copilot avatar Sep 12 '25 18:09 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

karbassi avatar Sep 12 '25 18:09 karbassi

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

Copilot avatar Sep 12 '25 18:09 Copilot