perf: cache home stats + ratings, fix discover card pop animation
All checks were successful
Release / Test backend (push) Successful in 39s
Release / Check ui (push) Successful in 48s
Release / Docker / caddy (push) Successful in 48s
Release / Docker / runner (push) Successful in 2m48s
Release / Docker / backend (push) Successful in 2m52s
Release / Docker / ui (push) Successful in 2m4s
Release / Gitea Release (push) Successful in 21s
All checks were successful
Release / Test backend (push) Successful in 39s
Release / Check ui (push) Successful in 48s
Release / Docker / caddy (push) Successful in 48s
Release / Docker / runner (push) Successful in 2m48s
Release / Docker / backend (push) Successful in 2m52s
Release / Docker / ui (push) Successful in 2m4s
Release / Gitea Release (push) Successful in 21s
Cache home stats (10 min) and recently added books (5 min) to avoid hitting PocketBase on every homepage load. Cache all ratings for discovery ranking (5 min) with invalidation on setBookRating. invalidateBooksCache now clears all related keys atomically. Fix discover card pop-to-full-size bug: new card now transitions from scale(0.95) to scale(1.0) matching its back-card position, instead of snapping to full size instantly after each swipe. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -130,7 +130,43 @@
|
||||
|
||||
let cardEl = $state<HTMLDivElement | null>(null);
|
||||
|
||||
// ── Card entry animation (prevents pop-to-full-size after swipe) ─────────────
|
||||
let cardEntering = $state(false);
|
||||
let entryTransition = $state(false);
|
||||
let entryCleanup: ReturnType<typeof setTimeout> | null = null;
|
||||
|
||||
function startEntryAnimation() {
|
||||
if (entryCleanup) clearTimeout(entryCleanup);
|
||||
cardEntering = true;
|
||||
entryTransition = true;
|
||||
requestAnimationFrame(() => {
|
||||
cardEntering = false;
|
||||
entryCleanup = setTimeout(() => { entryTransition = false; }, 400);
|
||||
});
|
||||
}
|
||||
|
||||
function cancelEntryAnimation() {
|
||||
if (entryCleanup) { clearTimeout(entryCleanup); entryCleanup = null; }
|
||||
cardEntering = false;
|
||||
entryTransition = false;
|
||||
}
|
||||
|
||||
const activeTransform = $derived(
|
||||
cardEntering
|
||||
? 'scale(0.95) translateY(13px)'
|
||||
: `translateX(${offsetX}px) translateY(${offsetY}px) rotate(${rotation}deg)`
|
||||
);
|
||||
|
||||
const activeTransition = $derived(
|
||||
isDragging
|
||||
? 'none'
|
||||
: (transitioning || entryTransition)
|
||||
? 'transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275)'
|
||||
: 'none'
|
||||
);
|
||||
|
||||
function onPointerDown(e: PointerEvent) {
|
||||
cancelEntryAnimation();
|
||||
if (animating || !currentBook) return;
|
||||
(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
|
||||
startX = e.clientX;
|
||||
@@ -216,6 +252,8 @@
|
||||
|
||||
if (action === 'read_now') {
|
||||
goto(`/books/${book.slug}`);
|
||||
} else {
|
||||
startEntryAnimation();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -493,8 +531,8 @@
|
||||
bind:this={cardEl}
|
||||
class="absolute inset-0 rounded-2xl overflow-hidden shadow-2xl cursor-grab active:cursor-grabbing z-10"
|
||||
style="
|
||||
transform: translateX({offsetX}px) translateY({offsetY}px) rotate({rotation}deg);
|
||||
transition: {(transitioning && !isDragging) ? 'transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275)' : 'none'};
|
||||
transform: {activeTransform};
|
||||
transition: {activeTransition};
|
||||
touch-action: none;
|
||||
"
|
||||
onpointerdown={onPointerDown}
|
||||
|
||||
Reference in New Issue
Block a user