Only load graphs when they come into view

templates/dashboard.html

@@ -130,8 +130,12 @@
             <div class="overflow-x-auto rounded-lg">
                 <div class="align-middle inline-block min-w-full">
                     <div class="shadow overflow-hidden sm:rounded-lg">
-                        <div class="w-full mt-2 pb-2 aspect-video">
+                        <div class="w-full mt-2 pb-2 aspect-video"
-                            {{ render_partial('partials/sparkline.html', **exercise.graph) }}
+                            hx-get="{{ url_for('get_exercise_progress_for_user', person_id=person.id, exercise_id=exercise.id, min_date=min_date, max_date=max_date) }}"
+                            hx-trigger="intersect once" hx-swap="outerHTML">
+                            <div class="flex items-center justify-center h-full bg-gray-50 rounded-lg">
+                                <div class="text-sm text-gray-400 animate-pulse font-medium">Loading graph...</div>
+                            </div>
                         </div>
 
                         <table class="min-w-full divide-y divide-gray-200">

templates/person_overview.html

@@ -105,7 +105,13 @@
 
         <div class="mt-4 mb-4 w-full grid grid-cols-1 2xl:grid-cols-2 gap-4">
             {% for graph in exercise_progress_graphs %}
-            {{ render_partial('partials/sparkline.html', **graph.progress_graph) }}
+            <div hx-get="{{ url_for('get_exercise_progress_for_user', person_id=person_id, exercise_id=graph.exercise_id, min_date=min_date, max_date=max_date) }}"
+                hx-trigger="intersect once" hx-swap="outerHTML">
+                <div class="flex items-center justify-center h-48 bg-gray-50 rounded-lg">
+                    <div class="text-sm text-gray-400 animate-pulse font-medium">Loading {{ graph.exercise_name }}...
+                    </div>
+                </div>
+            </div>
             {% endfor %}
         </div>