fix: stop blinking Room not found before dm creation (#30157)

.changeset/rotten-turtles-agree.md

@@ -0,0 +1,5 @@
+---
+"@rocket.chat/meteor": patch
+---
+
+fix: stop blinking "Room not found" before dm creation

apps/meteor/client/components/message/list/MessageListSkeleton.tsx

@@ -10,11 +10,7 @@ type MessageListSkeletonProps = {
 
 const MessageListSkeleton = ({ messageCount = 2 }: MessageListSkeletonProps): ReactElement => {
 	const widths = useMemo(
-		() =>
-			Array.from(
-				{ length: messageCount },
-				() => `${availablePercentualWidths[Math.floor(Math.random() * availablePercentualWidths.length)]}%`,
-			),
+		() => Array.from({ length: messageCount }, (_, index) => `${availablePercentualWidths[index % availablePercentualWidths.length]}%`),
 		[messageCount],
 	);
 

apps/meteor/client/lib/errors/OldUrlRoomError.ts

@@ -0,0 +1,16 @@
+import type { IRoom, RoomType } from '@rocket.chat/core-typings';
+
+import { RocketChatError } from './RocketChatError';
+
+type OldUrlRoomErrorDetails =
+	| { rid: IRoom['_id'] }
+	| {
+			type: RoomType;
+			reference: string;
+	  };
+
+export class OldUrlRoomError extends RocketChatError<'old-url-format', OldUrlRoomErrorDetails> {
+	constructor(message = 'Old Url Format', details: OldUrlRoomErrorDetails) {
+		super('old-url-format', message, details);
+	}
+}

apps/meteor/client/views/room/RoomOpener.tsx

@@ -7,6 +7,7 @@ import { useTranslation } from 'react-i18next';
 
 import { getErrorMessage } from '../../lib/errorHandling';
 import { NotAuthorizedError } from '../../lib/errors/NotAuthorizedError';
+import { OldUrlRoomError } from '../../lib/errors/OldUrlRoomError';
 import { RoomNotFoundError } from '../../lib/errors/RoomNotFoundError';
 import RoomSkeleton from './RoomSkeleton';
 import { useOpenRoom } from './hooks/useOpenRoom';
@@ -36,6 +37,10 @@ const RoomOpener = ({ type, reference }: RoomOpenerProps): ReactElement => {
 			)}
 			{isError &&
 				(() => {
+					if (error instanceof OldUrlRoomError) {
+						return <RoomSkeleton />;
+					}
+
 					if (error instanceof RoomNotFoundError) {
 						return <RoomNotFound />;
 					}

apps/meteor/client/views/room/RoomRoute.tsx

@@ -1,6 +1,6 @@
 import type { RoomType } from '@rocket.chat/core-typings';
 import { useRouter } from '@rocket.chat/ui-contexts';
-import React, { useEffect, useState } from 'react';
+import React, { useLayoutEffect, useState } from 'react';
 
 import RoomOpener from './RoomOpener';
 
@@ -15,7 +15,7 @@ const RoomRoute = ({ extractOpenRoomParams }: RoomRouteProps) => {
 	const router = useRouter();
 	const [params, setParams] = useState(() => extractOpenRoomParams(router.getRouteParameters()));
 
-	useEffect(
+	useLayoutEffect(
 		() =>
 			router.subscribeToRouteChange(() => {
 				setParams(extractOpenRoomParams(router.getRouteParameters()));

apps/meteor/client/views/room/hooks/useOpenRoom.ts

@@ -6,6 +6,7 @@ import { useRef } from 'react';
 import { roomFields } from '../../../../lib/publishFields';
 import { omit } from '../../../../lib/utils/omit';
 import { NotAuthorizedError } from '../../../lib/errors/NotAuthorizedError';
+import { OldUrlRoomError } from '../../../lib/errors/OldUrlRoomError';
 import { RoomNotFoundError } from '../../../lib/errors/RoomNotFoundError';
 
 export function useOpenRoom({ type, reference }: { type: RoomType; reference: string }) {
@@ -30,7 +31,21 @@ export function useOpenRoom({ type, reference }: { type: RoomType; reference: st
 			try {
 				roomData = await getRoomByTypeAndName(type, reference);
 			} catch (error) {
-				throw new RoomNotFoundError(undefined, { type, reference });
+				if (type !== 'd') {
+					throw new RoomNotFoundError(undefined, { type, reference });
+				}
+
+				try {
+					const { rid } = await createDirectMessage(...reference.split(', '));
+					const { ChatSubscription } = await import('../../../../app/models/client');
+					const { waitUntilFind } = await import('../../../lib/utils/waitUntilFind');
+					await waitUntilFind(() => ChatSubscription.findOne({ rid }));
+					directRoute.push({ rid }, (prev) => prev);
+				} catch (error) {
+					throw new RoomNotFoundError(undefined, { type, reference });
+				}
+
+				throw new OldUrlRoomError(undefined, { type, reference });
 			}
 
 			if (!roomData._id) {
@@ -62,7 +77,8 @@ export function useOpenRoom({ type, reference }: { type: RoomType; reference: st
 			if (room._id !== reference && type === 'd') {
 				// Redirect old url using username to rid
 				await LegacyRoomManager.close(type + reference);
-				throw new RoomNotFoundError(undefined, { rid: room._id });
+				directRoute.push({ rid: room._id }, (prev) => prev);
+				throw new OldUrlRoomError(undefined, { rid: room._id });
 			}
 
 			const { RoomManager } = await import('../../../lib/RoomManager');
@@ -86,22 +102,6 @@ export function useOpenRoom({ type, reference }: { type: RoomType; reference: st
 		},
 		{
 			retry: 0,
-			onError: async (error) => {
-				if (type !== 'd') {
-					return;
-				}
-
-				if (error instanceof RoomNotFoundError && error.details !== undefined && 'rid' in error.details) {
-					directRoute.push({ rid: error.details.rid }, (prev) => prev);
-					return;
-				}
-
-				const { rid } = await createDirectMessage(...reference.split(', '));
-				const { ChatSubscription } = await import('../../../../app/models/client');
-				const { waitUntilFind } = await import('../../../lib/utils/waitUntilFind');
-				await waitUntilFind(() => ChatSubscription.findOne({ rid }));
-				directRoute.push({ rid }, (prev) => prev);
-			},
 		},
 	);
 }