diff --git a/frontend/src/components/layout/RightSidebar.tsx b/frontend/src/components/layout/RightSidebar.tsx
index 17c9bdc..ce65599 100644
--- a/frontend/src/components/layout/RightSidebar.tsx
+++ b/frontend/src/components/layout/RightSidebar.tsx
@@ -146,14 +146,29 @@ export function RightSidebar() {
         ? heapsApi.removePhotos(activeHeap.id, [activePhotoId])
         : heapsApi.addPhotos(activeHeap.id, [activePhotoId])
     },
-    onSuccess: () => {
+    // Optimistic flip so the badge / button label update instantly.
+    onMutate: ({ remove }) => {
+      if (!activeHeap || !activePhotoId) return { previous: undefined }
+      const key = ['heap-photo-ids', activeHeap.id] as const
+      const previous = queryClient.getQueryData<string[]>(key)
+      const set = new Set(previous ?? [])
+      if (remove) set.delete(activePhotoId)
+      else set.add(activePhotoId)
+      queryClient.setQueryData<string[]>(key, Array.from(set))
+      return { previous }
+    },
+    onError: (_e, _vars, ctx) => {
+      if (activeHeap && ctx?.previous) {
+        queryClient.setQueryData(['heap-photo-ids', activeHeap.id], ctx.previous)
+      }
+    },
+    onSettled: () => {
       queryClient.invalidateQueries({ queryKey: HEAPS_QUERY_KEY })
       if (activeHeap) {
         queryClient.invalidateQueries({
           queryKey: ['heap-photo-ids', activeHeap.id],
         })
       }
-      queryClient.invalidateQueries({ queryKey: ['photos'] })
     },
   })
 
diff --git a/frontend/src/hooks/useKeyboardShortcuts.ts b/frontend/src/hooks/useKeyboardShortcuts.ts
index 7ef6871..bb90882 100644
--- a/frontend/src/hooks/useKeyboardShortcuts.ts
+++ b/frontend/src/hooks/useKeyboardShortcuts.ts
@@ -77,6 +77,25 @@ export function useKeyboardShortcuts(props: KeyboardShortcutsProps) {
       remove
         ? heapsApi.removePhotos(heapId, photoIds)
         : heapsApi.addPhotos(heapId, photoIds),
+    // Optimistically flip the membership cache so the basket affordance
+    // updates instantly and a quick second P press reads the new state
+    // (otherwise invalidate-then-refetch leaves a brief stale window).
+    onMutate: ({ heapId, photoIds, remove }) => {
+      const key = ['heap-photo-ids', heapId] as const
+      const previous = queryClient.getQueryData<string[]>(key)
+      const set = new Set(previous ?? [])
+      if (remove) photoIds.forEach((id) => set.delete(id))
+      else photoIds.forEach((id) => set.add(id))
+      queryClient.setQueryData<string[]>(key, Array.from(set))
+      return { previous }
+    },
+    onError: (e: any, _vars, ctx) => {
+      // Roll back the optimistic update on failure.
+      if (ctx?.previous) {
+        queryClient.setQueryData(['heap-photo-ids', _vars.heapId], ctx.previous)
+      }
+      toast.error('Heap update failed', e.message || 'Unknown error')
+    },
     onSuccess: (data, vars) => {
       const heap = (queryClient.getQueryData<Heap[]>(HEAPS_QUERY_KEY) ?? []).find(
         (h) => h.id === vars.heapId
@@ -95,11 +114,12 @@ export function useKeyboardShortcuts(props: KeyboardShortcutsProps) {
           )
         }
       }
+    },
+    onSettled: (_data, _err, vars) => {
+      // Re-sync with server truth (heap counts in particular need this).
       queryClient.invalidateQueries({ queryKey: HEAPS_QUERY_KEY })
       queryClient.invalidateQueries({ queryKey: ['heap-photo-ids', vars.heapId] })
-      queryClient.invalidateQueries({ queryKey: ['photos'] })
     },
-    onError: (e: any) => toast.error('Heap update failed', e.message || 'Unknown error'),
   })
 
   const togglePickOnSelection = () => {