From 2f584162d6e2108d5e236da19e11bdb5e342c9c9 Mon Sep 17 00:00:00 2001
From: Codex Agent <codex-agent@example.com>
Date: Wed, 14 Jan 2026 11:36:02 +0100
Subject: [PATCH] Avoid hidden gallery content on tab navigation

---
 resources/js/guest/pages/GalleryPage.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/resources/js/guest/pages/GalleryPage.tsx b/resources/js/guest/pages/GalleryPage.tsx
index 8e781cd..ad06f91 100644
--- a/resources/js/guest/pages/GalleryPage.tsx
+++ b/resources/js/guest/pages/GalleryPage.tsx
@@ -1,7 +1,7 @@
 // @ts-nocheck
 import React, { useEffect, useState } from 'react';
 import { Page } from './_util';
-import { useParams, useSearchParams } from 'react-router-dom';
+import { useNavigationType, useParams, useSearchParams } from 'react-router-dom';
 import { usePollGalleryDelta } from '../polling/usePollGalleryDelta';
 import FiltersBar, { type GalleryFilter } from '../components/FiltersBar';
 import { Heart, Image as ImageIcon, Share2 } from 'lucide-react';
@@ -16,7 +16,7 @@ import { createPhotoShareLink } from '../services/photosApi';
 import { cn } from '@/lib/utils';
 import { useEventBranding } from '../context/EventBrandingContext';
 import ShareSheet from '../components/ShareSheet';
-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';
 
@@ -56,6 +56,7 @@ const normalizeImageUrl = (src?: string | null) => {
 
 export default function GalleryPage() {
   const { token } = useParams<{ token?: string }>();
+  const navigationType = useNavigationType();
   const { t, locale } = useTranslation();
   const { branding } = useEventBranding();
   const { photos, loading, newCount, acknowledgeNew, refreshNow } = usePollGalleryDelta(token ?? '', locale);
@@ -68,10 +69,10 @@ export default function GalleryPage() {
   const bodyFont = branding.typography?.body ?? branding.fontFamily ?? undefined;
   const headingFont = branding.typography?.heading ?? branding.fontFamily ?? undefined;
   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);
-  const gridMotion = getMotionContainerProps(motionEnabled, STAGGER_FAST);
+  const gridMotion = getMotionContainerPropsForNavigation(motionEnabled, STAGGER_FAST, navigationType);
   const [filter, setFilterState] = React.useState<GalleryFilter>('latest');
   const [currentPhotoIndex, setCurrentPhotoIndex] = React.useState<number | null>(null);
   const [hasOpenedPhoto, setHasOpenedPhoto] = useState(false);