fix(app): paint avatars from a real image with a fading placeholder (#1856)

fluxer_app/src/features/app/components/shared/GroupDMAvatar.tsx

@@ -5,7 +5,6 @@ import styles from '@app/features/app/components/shared/GroupDMAvatar.module.css
 import {getStatusTypeLabel} from '@app/features/app/constants/AppConstants';
 import type {Channel} from '@app/features/channel/models/Channel';
 import {getGroupDMAccentColor} from '@app/features/channel/utils/GroupDMColorUtils';
-import {cdnUrl} from '@app/features/messaging/utils/MessagingUrlUtils';
 import Presence from '@app/features/presence/state/Presence';
 import TransientPresence from '@app/features/presence/state/TransientPresence';
 import {remFromPx} from '@app/features/theme/layout/RemFromPx';
@@ -147,7 +146,7 @@ function renderGroupStatusDot(status: StatusType, size: number, isTyping?: boole
 							width={1}
 							height={1}
 							fill={statusColor}
-							mask={`url(#svg-mask-status-${renderableStatus})`}
+							mask={`url(#flx-mask-presence-${renderableStatus})`}
 							data-flx="app.group-dm-avatar.render-group-status-dot.rect"
 						/>
 					</svg>
@@ -446,13 +445,9 @@ export const GroupDMAvatar: React.FC<GroupDMAvatarProps> = observer(
 						const user = Users.getUser(userId);
 						const {top, left, avatarSize} = getAvatarPosition(count, index, clusterSize);
 						const avatarMaskId = `${groupMaskId}-avatar-${index}`;
-						let avatarUrl: string;
-						if (user) {
-							avatarUrl = AvatarUtils.getUserAvatarURL({id: user.id, avatar: user.avatar});
-						} else {
-							const avatarIndex = index % 6;
-							avatarUrl = cdnUrl(`avatars/${avatarIndex}.png`);
-						}
+						const avatarUrl = user
+							? AvatarUtils.getUserAvatarURL({id: user.id, avatar: user.avatar})
+							: AvatarUtils.getDefaultAvatarURL(userId);
 						return (
 							<image
 								key={userId}