From 63b51ec9a95d9db5007796758bf73cf2c65a0c59 Mon Sep 17 00:00:00 2001 From: Lincoln Stein Date: Mon, 11 May 2026 00:28:35 -0400 Subject: [PATCH] fix(frontend): suppress slide animation when entering grid view When switching from swiper to grid view, resetAllSlides() prepends a context batch before the target slide and compensates with an animated slideTo, producing an unwanted horizontal scroll right after the grid fades in. Thread an animatePrepend flag through loadBatch so the initial reset uses 0ms duration; runtime back-scrolling still animates. Co-Authored-By: Claude Opus 4.7 (1M context) --- .../frontend/static/javascript/grid-view.js | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/photomap/frontend/static/javascript/grid-view.js b/photomap/frontend/static/javascript/grid-view.js index 240133c..c8890b1 100644 --- a/photomap/frontend/static/javascript/grid-view.js +++ b/photomap/frontend/static/javascript/grid-view.js @@ -364,7 +364,7 @@ class GridViewManager { // add some context slides before and after await this.loadBatch(targetIndex + this.slidesPerBatch, true); if (targetIndex > 0) { - await this.loadBatch(targetIndex - this.slidesPerBatch, false); + await this.loadBatch(targetIndex - this.slidesPerBatch, false, false); } } catch (err) { console.warn(err); @@ -374,7 +374,7 @@ class GridViewManager { this.resetInProgress = false; } - async loadBatch(startIndex = null, append = true) { + async loadBatch(startIndex = null, append = true, animatePrepend = true) { const topLeftIndex = Math.floor(startIndex / this.slidesPerBatch) * this.slidesPerBatch; const placeholderSlides = []; @@ -411,12 +411,14 @@ class GridViewManager { // Use a microtask (Promise) to ensure prepend DOM changes are committed Promise.resolve().then(() => { if (this.swiper && !this.swiper.destroyed) { - // Use default speed (300ms) for smooth animation, but suppress slide change event - this.swiper.slideTo(this.currentColumns, 300, false); - // Reset suppressSlideChange after transition completes - setTimeout(() => { - this.suppressSlideChange = false; - }, 350); // Slightly longer than animation duration + const speed = animatePrepend ? 300 : 0; + this.swiper.slideTo(this.currentColumns, speed, false); + setTimeout( + () => { + this.suppressSlideChange = false; + }, + animatePrepend ? 350 : 0 + ); } }); }