Fix slideshow stalling — replace transitionend with setTimeout for preload

transitionend is unreliable: if the Pi's display sleeps or a transition
is interrupted, the event never fires and the next slot's src is never
set. advanceSlide then waits forever on an onload that can't fire.
Replace with a 1600ms setTimeout (just past the 1.5s CSS transition)
which always fires. Also add a guard to kick-start the src if it's
blank when advanceSlide runs.

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

static/js/app.js

@@ -328,15 +328,21 @@ function advanceSlide() {
         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
+        // Wait for the fade-out transition to finish before preloading the next src.
-        // causes the new image to appear at partial opacity (the flash the user sees)
+        // transitionend is unreliable (can be skipped if display sleeps), so use
-        current.addEventListener('transitionend', () => { current.src = preloadSrc; }, { once: true });
+        // a plain timeout just past the 1.5s CSS transition as the trigger.
+        setTimeout(() => { current.src = preloadSrc; }, 1600);
     };
 
-    // If the preloaded image is ready, swap immediately; otherwise wait for it
+    // If the preloaded image is ready, swap immediately; otherwise wait for it.
+    // Guard against a stuck onload by also setting src explicitly if needed.
     if (next.complete && next.naturalWidth > 0) {
         doSwap();
     } else {
+        if (!next.src || next.src === window.location.href) {
+            // src was never set (stalled state) — kick it off now
+            next.src = photos[(slideIndex + 1) % photos.length];
+        }
         next.onload = doSwap;
     }
 }