Regression: Unread Threads Header and List (#21816)

client/components/Message/Attachments/components/Image.tsx

@@ -59,7 +59,6 @@ const Image: FC<ImageProps> = ({ previewUrl, loadImage = true, setLoadImage, src
 	return (
 		<ImageBox
 			onError={setHasError}
-			box
 			{...(previewUrl && ({ style: { background, boxSizing: 'content-box' } } as any))}
 			{...dimensions}
 			is='picture'

client/providers/createReactiveSubscriptionFactory.ts

@@ -12,14 +12,17 @@ export const createReactiveSubscriptionFactory = <T>(
 
 	const callbacks = new Set<Unsubscribe>();
 
-	let currentValue: T;
+	let currentValue = computeCurrentValue();
 
-	const computation = Tracker.autorun(() => {
+	let computation: Tracker.Computation | undefined;
+	const timeout = setTimeout(() => {
+		computation = Tracker.autorun(() => {
 			currentValue = computeCurrentValue();
 			callbacks.forEach((callback) => {
 				callback();
 			});
 		});
+	}, 0);
 
 	return {
 		getCurrentValue: (): T => currentValue,
@@ -27,10 +30,12 @@ export const createReactiveSubscriptionFactory = <T>(
 			callbacks.add(callback);
 
 			return (): void => {
+				clearTimeout(timeout);
+
 				callbacks.delete(callback);
 
 				if (callbacks.size === 0) {
-					computation.stop();
+					computation && computation.stop();
 				}
 			};
 		},

client/views/room/contextualBar/Threads/ThreadList.js

@@ -1,6 +1,6 @@
 import { Box, Icon, TextInput, Select, Margins, Callout } from '@rocket.chat/fuselage';
 import { useResizeObserver, useMutableCallback, useAutoFocus } from '@rocket.chat/fuselage-hooks';
-import React, { useMemo, useRef } from 'react';
+import React, { useMemo } from 'react';
 import { Virtuoso } from 'react-virtuoso';
 
 import ThreadComponent from '../../../../../app/threads/client/components/ThreadComponent';
@@ -35,7 +35,6 @@ function ThreadList({
 	setText,
 }) {
 	const showRealNames = useSetting('UI_Use_Real_Name');
-	const threadsRef = useRef();
 
 	const t = useTranslation();
 	const inputRef = useAutoFocus(true);
@@ -60,8 +59,6 @@ function ThreadList({
 		[t],
 	);
 
-	threadsRef.current = threads;
-
 	const { ref, contentBoxSize: { inlineSize = 378, blockSize = 1 } = {} } = useResizeObserver({
 		debounceDelay: 200,
 	});

client/views/room/contextualBar/Threads/useThreadsList.ts

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useMemo } from 'react';
 
 import { getConfig } from '../../../../../app/ui-utils/client/config';
 import { IUser } from '../../../../../definition/IUser';
@@ -15,13 +15,7 @@ export const useThreadsList = (
 	initialItemCount: number;
 	loadMoreItems: (start: number, end: number) => void;
 } => {
-	const [threadsList] = useState(() => new ThreadsList(options));
-
-	useEffect(() => {
-		if (threadsList.options !== options) {
-			threadsList.updateFilters(options);
-		}
-	}, [threadsList, options]);
+	const threadsList = useMemo(() => new ThreadsList(options), [options]);
 
 	const getThreadsList = useEndpoint('GET', 'chat.getThreadsList');