WIP: Web app transitions

web/src/app/Prefs.js

@@ -6,6 +6,19 @@ export const THEME = {
   SYSTEM: "system",
 };
 
+// Key under which the theme preference is mirrored to localStorage. The inline script in
+// index.html reads it synchronously to pick the splash background before first paint.
+export const THEME_LOCALSTORAGE_KEY = "theme";
+
+const mirrorThemeToLocalStorage = (value) => {
+  try {
+    localStorage.setItem(THEME_LOCALSTORAGE_KEY, value);
+  } catch (e) {
+    // localStorage may be unavailable (private mode, disabled cookies); the splash just falls
+    // back to the system color scheme in that case.
+  }
+};
+
 class Prefs {
   constructor(dbImpl) {
     this.db = dbImpl;
@@ -49,11 +62,17 @@ class Prefs {
 
   async theme() {
     const theme = await this.db.prefs.get("theme");
-    return theme?.value ?? THEME.SYSTEM;
+    const value = theme?.value ?? THEME.SYSTEM;
+    // Mirror to localStorage so the inline script in index.html can pick the splash background
+    // synchronously before first paint. Self-heals for users who set their theme before the
+    // mirror existed.
+    mirrorThemeToLocalStorage(value);
+    return value;
   }
 
   async setTheme(mode) {
     await this.db.prefs.put({ key: "theme", value: mode });
+    mirrorThemeToLocalStorage(mode);
   }
 }
 

web/src/app/splash.js

@@ -0,0 +1,64 @@
+// Fades out and removes the static splash screen baked into index.html (see web/index.html).
+// The splash paints before the JS bundle loads to avoid the white flash + spinner flicker on
+// first load; the app calls this once it has mounted and the initial data is ready. Idempotent --
+// safe to call from multiple routes/effects.
+
+// Keep the splash up for at least this long so it doesn't flash-and-vanish on fast (warm-cache)
+// loads -- the logo gets a beat to be seen (and to pulse) before fading out.
+const MIN_VISIBLE_MS = 1000;
+
+// Hide in two phases: first fade the (pulsing) logo all the way out, then fade the background away
+// to reveal -- "fade in" -- the app underneath. APP_FADE_MS must match the #splash opacity
+// transition in index.html.
+const LOGO_FADE_MS = 300;
+const APP_FADE_MS = 100;
+
+let removed = false;
+
+const fadeOutAndRemove = () => {
+  const splash = document.getElementById("splash");
+  if (!splash) {
+    return;
+  }
+
+  // Phase 1: fade the logo out completely. Freeze the pulse at its current opacity first, then
+  // transition to 0 -- otherwise stopping the animation would snap the logo to full opacity.
+  const img = splash.querySelector("img");
+  if (img) {
+    const current = getComputedStyle(img).opacity;
+    img.style.opacity = current;
+    img.style.animation = "none";
+    img.getBoundingClientRect(); // force reflow so the fade starts from `current`, not the snapped value
+    img.style.transition = `opacity ${LOGO_FADE_MS}ms ease-out`;
+    img.style.opacity = "0";
+  }
+
+  // Phase 2: once the logo is gone, lift the background to fade the app in, then remove the node.
+  setTimeout(() => {
+    splash.classList.add("ntfy-splash-hidden");
+    const remove = () => splash.remove();
+    // Only react to the background's own opacity transition -- the logo's transitionend bubbles up
+    // here too, and would otherwise remove the splash before the app has finished fading in.
+    const onEnd = (event) => {
+      if (event.target === splash) {
+        splash.removeEventListener("transitionend", onEnd);
+        remove();
+      }
+    };
+    splash.addEventListener("transitionend", onEnd);
+    setTimeout(remove, APP_FADE_MS + 100); // fallback if transitionend never fires
+  }, LOGO_FADE_MS);
+};
+
+const hideSplash = () => {
+  if (removed) {
+    return;
+  }
+  removed = true;
+  // performance.now() is the time since the page started loading, i.e. roughly how long the splash
+  // has been visible. Hold it until MIN_VISIBLE_MS has elapsed before fading out.
+  const remaining = Math.max(0, MIN_VISIBLE_MS - performance.now());
+  setTimeout(fadeOutAndRemove, remaining);
+};
+
+export default hideSplash;

web/src/app/transition.js

@@ -0,0 +1,44 @@
+// Fade transitions for navigating between the main app and the auth pages (login/signup/reset).
+// We fade the whole app (#root) out, then either navigate client-side and fade back in, or do a
+// full reload (where the splash screen in index.html fades the next page in).
+
+const FADE_MS = 150;
+
+// Fade #root out and return it (or null if not found / no document).
+const fadeOutRoot = () => {
+  const node = document.getElementById("root");
+  if (node) {
+    node.style.transition = `opacity ${FADE_MS}ms ease-out`;
+    node.style.opacity = "0";
+  }
+  return node;
+};
+
+// Fade the app out, run a client-side navigation, then fade the new page back in. Used for
+// app -> login/signup, which stay within the same document (no reload).
+export const fadeNavigate = (navigate, to) => {
+  const node = fadeOutRoot();
+  if (!node) {
+    navigate(to);
+    return;
+  }
+  setTimeout(() => {
+    navigate(to);
+    // Fade back in on the next frame, once the new page has rendered.
+    requestAnimationFrame(() => {
+      node.style.opacity = "1";
+    });
+  }, FADE_MS);
+};
+
+// Fade the app out, then do a full page reload to `url`. Used for login/signup -> app, which must
+// reload (the per-user IndexedDB changes). The splash screen fades the reloaded app back in.
+export const fadeReload = (url) => {
+  if (!fadeOutRoot()) {
+    window.location.href = url;
+    return;
+  }
+  setTimeout(() => {
+    window.location.href = url;
+  }, FADE_MS);
+};