feat(mobile): skeleton placeholder for Programs first load

Programs now shows a content-shaped skeleton on initial load — the real header +
"New Program" action stay live, while the stat cards, search bar, and program rows
render as placeholders that fill in when data arrives ("content is there but not
yet"). Previously it rendered a dimmed/blank screen. Implemented as a thin
ProgramsSkeleton wrapper over the shared ListScreenSkeleton, matching WorkoutsSkeleton.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Ccq3rvfb9ArzS2DidghJm5

Author: Cawlumm

mobile/app/(tabs)/programs/index.tsx

@@ -5,6 +5,7 @@ import { BookOpen, Plus } from 'lucide-react-native'
 import type { Program } from '@lyftr/shared'
 import { AppText, Card, EmptyState, IconButton, Label, PageHeader, Screen, SearchField } from '../../../src/components/ui'
 import { ProgramCard } from '../../../src/components/programs/ProgramCard'
+import { ProgramsSkeleton } from '../../../src/components/programs/ProgramsSkeleton'
 import { useServerInfiniteList } from '../../../src/hooks/useServerInfiniteList'
 import { client } from '../../../src/lib/lyftr'
 import { useTheme } from '../../../src/theme/useTheme'
@@ -51,11 +52,15 @@ export default function Programs() {
     setPulling(false)
   }, [reload])
 
-  // Weight-style loading (no skeleton / center spinner): the screen renders
-  // immediately and content is grayed out while a *full* (re)load is in flight —
-  // the first fetch or a search/refresh. Pagination (loadMore) is excluded so
-  // appending a page doesn't dim the whole list.
-  const dim = initialLoading || refreshing
+  // First load shows a content-shaped skeleton (header + stats + search + card rows as
+  // placeholders) so the layout is there before the data fills in — same pattern as
+  // the Workouts list.
+  if (initialLoading) return <ProgramsSkeleton />
+
+  // Stale-while-revalidate: dim the loaded content while a search re-fetches (the
+  // previous results stay on screen until the fresh page lands). Pagination (loadMore)
+  // is excluded so appending a page doesn't dim the whole list.
+  const dim = refreshing
 
   const stats = [
     // 1:1 with web: summarize the *loaded* items, not a server-side stat.

mobile/src/components/programs/ProgramsSkeleton.tsx

@@ -0,0 +1,27 @@
+import { router } from 'expo-router'
+import { Plus } from 'lucide-react-native'
+import { IconButton, ListScreenSkeleton } from '../ui'
+
+// Initial-load skeleton for the Programs list — a thin wrapper over the shared
+// ListScreenSkeleton (header · 2 stats · search · card rows), matching the Programs
+// layout so content fills into its own shape rather than popping after a blank/spinner.
+// The PageHeader + its "New Program" action are the REAL controls, live immediately;
+// only the data-shaped regions are placeholders. Mirrors WorkoutsSkeleton.
+export function ProgramsSkeleton() {
+  return (
+    <ListScreenSkeleton
+      title="Programs"
+      subtitle="Reusable workout templates"
+      statCount={2}
+      action={
+        <IconButton
+          icon={Plus}
+          label="New Program"
+          variant="solid"
+          size="md"
+          onPress={() => router.push('/programs/new')}
+        />
+      }
+    />
+  )
+}