Regression: Room flickering if open a thread (#18004)

Co-authored-by: Diego Sampaio <chinello@gmail.com>

app/ui-utils/client/lib/openRoom.js

@@ -43,7 +43,7 @@ function replaceCenterDomBy(dom) {
 				return resolve([mainNode, roomNode]);
 			}
 			resolve(mainNode);
-		}, 1);
+		}, 0);
 	});
 }
 
@@ -70,6 +70,17 @@ export const openRoom = async function(type, name) {
 			const room = roomTypes.findRoom(type, name, user) || await callMethod('getRoomByTypeAndName', type, name);
 			Rooms.upsert({ _id: room._id }, _.omit(room, '_id'));
 
+
+			if (room._id !== name && type === 'd') { // Redirect old url using username to rid
+				RoomManager.close(type + name);
+				return FlowRouter.go('direct', { rid: room._id }, FlowRouter.current().queryParams);
+			}
+
+
+			if (room._id === Session.get('openedRoom')) {
+				return;
+			}
+
 			if (RoomManager.open(type + name).ready() !== true) {
 				if (settings.get('Accounts_AllowAnonymousRead')) {
 					BlazeLayout.render('main');
@@ -78,17 +89,15 @@ export const openRoom = async function(type, name) {
 				return;
 			}
 
+			BlazeLayout.render('main', {
+				center: 'loading',
+			});
+
 			c.stop();
 
 			if (window.currentTracker) {
 				window.currentTracker = undefined;
 			}
-
-			if (room._id !== name && type === 'd') { // Redirect old url using username to rid
-				RoomManager.close(type + name);
-				return FlowRouter.go('direct', { rid: room._id }, FlowRouter.current().queryParams);
-			}
-
 			const [mainNode, roomDom] = await replaceCenterDomBy(() => RoomManager.getDomOfRoom(type + name, room._id, roomTypes.getConfig(type).mainTemplate));
 
 			if (mainNode) {

app/utils/lib/roomExit.js

@@ -1,43 +1,55 @@
 import { Blaze } from 'meteor/blaze';
-import { BlazeLayout } from 'meteor/kadira:blaze-layout';
+import { Session } from 'meteor/session';
+import { Tracker } from 'meteor/tracker';
+import { FlowRouter } from 'meteor/kadira:flow-router';
 
 import { callbacks } from '../../callbacks';
+import { RoomManager } from '../../ui-utils';
 
+const testIfPathAreEquals = (oldPath = '', newPath = '') => oldPath.replace(/"/g, '') === newPath;
 export const roomExit = function() {
-	// 7370 - Close flex-tab when opening a room on mobile UI
-	if (window.matchMedia('(max-width: 500px)').matches) {
-		const flex = document.querySelector('.flex-tab');
-		if (flex) {
-			const templateData = Blaze.getData(flex);
-			templateData && templateData.tabBar && templateData.tabBar.close();
+	const oldRoute = FlowRouter.current();
+	Tracker.afterFlush(() => {
+		const context = FlowRouter.current();
+
+		if (oldRoute && testIfPathAreEquals(oldRoute.params.name || oldRoute.params.rid, context.params.name || context.params.rid)) {
+			return;
 		}
-	}
-	callbacks.run('roomExit');
-	BlazeLayout.render('main', {
-		center: 'none',
-	});
+		// 7370 - Close flex-tab when opening a room on mobile UI
+		if (window.matchMedia('(max-width: 500px)').matches) {
+			const flex = document.querySelector('.flex-tab');
+			if (flex) {
+				const templateData = Blaze.getData(flex);
+				templateData && templateData.tabBar && templateData.tabBar.close();
+			}
+		}
+		callbacks.run('roomExit');
 
-	if (typeof window.currentTracker !== 'undefined') {
-		window.currentTracker.stop();
-	}
-	const mainNode = document.querySelector('.main-content');
-	if (mainNode == null) {
-		return;
-	}
-	return Array.from(mainNode.children).forEach((child) => {
-		if (child == null) {
+		Session.set('openedRoom', null);
+		RoomManager.openedRoom = null;
+
+		if (typeof window.currentTracker !== 'undefined') {
+			window.currentTracker.stop();
+		}
+		const mainNode = document.querySelector('.main-content');
+		if (mainNode == null) {
 			return;
 		}
-		if (child.classList.contains('room-container')) {
-			const wrapper = child.querySelector('.messages-box > .wrapper');
-			if (wrapper) {
-				if (wrapper.scrollTop >= wrapper.scrollHeight - wrapper.clientHeight) {
-					child.oldScrollTop = 10e10;
-				} else {
-					child.oldScrollTop = wrapper.scrollTop;
+		return Array.from(mainNode.children).forEach((child) => {
+			if (child == null) {
+				return;
+			}
+			if (child.classList.contains('room-container')) {
+				const wrapper = child.querySelector('.messages-box > .wrapper');
+				if (wrapper) {
+					if (wrapper.scrollTop >= wrapper.scrollHeight - wrapper.clientHeight) {
+						child.oldScrollTop = 10e10;
+					} else {
+						child.oldScrollTop = wrapper.scrollTop;
+					}
 				}
+				mainNode.removeChild(child);
 			}
-		}
-		mainNode.removeChild(child);
+		});
 	});
 };

client/reactAdapters.js

@@ -206,6 +206,8 @@ export const renderRouteComponent = (importFn, {
 			Template[routeName] = blazeTemplate;
 		}
 
-		BlazeLayout.render(template, { [region]: routeName });
+		Tracker.afterFlush(() => {
+			BlazeLayout.render(template, { [region]: routeName });
+		});
 	});
 };