ref(ui): Improve member loading in actor avatar

Right now if the member isn't present in the store when the avatar
renders we'll never end up showing the users avatar

Author: evanpurkhiser

static/app/components/avatar/actorAvatar.spec.tsx

@@ -96,4 +96,32 @@ describe('ActorAvatar', function () {
     expect(await screen.findByText('CT')).toBeInTheDocument();
     expect(mockRequest).toHaveBeenCalled();
   });
+
+  it('should fetch a user not in the store', async function () {
+    const organization = OrganizationFixture();
+
+    OrganizationStore.onUpdate(organization, {replace: true});
+
+    const user2 = UserFixture({id: '2', name: 'COOL USER'});
+
+    const mockRequest = MockApiClient.addMockResponse({
+      url: `/organizations/${organization.slug}/members/`,
+      method: 'GET',
+      body: [{user: user2}],
+    });
+
+    render(
+      <ActorAvatar
+        actor={{
+          id: user2.id,
+          name: user2.name,
+          email: user2.email,
+          type: 'user',
+        }}
+      />
+    );
+
+    expect(await screen.findByText('CU')).toBeInTheDocument();
+    expect(mockRequest).toHaveBeenCalled();
+  });
 });

static/app/components/avatar/actorAvatar.tsx

@@ -1,10 +1,11 @@
+import {useMemo} from 'react';
 import * as Sentry from '@sentry/react';
 
 import TeamAvatar from 'sentry/components/avatar/teamAvatar';
 import UserAvatar from 'sentry/components/avatar/userAvatar';
-import LoadingIndicator from 'sentry/components/loadingIndicator';
-import MemberListStore from 'sentry/stores/memberListStore';
+import Placeholder from 'sentry/components/placeholder';
 import type {Actor} from 'sentry/types';
+import {useMembers} from 'sentry/utils/useMembers';
 import {useTeamsById} from 'sentry/utils/useTeamsById';
 
 import type {BaseAvatarProps} from './baseAvatar';
@@ -24,12 +25,32 @@ function LoadTeamAvatar({
   const team = teams.find(t => t.id === teamId);
 
   if (isLoading) {
-    return <LoadingIndicator mini />;
+    const size = `${props.size}px`;
+    return <Placeholder width={size} height={size} />;
   }
 
   return <TeamAvatar team={team} {...props} />;
 }
 
+/**
+ * Wrapper to assist loading the user from api or store
+ */
+function LoadMemberAvatar({
+  userId,
+  ...props
+}: {userId: string} & Omit<React.ComponentProps<typeof UserAvatar>, 'team'>) {
+  const ids = useMemo(() => [userId], [userId]);
+  const {members, fetching} = useMembers({ids});
+  const user = members.find(u => u.id === userId);
+
+  if (fetching) {
+    const size = `${props.size}px`;
+    return <Placeholder shape="circle" width={size} height={size} />;
+  }
+
+  return <UserAvatar user={user} {...props} />;
+}
+
 function ActorAvatar({size = 24, hasTooltip = true, actor, ...props}: Props) {
   const otherProps = {
     size,
@@ -38,8 +59,7 @@ function ActorAvatar({size = 24, hasTooltip = true, actor, ...props}: Props) {
   };
 
   if (actor.type === 'user') {
-    const user = actor.id ? MemberListStore.getById(actor.id) ?? actor : actor;
-    return <UserAvatar user={user} {...otherProps} />;
+    return <LoadMemberAvatar userId={actor.id} {...otherProps} />;
   }
 
   if (actor.type === 'team') {