[Feature]: Implement HTMX on Resident Page for Asynchronous Chart Loading

[brylie]

Feature Description

Integrate HTMX into the Resident page to enable asynchronous loading of chart data. The goal is to have the page load immediately with placeholders where charts will be displayed. HTMX will then send a GET request to a backend view for each chart. This view returns the chart's HTML, which is processed asynchronously and loaded into the page as soon as it's ready. This approach will enhance the user experience by providing immediate page feedback and gradually loading complex data.

Motivation

The current Resident page load time is slow due to the synchronous loading of complex chart data. This leads to a suboptimal user experience. By integrating HTMX, we aim to improve page load times, provide immediate feedback to users, and enhance the overall user interface responsiveness. Asynchronous loading of charts will ensure that users are not kept waiting and that they can interact with other page elements while data is being processed.

Possible Implementation

Implement HTMX on the Resident page by adding hx-get attributes to placeholder elements where charts will be displayed. Create dedicated Django views for processing each chart's data. These views will return HTML snippets containing the rendered charts. Use Django channels or background tasks for asynchronous data processing. Ensure that the frontend gracefully handles the asynchronous insertion of these charts into the DOM.

Alternatives Considered

Alternatives such as Ajax calls and client-side JavaScript frameworks were considered. However, HTMX provides a simpler implementation with less JavaScript, aligning well with the current project's technology stack and coding practices.

Additional Context

This feature is part of an ongoing effort to improve the application's performance and user experience. It aligns with our goals to make the application more efficient and user-friendly.