feat: show skeleton and grey background while avatar loads

app/containers/Avatar/Avatar.stories.tsx

@@ -96,4 +96,6 @@ export const RoomAvatarExternalProviderUrl = () => (
 
 export const WrongServer = () => <Avatar text='Avatar' server='https://google.com' size={56} />;
 
+export const Loading = () => <Avatar avatar='https://10.255.255.1/avatar.png' server={server} isStatic size={56} />;
+
 export const CustomStyle = () => <Avatar text='Avatar' server={server} size={56} style={styles.custom} />;

app/containers/Avatar/Avatar.tsx

@@ -1,15 +1,13 @@
 import { memo } from 'react';
 import { View } from 'react-native';
-import { Image } from 'expo-image';
-import { settings as RocketChatSettings } from '@rocket.chat/sdk';
 
 import Emoji from '../markdown/components/emoji/Emoji';
 import { getAvatarURL } from '~/lib/methods/helpers/getAvatarUrl';
-import { headers } from '~/lib/methods/helpers/fetch';
 import { SubscriptionType } from '~/definitions';
 import { type IAvatar } from './interfaces';
 import I18n from '~/i18n';
 import Touch from '../Touch';
+import AvatarImage from './AvatarImage';
 import { isIOS } from '~/lib/methods/helpers/deviceInfo';
 
 const Avatar = memo(
@@ -78,16 +76,7 @@ const Avatar = memo(
 				});
 			}
 
-			image = (
-				<Image
-					style={avatarStyle}
-					source={{
-						uri,
-						headers: RocketChatSettings.customHeaders ?? headers
-					}}
-					priority='high'
-				/>
-			);
+			image = <AvatarImage style={avatarStyle} uri={uri} />;
 		}
 
 		if (onPress) {

app/containers/Avatar/AvatarImage.tsx

@@ -0,0 +1,87 @@
+import { useEffect, useState } from 'react';
+import { StyleSheet, View, type ImageStyle, type ViewStyle } from 'react-native';
+import { Image } from 'expo-image';
+import { settings as RocketChatSettings } from '@rocket.chat/sdk';
+import Animated, { makeMutable, useAnimatedStyle, withRepeat, withTiming } from 'react-native-reanimated';
+
+import { headers } from '~/lib/methods/helpers/fetch';
+import { useTheme } from '~/theme';
+
+interface IAvatarImage {
+	uri?: string;
+	style: ImageStyle;
+}
+
+const styles = StyleSheet.create({
+	skeleton: {
+		...StyleSheet.absoluteFill
+	}
+});
+
+const SKELETON_DELAY = 150;
+
+const pulse = makeMutable(1);
+let activeSkeletons = 0;
+
+const startPulse = () => {
+	if (activeSkeletons++ === 0) {
+		pulse.value = withRepeat(withTiming(0.4, { duration: 800 }), -1, true);
+	}
+};
+
+const stopPulse = () => {
+	if (--activeSkeletons === 0) {
+		pulse.value = 1;
+	}
+};
+
+const Skeleton = ({ borderRadius }: { borderRadius: ViewStyle['borderRadius'] }) => {
+	const { colors } = useTheme();
+
+	useEffect(() => {
+		startPulse();
+		return stopPulse;
+	}, []);
+
+	const animatedStyle = useAnimatedStyle(() => ({ opacity: pulse.value }));
+
+	return (
+		<Animated.View
+			pointerEvents='none'
+			testID='avatar-skeleton'
+			style={[styles.skeleton, { backgroundColor: colors.surfaceSelected, borderRadius }, animatedStyle]}
+		/>
+	);
+};
+
+const AvatarImage = ({ uri, style }: IAvatarImage) => {
+	const { colors } = useTheme();
+	const [loadedUri, setLoadedUri] = useState<string | undefined>();
+	const [delayedUri, setDelayedUri] = useState<string | undefined>();
+	const showSkeleton = loadedUri !== uri && delayedUri === uri;
+
+	useEffect(() => {
+		const timer = setTimeout(() => setDelayedUri(uri), SKELETON_DELAY);
+		return () => clearTimeout(timer);
+	}, [uri]);
+
+	const onEnd = () => setLoadedUri(uri);
+
+	return (
+		<View style={[style, { backgroundColor: colors.surfaceNeutral }]}>
+			<Image
+				style={style}
+				source={{
+					uri,
+					headers: RocketChatSettings.customHeaders ?? headers
+				}}
+				priority='high'
+				onLoad={onEnd}
+				onError={onEnd}
+			/>
+			{showSkeleton ? <Skeleton borderRadius={style.borderRadius} /> : null}
+		</View>
+	);
+};
+
+export default AvatarImage;

app/containers/Avatar/__tests__/AvatarImage.test.tsx

@@ -0,0 +1,46 @@
+import { act, fireEvent, render } from '@testing-library/react-native';
+import { Image } from 'expo-image';
+
+import AvatarImage from '../AvatarImage';
+
+const style = { width: 25, height: 25, borderRadius: 4 };
+const showDelay = () => act(() => jest.advanceTimersByTime(150));
+
+beforeEach(() => jest.useFakeTimers());
+afterEach(() => jest.useRealTimers());
+
+describe('AvatarImage', () => {
+	it('shows the skeleton until the image loads', () => {
+		const { getByTestId, queryByTestId, UNSAFE_getByType } = render(<AvatarImage uri='https://a/1.png' style={style} />);
+		expect(queryByTestId('avatar-skeleton')).toBeNull();
+		showDelay();
+		expect(getByTestId('avatar-skeleton')).toBeTruthy();
+		fireEvent(UNSAFE_getByType(Image), 'load');
+		expect(queryByTestId('avatar-skeleton')).toBeNull();
+	});
+
+	it('hides the skeleton when the image fails to load', () => {
+		const { queryByTestId, UNSAFE_getByType } = render(<AvatarImage uri='https://a/1.png' style={style} />);
+		showDelay();
+		fireEvent(UNSAFE_getByType(Image), 'error');
+		expect(queryByTestId('avatar-skeleton')).toBeNull();
+	});
+
+	it('shows the skeleton again when the uri changes', () => {
+		const { getByTestId, queryByTestId, rerender, UNSAFE_getByType } = render(
+			<AvatarImage uri='https://a/1.png' style={style} />
+		);
+		fireEvent(UNSAFE_getByType(Image), 'load');
+		expect(queryByTestId('avatar-skeleton')).toBeNull();
+		rerender(<AvatarImage uri='https://a/2.png' style={style} />);
+		showDelay();
+		expect(getByTestId('avatar-skeleton')).toBeTruthy();
+	});
+
+	it('never shows the skeleton when the image loads before the delay', () => {
+		const { queryByTestId, UNSAFE_getByType } = render(<AvatarImage uri='https://a/1.png' style={style} />);
+		fireEvent(UNSAFE_getByType(Image), 'load');
+		showDelay();
+		expect(queryByTestId('avatar-skeleton')).toBeNull();
+	});
+});