peterstockings/workout
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Preload csss & js, add skeleton graphs for loading

Browse Source
This commit is contained in:
Peter Stockings
2026-02-04 09:53:35 +11:00
parent 71a5ae590e
commit 3fabde145d
4 changed files with 24 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
templates/base.html
View File

@@ -8,6 +8,10 @@
<title>Workout Tracker</title>
<link rel="icon" type="image/png" href="{{ url_for('static', filename='img/logo.png') }}">
<!-- Resource Preloads -->
<link rel="preload" href="/static/css/tailwind.css" as="style">
<link rel="preload" href="/static/js/htmx.min.js" as="script">
<link href="/static/css/tailwind.css" rel="stylesheet">
<link href="/static/css/style.css" rel="stylesheet">

4
templates/dashboard.html
View File

@@ -133,9 +133,7 @@
<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>
{{ render_partial('partials/skeleton_graph.html') }}
</div>
<table class="min-w-full divide-y divide-gray-200">

17
templates/partials/skeleton_graph.html Normal file
View File

@@ -0,0 +1,17 @@
<div class="w-full h-full bg-gray-100 rounded-lg animate-pulse relative overflow-hidden">
<!-- Subtle shimmer effect -->
<div
class="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent -translate-x-full animate-[shimmer_2s_infinite]">
</div>
<div class="flex items-center justify-center h-full">
<div class="text-xs text-gray-400 font-medium">Loading...</div>
</div>
</div>
<style>
@keyframes shimmer {
100% {
transform: translateX(100%);
}
}
</style>

5
templates/person_overview.html
View File

@@ -107,9 +107,8 @@
{% for graph in exercise_progress_graphs %}
<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 class="h-48">
{{ render_partial('partials/skeleton_graph.html') }}
</div>
</div>
{% endfor %}