fix: profile avatar cache busting and refresh mechanism

app/containers/Avatar/Avatar.tsx

@@ -84,12 +84,14 @@ const Avatar = React.memo(
 
 			image = (
 				<Image
+					key={`${uri}-${avatarETag || ''}`}
 					style={avatarStyle}
 					source={{
 						uri,
 						headers: RocketChatSettings.customHeaders
 					}}
 					priority='high'
+					cachePolicy='memory-disk'
 				/>
 			);
 		}

app/containers/Avatar/useAvatarETag.ts

@@ -20,48 +20,46 @@ export const useAvatarETag = ({
 }) => {
 	const [avatarETag, setAvatarETag] = useState<string | undefined>('');
 
-	const isDirect = () => type === 'd';
-
 	useEffect(() => {
-		let subscription: Subscription;
-		if (!avatarETag) {
-			const observeAvatarETag = async () => {
-				const db = database.active;
-				const usersCollection = db.get('users');
-				const subsCollection = db.get('subscriptions');
+		let subscription: Subscription | undefined;
+		let isSubscribed = true;
+		const observeAvatarETag = async () => {
+			const db = database.active;
+			const usersCollection = db.get('users');
+			const subsCollection = db.get('subscriptions');
 
-				let record;
-				try {
-					if (username === text) {
-						const serversDB = database.servers;
-						const userCollections = serversDB.get('users');
-						const user = await userCollections.find(id);
-						record = user;
-					} else if (isDirect()) {
-						const [user] = await usersCollection.query(Q.where('username', text)).fetch();
-						record = user;
-					} else if (rid) {
-						record = await subsCollection.find(rid);
-					}
-				} catch {
-					// Record not found
+			let record;
+			try {
+				if (username === text) {
+					const serversDB = database.servers;
+					const userCollections = serversDB.get('users');
+					const user = await userCollections.find(id);
+					record = user;
+				} else if (type === 'd') {
+					const [user] = await usersCollection.query(Q.where('username', text)).fetch();
+					record = user;
+				} else if (rid) {
+					record = await subsCollection.find(rid);
 				}
+			} catch {
+				// Record not found
+			}
 
-				if (record) {
-					const observable = record.observe() as Observable<TSubscriptionModel | TUserModel | TLoggedUserModel>;
-					subscription = observable.subscribe(r => {
-						setAvatarETag(r.avatarETag);
-					});
-				}
-			};
-			observeAvatarETag();
-			return () => {
-				if (subscription?.unsubscribe) {
-					subscription.unsubscribe();
-				}
-			};
-		}
-	}, [text]);
+			if (record && isSubscribed) {
+				const observable = record.observe() as Observable<TSubscriptionModel | TUserModel | TLoggedUserModel>;
+				subscription = observable.subscribe(r => {
+					setAvatarETag(r.avatarETag);
+				});
+			}
+		};
+		observeAvatarETag();
+		return () => {
+			isSubscribed = false;
+			if (subscription?.unsubscribe) {
+				subscription.unsubscribe();
+			}
+		};
+	}, [username, text, id, rid, type]);
 
 	return { avatarETag };
 };

app/lib/services/connect.ts

@@ -230,6 +230,22 @@ function connect({ server, logoutOnError = false }: { server: string; logoutOnEr
 					} catch {
 						// We can't create a new record since we don't receive the user._id
 					}
+					// Also update logged-in user's avatarETag in servers database if it's their avatar
+					const { user: loggedUser } = store.getState().login;
+					if (loggedUser && loggedUser.username === username) {
+						const serversDB = database.servers;
+						const serversUserCollection = serversDB.get('users');
+						try {
+							const loggedUserRecord = await serversUserCollection.find(loggedUser.id);
+							await serversDB.write(async () => {
+								await loggedUserRecord.update(u => {
+									u.avatarETag = etag;
+								});
+							});
+						} catch {
+							// User record not found in servers database
+						}
+					}
 				} else if (/permissions-changed/.test(eventName)) {
 					const { _id, roles } = ddpMessage.fields.args[1];
 					const db = database.active;