Simplify slideshow: load-on-demand, no preloading; add JS cache-busting

advanceSlide now sets src and waits for onload on the next slot directly —
no preloading, no transitionend, no setTimeout. Local files load in
milliseconds so preloading is unnecessary complexity that was causing
the slideshow to stall.

Also adds ?v=<mtime> cache-busting to the app.js script tag so Chromium
always picks up new JS after a deploy.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

app.py

@@ -20,8 +20,9 @@ joke_cache = {'data': None, 'timestamp': None}
 
 @app.route('/')
 def index():
-    """Render the main display page."""
-    return render_template('index.html')
+    js_path = os.path.join(app.static_folder, 'js', 'app.js')
+    cache_bust = int(os.path.getmtime(js_path))
+    return render_template('index.html', cache_bust=cache_bust)
 
 
 @app.route('/api/weather')

static/js/app.js

@@ -276,10 +276,6 @@ async function showSlideshow() {
     activeSlot = 'a';
 
     loadSlide('a', photos[slideIndex]);
-    if (photos.length > 1) {
-        loadSlide('b', photos[(slideIndex + 1) % photos.length]);
-    }
-
     slideTimer = setInterval(advanceSlide, SLIDE_DURATION);
 }
 
@@ -291,52 +287,38 @@ function hideSlideshow() {
     const overlay = document.getElementById('slideshow-overlay');
     overlay.classList.add('hidden');
 
-    // Clear images to free memory
-    document.getElementById('slide-a').classList.remove('active');
-    document.getElementById('slide-b').classList.remove('active');
-    document.getElementById('slide-a').src = '';
-    document.getElementById('slide-b').src = '';
+    const a = document.getElementById('slide-a');
+    const b = document.getElementById('slide-b');
+    a.onload = null; b.onload = null;
+    a.classList.remove('active'); b.classList.remove('active');
+    a.removeAttribute('src'); b.removeAttribute('src');
 
     resetInactivityTimer();
 }
 
 function loadSlide(slot, url) {
     const img = document.getElementById(`slide-${slot}`);
-    if (slot === activeSlot) {
-        // Only fade in once the image is fully decoded — no blank-then-flash
-        img.onload = () => { img.onload = null; img.classList.add('active'); };
-        img.src = url;
-        // Handle cached images that won't fire onload
-        if (img.complete && img.naturalWidth > 0) {
-            img.onload = null;
-            img.classList.add('active');
-        }
-    } else {
-        img.src = url; // preload only
-    }
+    const show = () => { img.onload = null; img.classList.add('active'); };
+    img.onload = show;
+    img.src = url;
+    if (img.complete && img.naturalWidth > 0) show();
 }
 
 function advanceSlide() {
     const nextSlot = activeSlot === 'a' ? 'b' : 'a';
-    const current  = document.getElementById(`slide-${activeSlot}`);
-    const next     = document.getElementById(`slide-${nextSlot}`);
+    const current = document.getElementById(`slide-${activeSlot}`);
+    const next    = document.getElementById(`slide-${nextSlot}`);
 
-    const doSwap = () => {
+    slideIndex = (slideIndex + 1) % photos.length;
+
+    const swap = () => {
         next.onload = null;
         next.classList.add('active');
         current.classList.remove('active');
         activeSlot = nextSlot;
-        slideIndex = (slideIndex + 1) % photos.length;
-        const preloadSrc = photos[(slideIndex + 1) % photos.length];
-        // Only change src after the fade-out completes — changing it mid-transition
-        // causes the new image to appear at partial opacity (the flash the user sees)
-        current.addEventListener('transitionend', () => { current.src = preloadSrc; }, { once: true });
     };
 
-    // If the preloaded image is ready, swap immediately; otherwise wait for it
-    if (next.complete && next.naturalWidth > 0) {
-        doSwap();
-    } else {
-        next.onload = doSwap;
-    }
+    next.onload = swap;
+    next.src = photos[slideIndex];
+    if (next.complete && next.naturalWidth > 0) swap();
 }

templates/index.html

@@ -32,6 +32,6 @@
         <div class="slideshow-hint">Touch to return to calendar</div>
     </div>
 
-    <script src="{{ url_for('static', filename='js/app.js') }}"></script>
+    <script src="{{ url_for('static', filename='js/app.js') }}?v={{ cache_bust }}"></script>
 </body>
 </html>