ntp: improved background fades (#1404)

Author: shakyShane

special-pages/pages/new-tab/app/components/BackgroundProvider.js

@@ -1,11 +1,11 @@
 import { Fragment, h } from 'preact';
-import cn from 'classnames';
 import styles from './BackgroundReceiver.module.css';
 import { values } from '../customizer/values.js';
-import { useContext, useState } from 'preact/hooks';
+import { useContext, useEffect, useState } from 'preact/hooks';
 import { CustomizerContext } from '../customizer/CustomizerProvider.js';
 import { detectThemeFromHex } from '../customizer/utils.js';
 import { useSignalEffect } from '@preact/signals';
+import { memo } from 'preact/compat';
 
 /**
  * @import { BackgroundVariant, BrowserTheme } from "../../types/new-tab"
@@ -110,7 +110,7 @@ export function BackgroundConsumer({ browser }) {
             const gradient = values.gradients[background.value];
             return (
                 <Fragment>
-                    <ImageCrossFade src={gradient.path}></ImageCrossFade>
+                    <ImageCrossFade src={gradient.path} />
                     <div
                         className={styles.root}
                         style={{
@@ -130,51 +130,118 @@ export function BackgroundConsumer({ browser }) {
     }
 }
 
+/**
+ * @typedef {'idle'
+ *  | 'loadingFirst'
+ *  | 'loading'
+ *  | 'fading'
+ *  | 'settled'
+ * } ImgState
+ */
+
+/**
+ * @type {Record<ImgState, ImgState>}
+ */
+const states = {
+    idle: 'idle',
+    loadingFirst: 'loadingFirst',
+    loading: 'loading',
+    fading: 'fading',
+    settled: 'settled',
+};
+
 /**
  * @param {object} props
  * @param {string} props.src
  */
-function ImageCrossFade({ src }) {
-    /**
-     * Proxy the image source, so that we can keep the old
-     * image around whilst the new one is loading.
-     */
-    const [stable, setStable] = useState(src);
-    /**
-     * Trigger the animation:
-     *
-     * NOTE: this animation is deliberately NOT done purely with CSS-triggered state.
-     * Whilst debugging in WebKit, I found the technique below to be 100% reliable
-     * in terms of fading a new image over the top of an existing one.
-     *
-     * If you find a better way, please test in webkit-based browsers
-     */
-    return (
-        <Fragment>
-            <img src={stable} class={styles.root} style={{ display: src === stable ? 'none' : 'block' }} />
-            <img
-                src={src}
-                class={cn(styles.root, styles.over)}
-                onLoad={(e) => {
-                    const elem = /** @type {HTMLImageElement} */ (e.target);
-
-                    // HACK: This is what I needed to force, to get 100% predictability. 🤷
-                    elem.style.opacity = '0';
-
-                    const anim = elem.animate([{ opacity: '0' }, { opacity: '1' }], {
-                        duration: 250,
-                        iterations: 1,
-                        easing: 'ease-in-out',
-                        fill: 'both',
-                    });
-
-                    // when the fade completes, we want to reset the stable `src`.
-                    // This allows the image underneath to be updated but also allows us to un-mount the fader on top.
-                    anim.onfinish = () => {
-                        setStable(src);
-                    };
-                }}
-            />
-        </Fragment>
-    );
+function ImageCrossFade_({ src }) {
+    const [state, setState] = useState({
+        /** @type {ImgState} */
+        value: states.idle,
+        current: src,
+        next: src,
+    });
+
+    useEffect(() => {
+        /** @type {HTMLImageElement|undefined} */
+        let img = new Image();
+        let cancelled = false;
+
+        // Mark the component as being in a 'loading' state, without
+        // explicit changes to any DOM
+        setState((prev) => {
+            // prettier-ignore
+            const nextState = prev.value === states.idle
+                ? states.loadingFirst
+                : states.loading
+            return { ...prev, value: nextState };
+        });
+
+        /** @type {(()=>void)|undefined} */
+        let handler = () => {
+            if (cancelled) return;
+            setState((prev) => {
+                // when coming from a 'loading' states, we can fade
+                if (prev.value === states.loading) {
+                    return { ...prev, value: states.fading, next: src };
+                }
+                return prev;
+            });
+        };
+
+        // trigger the load in memory, not on screen
+        img.addEventListener('load', handler);
+        img.src = src;
+
+        return () => {
+            cancelled = true;
+            if (img && handler) {
+                img.removeEventListener('load', handler);
+                img = undefined;
+                handler = undefined;
+            }
+        };
+    }, [src]);
+
+    switch (state.value) {
+        case states.settled:
+        case states.loadingFirst:
+            return <img class={styles.root} data-state={state.value} src={state.current} alt="" />;
+        case states.loading:
+        case states.fading:
+            return (
+                <Fragment>
+                    <img class={styles.root} data-state={state.value} src={state.current} alt="" />
+                    <img
+                        class={styles.root}
+                        data-state={state.value}
+                        src={state.next}
+                        onLoad={(e) => {
+                            const elem = /** @type {HTMLImageElement} */ (e.target);
+
+                            // HACK: This is what I needed to force, to get 100% predictability. 🤷
+                            elem.style.opacity = '0';
+
+                            const anim = elem.animate([{ opacity: '0' }, { opacity: '1' }], {
+                                duration: 250,
+                                iterations: 1,
+                                fill: 'both',
+                            });
+
+                            // when the fade completes, we want to reset the stable `src`.
+                            // This allows the image underneath to be updated but also allows us to un-mount the fader on top.
+                            anim.onfinish = () => {
+                                setState((prev) => {
+                                    return { ...prev, value: states.settled, current: prev.next, next: prev.next };
+                                });
+                            };
+                        }}
+                    />
+                </Fragment>
+            );
+        default:
+            return null;
+    }
 }
+
+const ImageCrossFade = memo(ImageCrossFade_);

special-pages/pages/new-tab/app/components/BackgroundReceiver.module.css

@@ -7,14 +7,20 @@
     object-fit: cover;
     pointer-events: none;
 
-    &[data-animate="true"] {
-        transition: background .3s;
+    &[data-state="loadingFirst"] {
+        animation-name: fade-in;
+        animation-fill-mode: both;
+        animation-duration: .25s;
+        animation-iteration-count: 1;
     }
 }
 
-.under {
-    opacity: 1;
-}
-.over {
-    opacity: 0;
+@keyframes fade-in {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
 }
+