feat(nav): Animate primary nav overlays and add image placeholder

Add a scale + opacity entrance animation to the primary navigation
button overlay on desktop using theme.motion.framer.enter.moderate.
Animation is skipped on mobile to preserve the existing sheet behaviour.

Add a BroadcastImage component in the What's New panel that shows a
140px placeholder skeleton while the broadcast media image loads,
preventing layout shift. Uses loading="eager" so the browser fetches
the image immediately even before it is visible.

Co-Authored-By: Claude <noreply@anthropic.com>

Author: JonasBa

static/app/views/navigation/primary/components.tsx

@@ -4,6 +4,7 @@ import {useTheme} from '@emotion/react';
 import styled from '@emotion/styled';
 import {FocusScope} from '@react-aria/focus';
 import {mergeProps} from '@react-aria/utils';
+import {motion} from 'framer-motion';
 import type {LocationDescriptor} from 'history';
 import type {DistributedOmit} from 'type-fest';
 
@@ -757,11 +758,19 @@ export function usePrimaryNavigationButtonOverlay(props: UseOverlayProps = {}) {
  */
 function PrimaryNavigationButtonOverlay(props: PrimaryNavigationButtonOverlayProps) {
   const theme = useTheme();
+  const {layout} = usePrimaryNavigation();
+  const isDesktop = layout !== 'mobile';
 
   return createPortal(
     <FocusScope restoreFocus autoFocus>
       <PositionWrapper zIndex={theme.zIndex.modal} {...props.overlayProps}>
-        <ScrollableOverlay>{props.children}</ScrollableOverlay>
+        <motion.div
+          initial={isDesktop ? {opacity: 0, scale: 0.98} : undefined}
+          animate={isDesktop ? {opacity: 1, scale: 1} : undefined}
+          transition={isDesktop ? theme.motion.framer.enter.moderate : undefined}
+        >
+          <ScrollableOverlay>{props.children}</ScrollableOverlay>
+        </motion.div>
       </PositionWrapper>
     </FocusScope>,
     document.body

static/app/views/navigation/primary/whatsNew.tsx

@@ -1,4 +1,4 @@
-import {Fragment, useEffect, useMemo} from 'react';
+import {Fragment, useEffect, useMemo, useState} from 'react';
 
 import {Tag} from '@sentry/scraps/badge';
 import {Image} from '@sentry/scraps/image';
@@ -33,6 +33,25 @@ const BROADCAST_CATEGORIES: Record<NonNullable<Broadcast['category']>, string> =
   video: t('Video'),
 };
 
+function BroadcastImage({src, alt}: {alt: string; src: string}) {
+  const [loaded, setLoaded] = useState(false);
+
+  return (
+    <Fragment>
+      {!loaded && <Placeholder width="100%" height="140px" />}
+      <Image
+        width="100%"
+        src={src}
+        alt={alt}
+        radius="md"
+        loading="eager"
+        onLoad={() => setLoaded(true)}
+        style={loaded ? undefined : {display: 'none'}}
+      />
+    </Fragment>
+  );
+}
+
 function WhatsNewContent({
   unseenPostIds,
   isPending,
@@ -159,7 +178,7 @@ function WhatsNewContent({
                 </ExternalLink>
               </Text>
               {item.mediaUrl ? (
-                <Image width="100%" src={item.mediaUrl} alt={item.title} radius="md" />
+                <BroadcastImage src={item.mediaUrl} alt={item.title} />
               ) : null}
               {idx < broadcasts.length - 1 && <Stack.Separator />}
             </Stack>