Only load graphs when they come into view
This commit is contained in:
@@ -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">
|
||||
{{ render_partial('partials/sparkline.html', **exercise.graph) }}
|
||||
<div class="w-full mt-2 pb-2 aspect-video"
|
||||
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">
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user