Address burn count down

jsoningram · jsoningram · commit 2b42cb69a7c8 · 2025-12-02T17:14:34.000-05:00
diff --git a/special-pages/pages/new-tab/app/protections/components/Protections.js b/special-pages/pages/new-tab/app/protections/components/Protections.js
@@ -19,6 +19,7 @@ import { ProtectionsHeadingLegacy } from './ProtectionsHeadingLegacy';
  * @param {object} props
  * @param {Expansion} props.expansion
  * @param {import("@preact/signals").Signal<number>} props.blockedCountSignal
+ * @param {import("@preact/signals").Signal<boolean>} [props.skipAnimationSignal]
  * @param {ProtectionsConfig['feed']} props.feed
  * @param {(feed: ProtectionsConfig['feed']) => void} props.setFeed
  * @param {import("preact").ComponentChild} [props.children]
@@ -29,6 +30,7 @@ export function Protections({
     expansion = 'expanded',
     children,
     blockedCountSignal,
+    skipAnimationSignal,
     feed,
     toggle,
     setFeed,
@@ -64,6 +66,7 @@ export function Protections({
             ) : (
                 <ProtectionsHeading
                     blockedCountSignal={blockedCountSignal}
+                    skipAnimationSignal={skipAnimationSignal}
                     onToggle={toggle}
                     expansion={expansion}
                     canExpand={true}
diff --git a/special-pages/pages/new-tab/app/protections/components/ProtectionsConsumer.js b/special-pages/pages/new-tab/app/protections/components/ProtectionsConsumer.js
@@ -39,12 +39,13 @@ export function ProtectionsConsumer() {
  */
 function ProtectionsReadyState({ data, config }) {
     const { toggle, setFeed } = useContext(ProtectionsContext);
-    const blockedCountSignal = useBlockedCount(data.totalCount);
+    const { signal: blockedCountSignal, skipAnimation: skipAnimationSignal } = useBlockedCount(data.totalCount);
     const totalCookiePopUpsBlockedSignal = useCookiePopUpsBlockedCount(data.totalCookiePopUpsBlocked);
 
     return (
         <Protections
             blockedCountSignal={blockedCountSignal}
+            skipAnimationSignal={skipAnimationSignal}
             expansion={config.expansion}
             toggle={toggle}
             feed={config.feed}
diff --git a/special-pages/pages/new-tab/app/protections/components/ProtectionsHeading.js b/special-pages/pages/new-tab/app/protections/components/ProtectionsHeading.js
@@ -16,6 +16,7 @@ import { useRef, useEffect } from 'preact/hooks';
  * @param {object} props
  * @param {import('../../../types/new-tab.ts').Expansion} props.expansion
  * @param {import("@preact/signals").Signal<number>} props.blockedCountSignal
+ * @param {import("@preact/signals").Signal<boolean>} [props.skipAnimationSignal]
  * @param {boolean} props.canExpand
  * @param {() => void} props.onToggle
  * @param {import('preact').ComponentProps<'button'>} [props.buttonAttrs]
@@ -25,6 +26,7 @@ export function ProtectionsHeading({
     expansion,
     canExpand,
     blockedCountSignal,
+    skipAnimationSignal,
     onToggle,
     buttonAttrs = {},
     totalCookiePopUpsBlockedSignal,
@@ -43,8 +45,13 @@ export function ProtectionsHeading({
             : 0;
 
     // Animate both tracker count and cookie pop-ups count when counterContainer is in viewport
-    const animatedTrackersBlocked = useAnimatedCount(totalTrackersBlocked, counterContainerRef);
-    const animatedCookiePopUpsBlocked = useAnimatedCount(totalCookiePopUpsBlocked, counterContainerRef);
+    // Skip animation when burning all data (skipAnimationSignal is true)
+    // Pass the signal directly so useAnimatedCount can reactively read its value
+    // Both counts use the same skipAnimationSignal to ensure consistent behavior:
+    // - When burning all: both skip animation and go directly to empty state
+    // - When burning a single domain: both animate normally to show updated counts
+    const animatedTrackersBlocked = useAnimatedCount(totalTrackersBlocked, counterContainerRef, skipAnimationSignal);
+    const animatedCookiePopUpsBlocked = useAnimatedCount(totalCookiePopUpsBlocked, counterContainerRef, skipAnimationSignal);
 
     // Subscribe to scroll message
     useEffect(() => {
diff --git a/special-pages/pages/new-tab/app/protections/components/ProtectionsProvider.js b/special-pages/pages/new-tab/app/protections/components/ProtectionsProvider.js
@@ -92,18 +92,56 @@ export function useService() {
 
 /**
  * @param {number} initial
- * @return {import("@preact/signals").Signal<number>}
+ * @return {{signal: import("@preact/signals").Signal<number>, skipAnimation: import("@preact/signals").Signal<boolean>}}
  */
 export function useBlockedCount(initial) {
     const service = useContext(ProtectionsServiceContext);
+    const ntp = useMessaging();
     const signal = useSignal(initial);
+    const skipAnimationSignal = useSignal(false);
+    const burnCompleteTimeRef = useRef(/** @type {number | null} */ (null));
+    
+    // Track burn complete events to detect "burn all" scenario
+    useEffect(() => {
+        if (!ntp) return;
+        return ntp.messaging.subscribe('activity_onBurnComplete', () => {
+            // Mark that we should skip animation if next update goes to 0
+            burnCompleteTimeRef.current = Date.now();
+        });
+    }, [ntp]);
+    
     // @todo jingram possibly refactor to include full object
     useSignalEffect(() => {
         return service?.onData((evt) => {
-            signal.value = evt.data.totalCount;
+            const newValue = evt.data.totalCount;
+            const previousValue = signal.value;
+            
+            // If transitioning to 0 and we just had a burn complete (within 1 second),
+            // this is likely a "burn all" operation - skip animation and go directly to empty state
+            if (newValue === 0 && previousValue > 0 && burnCompleteTimeRef.current !== null) {
+                const timeSinceBurn = Date.now() - burnCompleteTimeRef.current;
+                if (timeSinceBurn < 1000) {
+                    // Set skipAnimation flag before updating the signal value
+                    // This ensures useAnimatedCount immediately sets to 0 without animating
+                    skipAnimationSignal.value = true;
+                    signal.value = newValue;
+                    // Reset after animation would have completed to allow normal behavior for future updates
+                    setTimeout(() => {
+                        skipAnimationSignal.value = false;
+                        burnCompleteTimeRef.current = null;
+                    }, 500);
+                    return;
+                }
+            }
+            
+            // Normal update (including single domain burns) - allow animation for both counts
+            // This ensures both tracker count and cookie pop-ups count animate when burning a single domain
+            skipAnimationSignal.value = false;
+            signal.value = newValue;
         });
     });
-    return signal;
+    
+    return { signal, skipAnimation: skipAnimationSignal };
 }
 
 /**
diff --git a/special-pages/pages/new-tab/app/protections/utils/useAnimatedCount.js b/special-pages/pages/new-tab/app/protections/utils/useAnimatedCount.js
@@ -1,4 +1,5 @@
 import { useState, useEffect, useCallback, useRef } from 'preact/hooks';
+import { useSignalEffect } from '@preact/signals';
 import { animateCount } from './animateCount.js';
 
 /**
@@ -20,16 +21,30 @@ import { animateCount } from './animateCount.js';
  * @param {number} targetValue - The target value to animate to
  * @param {import('preact').RefObject<HTMLElement>} [elementRef] - Optional ref
  * to element for viewport detection
+ * @param {boolean | import("@preact/signals").Signal<boolean>} [skipAnimation] - If true or signal value is true, skip animation and immediately set to target value
  * @returns {number} The current animated value
  *
  * @todo IDEAL SOLUTION: Native code should send a message (e.g.,
  * 'ntp_becameVisible') when the NTP webview becomes visible to the user. This
  * would be more reliable than JavaScript-only detection. We could subscribe to
  * this message and trigger animation when received.
  */
-export function useAnimatedCount(targetValue, elementRef) {
+export function useAnimatedCount(targetValue, elementRef, skipAnimation = false) {
     // Initialize to 0 so first render triggers percentage-based animation from spec
     const [animatedValue, setAnimatedValue] = useState(0);
+    
+    // Track skipAnimation reactively if it's a signal
+    const isSignal = typeof skipAnimation === 'object' && 'value' in skipAnimation;
+    const [shouldSkipAnimation, setShouldSkipAnimation] = useState(
+        isSignal ? skipAnimation.value : skipAnimation
+    );
+    
+    // Reactively track signal value changes (always call hook, but only track if it's a signal)
+    useSignalEffect(() => {
+        if (isSignal) {
+            setShouldSkipAnimation(skipAnimation.value);
+        }
+    });
 
     // Track current animated value to enable smooth incremental updates
     // Initialize to 0 so first animation uses spec's percentage-based starting point
@@ -121,22 +136,36 @@ export function useAnimatedCount(targetValue, elementRef) {
         wasVisibleRef.current = isCurrentlyVisible;
 
         if (isCurrentlyVisible) {
-            // Determine starting value for animation
-            let startValue = animatedValueRef.current;
-
-            // If we're returning to NTP and the target value has changed, animate from last seen value
-            if (isReturningToNTP && lastSeenValueRef.current !== null && lastSeenValueRef.current !== targetValue) {
-                startValue = lastSeenValueRef.current;
-                // Reset animation state to allow re-animation
-                hasAnimatedRef.current = false;
-            }
+            // If skipAnimation is true (e.g., after burn all), immediately set to target value
+            // This skips the countdown animation and goes directly to empty state (when targetValue is 0)
+            if (shouldSkipAnimation) {
+                // Cancel any ongoing animation immediately
+                cancelAnimation();
+                // Immediately set to target value without animation
+                // When targetValue is 0, this will trigger the empty state display
+                setAnimatedValue(targetValue);
+                animatedValueRef.current = targetValue;
+                hasAnimatedRef.current = true;
+                // Update last seen value so it's correct for future animations
+                lastSeenValueRef.current = targetValue;
+            } else {
+                // Determine starting value for animation
+                let startValue = animatedValueRef.current;
 
-            // Animate from start value to target
-            cancelAnimation = animateCount(targetValue, updateAnimatedCount, undefined, startValue);
-            hasAnimatedRef.current = true;
+                // If we're returning to NTP and the target value has changed, animate from last seen value
+                if (isReturningToNTP && lastSeenValueRef.current !== null && lastSeenValueRef.current !== targetValue) {
+                    startValue = lastSeenValueRef.current;
+                    // Reset animation state to allow re-animation
+                    hasAnimatedRef.current = false;
+                }
 
-            // After animation starts, update last seen to target (will be updated as animation progresses)
-            // This ensures next time we hide, we save the correct final value
+                // Animate from start value to target
+                cancelAnimation = animateCount(targetValue, updateAnimatedCount, undefined, startValue);
+                hasAnimatedRef.current = true;
+
+                // After animation starts, update last seen to target (will be updated as animation progresses)
+                // This ensures next time we hide, we save the correct final value
+            }
         } else {
             // Page is not visible
             if (wasVisible) {
@@ -164,19 +193,32 @@ export function useAnimatedCount(targetValue, elementRef) {
             wasVisibleRef.current = isNowVisible;
 
             if (isNowVisible) {
-                // Determine starting value
-                let startValue = animatedValueRef.current;
+                // If skipAnimation is true (e.g., after burn all), immediately set to target value
+                // This skips the countdown animation and goes directly to empty state (when targetValue is 0)
+                if (shouldSkipAnimation) {
+                    cancelAnimation();
+                    // Immediately set to target value without animation
+                    // When targetValue is 0, this will trigger the empty state display
+                    setAnimatedValue(targetValue);
+                    animatedValueRef.current = targetValue;
+                    hasAnimatedRef.current = true;
+                    // Update last seen value so it's correct for future animations
+                    lastSeenValueRef.current = targetValue;
+                } else {
+                    // Determine starting value
+                    let startValue = animatedValueRef.current;
+
+                    // If returning to NTP and value changed, animate from last seen
+                    if (isReturningToNTPNow && lastSeenValueRef.current !== null && lastSeenValueRef.current !== targetValue) {
+                        startValue = lastSeenValueRef.current;
+                        hasAnimatedRef.current = false;
+                    }
 
-                // If returning to NTP and value changed, animate from last seen
-                if (isReturningToNTPNow && lastSeenValueRef.current !== null && lastSeenValueRef.current !== targetValue) {
-                    startValue = lastSeenValueRef.current;
-                    hasAnimatedRef.current = false;
+                    // Page became visible and element is in viewport - start animation
+                    cancelAnimation();
+                    cancelAnimation = animateCount(targetValue, updateAnimatedCount, undefined, startValue);
+                    hasAnimatedRef.current = true;
                 }
-
-                // Page became visible and element is in viewport - start animation
-                cancelAnimation();
-                cancelAnimation = animateCount(targetValue, updateAnimatedCount, undefined, startValue);
-                hasAnimatedRef.current = true;
             } else if (document.visibilityState === 'hidden') {
                 // Page became hidden - save current value and cancel animation
                 cancelAnimation();
@@ -195,7 +237,7 @@ export function useAnimatedCount(targetValue, elementRef) {
             cancelAnimation();
             document.removeEventListener('visibilitychange', handleVisibilityChange);
         };
-    }, [targetValue, updateAnimatedCount, isInViewport]);
+    }, [targetValue, updateAnimatedCount, isInViewport, shouldSkipAnimation]);
 
     return animatedValue;
 }
