perf(page-transition): stabilize layer context

src/components/common/PageTransition.tsx

@@ -2,7 +2,11 @@ import { ReactNode, useCallback, useLayoutEffect, useRef, useState } from 'react
 import { useLocation, type Location } from 'react-router-dom';
 import { animate } from 'motion/mini';
 import type { AnimationPlaybackControlsWithThen } from 'motion-dom';
-import { PageTransitionLayerContext, type LayerStatus } from './PageTransitionLayer';
+import {
+  PAGE_TRANSITION_LAYER_CONTEXT_VALUES,
+  PageTransitionLayerContext,
+  type LayerStatus,
+} from './PageTransitionLayer';
 import './PageTransition.scss';
 
 interface PageTransitionProps {
@@ -386,7 +390,9 @@ export function PageTransition({
                     : undefined
               }
             >
-              <PageTransitionLayerContext.Provider value={{ status: layer.status }}>
+              <PageTransitionLayerContext.Provider
+                value={PAGE_TRANSITION_LAYER_CONTEXT_VALUES[layer.status]}
+              >
                 {render(layer.location)}
               </PageTransitionLayerContext.Provider>
             </div>

src/components/common/PageTransitionLayer.ts

@@ -2,14 +2,20 @@ import { createContext, useContext } from 'react';
 
 export type LayerStatus = 'current' | 'exiting' | 'stacked';
 
-type PageTransitionLayerContextValue = {
+export type PageTransitionLayerContextValue = {
   status: LayerStatus;
+  isCurrentLayer: boolean;
 };
 
 export const PageTransitionLayerContext =
   createContext<PageTransitionLayerContextValue | null>(null);
 
+export const PAGE_TRANSITION_LAYER_CONTEXT_VALUES: Record<LayerStatus, PageTransitionLayerContextValue> = {
+  current: { status: 'current', isCurrentLayer: true },
+  stacked: { status: 'stacked', isCurrentLayer: false },
+  exiting: { status: 'exiting', isCurrentLayer: false },
+};
+
 export function usePageTransitionLayer() {
   return useContext(PageTransitionLayerContext);
 }
-

src/components/common/SecondaryScreenShell.tsx

@@ -52,7 +52,7 @@ export const SecondaryScreenShell = forwardRef<HTMLDivElement, SecondaryScreenSh
     const titleTooltip = typeof title === 'string' ? title : undefined;
     const resolvedBackAriaLabel = backAriaLabel ?? backLabel;
     const pageTransitionLayer = usePageTransitionLayer();
-    const isCurrentLayer = pageTransitionLayer ? pageTransitionLayer.status === 'current' : true;
+    const isCurrentLayer = pageTransitionLayer ? pageTransitionLayer.isCurrentLayer : true;
     const shouldRenderFloatingAction = Boolean(floatingAction) && isCurrentLayer;
     const floatingActionRef = useRef<HTMLDivElement | null>(null);