restore placeholder bubbles for undefined profiles

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

src/components/AvatarBubbles.tsx

@@ -10,7 +10,7 @@ import Animated, {
 } from 'react-native-reanimated'
 import {moderateProfile} from '@atproto/api'
 
-import {useProfileShadow} from '#/state/cache/profile-shadow'
+import {useMaybeProfileShadow} from '#/state/cache/profile-shadow'
 import {useModerationOpts} from '#/state/preferences/moderation-opts'
 import {useSession} from '#/state/session'
 import {UserAvatar} from '#/view/com/util/UserAvatar'
@@ -90,13 +90,10 @@ export function AvatarBubbles({
           transform: [{scale}],
           transformOrigin: 'top left',
         }}>
-        {layouts.map((layout, i) => {
+        {layouts.map((layout, i) => (
-          const profile = profiles[i]
-          if (!profile) return null
-          return (
           <AvatarBubble
             key={i}
-              profile={profile}
+            profile={profiles[i]}
             scale={scales[i]}
             size={layout.size}
             x={layout.x}
@@ -104,8 +101,7 @@ export function AvatarBubbles({
             zIndex={layout.zIndex}
             includeProfileBorder={layout.border}
           />
-          )
+        ))}
-        })}
       </View>
     </Animated.View>
   )
@@ -120,7 +116,7 @@ function AvatarBubble({
   zIndex,
   includeProfileBorder,
 }: {
-  profile: bsky.profile.AnyProfileView
+  profile?: bsky.profile.AnyProfileView
   scale: SharedValue<number>
   size: number
   x: number
@@ -133,7 +129,12 @@ function AvatarBubble({
     transform: [{translateX: x}, {translateY: y}, {scale: scale.get()}],
   }))
 
-  const style = [
+  const profile = useMaybeProfileShadow(profileUnshadowed)
+  const moderationOpts = useModerationOpts()
+
+  return (
+    <Animated.View
+      style={[
         a.absolute,
         a.rounded_full,
         a.flex_grow_0,
@@ -143,32 +144,19 @@ function AvatarBubble({
         },
         zIndex != null && {zIndex},
         animatedStyle,
-  ]
+      ]}>
-
+      {profile && moderationOpts ? (
-  const profile = useProfileShadow(profileUnshadowed)
-  const moderationOpts = useModerationOpts()
-
-  if (!moderationOpts) {
-    return (
-      <Animated.View style={style}>
-        <AvatarPlaceholder size={size} />
-      </Animated.View>
-    )
-  }
-
-  const moderation = moderateProfile(profile, moderationOpts)
-  const avatarModeration = moderation.ui('avatar')
-
-  return (
-    <Animated.View style={style}>
         <UserAvatar
           avatar={profile.avatar}
           size={size}
           type="user"
           hideLiveBadge
           noBorder
-        moderation={avatarModeration}
+          moderation={moderateProfile(profile, moderationOpts).ui('avatar')}
         />
+      ) : (
+        <AvatarPlaceholder size={size} />
+      )}
     </Animated.View>
   )
 }