Avoid task page hidden animation on tab navigation

resources/js/guest/lib/__tests__/motion.test.ts

@@ -1,41 +1,25 @@
-import { describe, expect, it, vi } from 'vitest';
+import { getMotionContainerPropsForNavigation, STAGGER_FAST } from '../motion';
-import { FADE_SCALE, FADE_UP, STAGGER_FAST, getMotionContainerProps, getMotionItemProps, prefersReducedMotion } from '../motion';
 
-describe('motion helpers', () => {
+describe('getMotionContainerPropsForNavigation', () => {
-  it('returns disabled props when motion is off', () => {
+  it('returns initial hidden for POP navigation', () => {
-    const props = getMotionContainerProps(false, STAGGER_FAST);
+    expect(getMotionContainerPropsForNavigation(true, STAGGER_FAST, 'POP')).toEqual({
-    expect(props.initial).toBe(false);
+      variants: STAGGER_FAST,
-  });
+      initial: 'hidden',
-
+      animate: 'show',
-  it('returns variants when motion is on', () => {
-    const containerProps = getMotionContainerProps(true, STAGGER_FAST);
-    const itemProps = getMotionItemProps(true, FADE_UP);
-    expect(containerProps.initial).toBe('hidden');
-    expect(containerProps.animate).toBe('show');
-    expect(itemProps.variants).toBe(FADE_UP);
-  });
-
-  it('detects reduced motion preference safely', () => {
-    const original = window.matchMedia;
-    Object.defineProperty(window, 'matchMedia', {
-      configurable: true,
-      value: undefined,
-    });
-    expect(prefersReducedMotion()).toBe(false);
-
-    Object.defineProperty(window, 'matchMedia', {
-      configurable: true,
-      value: vi.fn().mockReturnValue({ matches: true }),
-    });
-    expect(prefersReducedMotion()).toBe(true);
-
-    Object.defineProperty(window, 'matchMedia', {
-      configurable: true,
-      value: original,
     });
   });
 
-  it('exposes distinct base variants', () => {
+  it('skips initial animation for PUSH navigation', () => {
-    expect(FADE_UP).not.toBe(FADE_SCALE);
+    expect(getMotionContainerPropsForNavigation(true, STAGGER_FAST, 'PUSH')).toEqual({
+      variants: STAGGER_FAST,
+      initial: false,
+      animate: 'show',
+    });
+  });
+
+  it('disables motion when not enabled', () => {
+    expect(getMotionContainerPropsForNavigation(false, STAGGER_FAST, 'POP')).toEqual({
+      initial: false,
+    });
   });
 });

resources/js/guest/lib/motion.ts

@@ -56,3 +56,17 @@ export function getMotionContainerProps(enabled: boolean, variants: Variants) {
 export function getMotionItemProps(enabled: boolean, variants: Variants) {
   return enabled ? { variants } : {};
 }
+
+export function getMotionContainerPropsForNavigation(
+  enabled: boolean,
+  variants: Variants,
+  navigationType: 'POP' | 'PUSH' | 'REPLACE'
+) {
+  if (!enabled) {
+    return { initial: false } as const;
+  }
+
+  const initial = navigationType === 'POP' ? 'hidden' : false;
+
+  return { variants, initial, animate: 'show' } as const;
+}

resources/js/guest/pages/TaskPickerPage.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
+import { useNavigate, useNavigationType, useParams, useSearchParams } from 'react-router-dom';
 import { Button } from '@/components/ui/button';
 import { Alert, AlertDescription } from '@/components/ui/alert';
 import { Sparkles, RefreshCw, Smile, Camera, Timer as TimerIcon, Heart, ChevronRight, CheckCircle2 } from 'lucide-react';
@@ -18,7 +18,7 @@ import {
   type EmotionTheme,
 } from '../lib/emotionTheme';
 import { getDeviceId } from '../lib/device';
-import { FADE_SCALE, FADE_UP, STAGGER_FAST, getMotionContainerProps, getMotionItemProps, prefersReducedMotion } from '../lib/motion';
+import { FADE_SCALE, FADE_UP, STAGGER_FAST, getMotionContainerPropsForNavigation, getMotionItemProps, prefersReducedMotion } from '../lib/motion';
 import PullToRefresh from '../components/PullToRefresh';
 import { triggerHaptic } from '../lib/haptics';
 import { dedupeTasksById } from '../lib/taskUtils';
@@ -56,6 +56,7 @@ export default function TaskPickerPage() {
   const { token } = useParams<{ token: string }>();
   const eventKey = token ?? '';
   const navigate = useNavigate();
+  const navigationType = useNavigationType();
   const [searchParams, setSearchParams] = useSearchParams();
   const { branding } = useEventBranding();
   const { t, locale } = useTranslation();
@@ -371,7 +372,7 @@ export default function TaskPickerPage() {
   );
   const toggleValue = selectedEmotion === 'all' ? 'none' : 'recent';
   const motionEnabled = !prefersReducedMotion();
-  const containerMotion = getMotionContainerProps(motionEnabled, STAGGER_FAST);
+  const containerMotion = getMotionContainerPropsForNavigation(motionEnabled, STAGGER_FAST, navigationType);
   const fadeUpMotion = getMotionItemProps(motionEnabled, FADE_UP);
   const fadeScaleMotion = getMotionItemProps(motionEnabled, FADE_SCALE);