sceyt-chat-react-uikit 1.9.1-beta.13 → 1.9.1-beta.15

package/index.js

@@ -2713,26 +2713,6 @@ var getClient = function getClient() {
   return SceytChatClient;
 };
 
-var hideUserPresence;
-var setHideUserPresence = function setHideUserPresence(callback) {
-  hideUserPresence = callback;
-};
-var usersMap = {};
-var updateUserOnMap = function updateUserOnMap(user) {
-  usersMap[user.id] = user;
-};
-var setUserToMap = function setUserToMap(user) {
-  usersMap[user.id] = user;
-};
-var deleteUserFromMap = function deleteUserFromMap(userId) {
-  delete usersMap[userId];
-};
-var clearUsersMap = function clearUsersMap() {
-  Object.keys(usersMap).forEach(function (userId) {
-    return delete usersMap[userId];
-  });
-};
-
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
 function createCommonjsModule(fn, module) {
@@ -8425,6 +8405,11 @@ var moment = createCommonjsModule(function (module, exports) {
 })));
 });
 
+var hideUserPresence;
+var setHideUserPresence = function setHideUserPresence(callback) {
+  hideUserPresence = callback;
+};
+
 var HiddenMessageProperty;
 (function (HiddenMessageProperty) {
   HiddenMessageProperty["hideAfterChannelChange"] = "hideAfterChannelChange";
@@ -14906,16 +14891,6 @@ var channelSlice = createSlice({
       }
       state.activeChannel = nextChannel;
       state.messageSearchIsOpen = false;
-      if (action.payload.channel.type === DEFAULT_CHANNEL_TYPE.DIRECT) {
-        var ChatClient = getClient();
-        var user = ChatClient.user;
-        var directChannelUser = action.payload.channel.members.find(function (member) {
-          return member.id !== user.id;
-        });
-        if (directChannelUser) {
-          setUserToMap(directChannelUser);
-        }
-      }
     },
     updateChannelData: function updateChannelData(state, action) {
       var _action$payload3 = action.payload,
@@ -15294,7 +15269,9 @@ var memberSlice = createSlice({
       if (!state.channelsMembersMap[channelId]) {
         state.channelsMembersMap[channelId] = [];
       }
-      state.channelsMembersMap[channelId] = Array.from(new Set([].concat(members)));
+      state.channelsMembersMap[channelId] = Array.from(new Map(members.map(function (member) {
+        return [member.id, member];
+      })).values());
     },
     addMembersToList: function addMembersToList(state, action) {
       var _action$payload2 = action.payload,
@@ -15303,7 +15280,13 @@ var memberSlice = createSlice({
       if (!state.channelsMembersMap[channelId]) {
         state.channelsMembersMap[channelId] = [];
       }
-      state.channelsMembersMap[channelId] = Array.from(new Set([].concat(state.channelsMembersMap[channelId], members)));
+      var byId = new Map(state.channelsMembersMap[channelId].map(function (member) {
+        return [member.id, member];
+      }));
+      members.forEach(function (member) {
+        if (!byId.has(member.id)) byId.set(member.id, member);
+      });
+      state.channelsMembersMap[channelId] = Array.from(byId.values());
     },
     updateMembers: function updateMembers(state, action) {
       var _action$payload3 = action.payload,
@@ -15325,11 +15308,12 @@ var memberSlice = createSlice({
     },
     updateMembersPresence: function updateMembersPresence(state, action) {
       var usersMap = action.payload.usersMap;
-      for (var channelId in usersMap) {
-        var _state$channelsMember2;
-        if ((_state$channelsMember2 = state.channelsMembersMap[channelId]) !== null && _state$channelsMember2 !== void 0 && _state$channelsMember2.length) {
-          var _state$channelsMember3;
-          state.channelsMembersMap[channelId] = (_state$channelsMember3 = state.channelsMembersMap[channelId]) === null || _state$channelsMember3 === void 0 ? void 0 : _state$channelsMember3.map(function (member) {
+      for (var channelId in state.channelsMembersMap) {
+        var members = state.channelsMembersMap[channelId];
+        if (members !== null && members !== void 0 && members.some(function (member) {
+          return usersMap[member.id];
+        })) {
+          state.channelsMembersMap[channelId] = members.map(function (member) {
             if (usersMap[member.id]) {
               return _extends({}, member, usersMap[member.id]);
             }
@@ -15349,12 +15333,12 @@ var memberSlice = createSlice({
         channelId = _action$payload4.channelId,
         members = _action$payload4.members;
       if (members.length && state.channelsMembersMap[channelId]) {
-        var _state$channelsMember4;
+        var _state$channelsMember2;
         var removedMembersMap = {};
         for (var i = 0; i < members.length; i++) {
           removedMembersMap[members[i].id] = members[i];
         }
-        state.channelsMembersMap[channelId] = (_state$channelsMember4 = state.channelsMembersMap[channelId]) === null || _state$channelsMember4 === void 0 ? void 0 : _state$channelsMember4.filter(function (member) {
+        state.channelsMembersMap[channelId] = (_state$channelsMember2 = state.channelsMembersMap[channelId]) === null || _state$channelsMember2 === void 0 ? void 0 : _state$channelsMember2.filter(function (member) {
           return !removedMembersMap[member.id];
         });
       }
@@ -15439,7 +15423,6 @@ var LOAD_MORE_USERS = 'LOAD_MORE_USERS';
 var BLOCK_USERS = 'BLOCK_USERS';
 var UNBLOCK_USERS = 'UNBLOCK_USERS';
 var UPDATE_PROFILE = 'UPDATE_PROFILE';
-var CHECK_USER_STATUS = 'CHECK_USER_STATUS';
 var CONNECTION_EVENT_TYPES = {
   TOKEN_WILL_EXPIRE: 'TOKEN_WILL_EXPIRE',
   CONNECTION_STATUS_CHANGED: 'CONNECTION_STATUS_CHANGED',
@@ -15494,6 +15477,9 @@ var userSlice = createSlice({
     updateUserMap: function updateUserMap(state, action) {
       state.updatedUserMap = _extends({}, state.updatedUserMap, action.payload.usersMap);
     },
+    resetUpdatedUserMap: function resetUpdatedUserMap(state) {
+      state.updatedUserMap = {};
+    },
     addUserInMapIfNotExists: function addUserInMapIfNotExists(state, action) {
       var _state$updatedUserMap;
       var user = action.payload.user;
@@ -15534,6 +15520,7 @@ var _userSlice$actions = userSlice.actions,
   addUsers = _userSlice$actions.addUsers,
   setUsersLoadingState = _userSlice$actions.setUsersLoadingState,
   updateUserMap = _userSlice$actions.updateUserMap,
+  resetUpdatedUserMap = _userSlice$actions.resetUpdatedUserMap,
   addUserInMapIfNotExists = _userSlice$actions.addUserInMapIfNotExists,
   setContacts = _userSlice$actions.setContacts,
   updateUserProfile = _userSlice$actions.updateUserProfile,
@@ -16641,12 +16628,6 @@ var unblockUserAC = function unblockUserAC(userIds, callback) {
     }
   };
 };
-var checkUserStatusAC = function checkUserStatusAC() {
-  return {
-    type: CHECK_USER_STATUS,
-    payload: {}
-  };
-};
 var updateProfileAC = function updateProfileAC(user, firstName, lastName, avatarUrl, metadata, avatarFile, presence) {
   return {
     type: UPDATE_PROFILE,
@@ -16706,6 +16687,9 @@ var updateUserStatusOnMapAC = function updateUserStatusOnMapAC(usersMap) {
     usersMap: usersMap
   });
 };
+var resetUpdatedUserMapAC = function resetUpdatedUserMapAC() {
+  return resetUpdatedUserMap();
+};
 var addUserInMapIfNotExistsAC = function addUserInMapIfNotExistsAC(user) {
   return addUserInMapIfNotExists({
     user: user
@@ -17058,9 +17042,6 @@ var usersLoadingStateSelector = function usersLoadingStateSelector(store) {
 var browserTabIsActiveSelector = function browserTabIsActiveSelector(store) {
   return store.UserReducer.browserTabIsActive;
 };
-var usersMapSelector = function usersMapSelector(store) {
-  return store.UserReducer.updatedUserMap;
-};
 
 var jumpFn = null;
 function registerMessageListNavigator(fn) {
@@ -27535,6 +27516,194 @@ function watchForEvents() {
   }, _marked11$1);
 }
 
+var APPLY_PRESENCE_USERS = 'APPLY_PRESENCE_USERS';
+var POLL_INTERVAL = 4000;
+var BATCH_DELAY = 150;
+var PresenceRegistry = /*#__PURE__*/function () {
+  function PresenceRegistry() {
+    _classCallCheck(this, PresenceRegistry);
+    this.counts = new Map();
+    this.pending = new Set();
+    this.dispatch = null;
+    this.client = null;
+    this.connected = false;
+    this.tabActive = true;
+    this.session = 0;
+    this.inFlight = false;
+    this.fullRefreshPending = false;
+    this.lastRequestAt = 0;
+    this.pollTimer = null;
+    this.batchTimer = null;
+  }
+  return _createClass(PresenceRegistry, [{
+    key: "subscribe",
+    value: function subscribe(ids) {
+      var _this = this;
+      var uniqueIds = Array.from(new Set(ids.filter(Boolean)));
+      uniqueIds.forEach(function (id) {
+        var count = _this.counts.get(id) || 0;
+        _this.counts.set(id, count + 1);
+        if (count === 0) _this.pending.add(id);
+      });
+      this.syncTimer();
+      if (this.pending.size) this.scheduleBatch();
+      var removed = false;
+      return function () {
+        if (removed) return;
+        removed = true;
+        uniqueIds.forEach(function (id) {
+          var count = _this.counts.get(id) || 0;
+          if (count <= 1) {
+            _this.counts["delete"](id);
+            _this.pending["delete"](id);
+          } else {
+            _this.counts.set(id, count - 1);
+          }
+        });
+        _this.syncTimer();
+      };
+    }
+  }, {
+    key: "configure",
+    value: function configure(dispatch, client) {
+      this.dispatch = dispatch;
+      this.connected = (client === null || client === void 0 ? void 0 : client.connectionState) === CONNECTION_STATUS.CONNECTED;
+      this.resetSession(client);
+    }
+  }, {
+    key: "resetSession",
+    value: function resetSession(client) {
+      this.session++;
+      this.client = client;
+      this.inFlight = false;
+      this.lastRequestAt = 0;
+      this.pending.clear();
+      this.fullRefreshPending = false;
+      this.clearBatch();
+      this.syncTimer();
+      if (this.canPoll()) this.requestRefresh();
+    }
+  }, {
+    key: "setAvailability",
+    value: function setAvailability(connected, tabActive) {
+      var wasAvailable = this.canPoll();
+      this.connected = connected;
+      this.tabActive = tabActive;
+      this.syncTimer();
+      if (!wasAvailable && this.canPoll() && Date.now() - this.lastRequestAt >= POLL_INTERVAL) {
+        this.requestRefresh();
+      }
+    }
+  }, {
+    key: "dispose",
+    value: function dispose() {
+      this.session++;
+      this.client = null;
+      this.dispatch = null;
+      this.connected = false;
+      this.counts.clear();
+      this.pending.clear();
+      this.fullRefreshPending = false;
+      this.inFlight = false;
+      this.clearBatch();
+      this.syncTimer();
+    }
+  }, {
+    key: "canPoll",
+    value: function canPoll() {
+      return !!this.client && !!this.dispatch && this.connected && this.tabActive && this.counts.size > 0;
+    }
+  }, {
+    key: "clearBatch",
+    value: function clearBatch() {
+      if (this.batchTimer) clearTimeout(this.batchTimer);
+      this.batchTimer = null;
+    }
+  }, {
+    key: "syncTimer",
+    value: function syncTimer() {
+      var _this2 = this;
+      if (this.canPoll()) {
+        if (!this.pollTimer) this.pollTimer = setInterval(function () {
+          return _this2.requestRefresh();
+        }, POLL_INTERVAL);
+      } else {
+        if (this.pollTimer) clearInterval(this.pollTimer);
+        this.pollTimer = null;
+        this.clearBatch();
+        if (!this.connected || !this.tabActive) {
+          this.pending.clear();
+          this.fullRefreshPending = false;
+        }
+      }
+    }
+  }, {
+    key: "scheduleBatch",
+    value: function scheduleBatch() {
+      var _this3 = this;
+      if (!this.canPoll() || this.batchTimer) return;
+      this.batchTimer = setTimeout(function () {
+        _this3.batchTimer = null;
+        _this3.flush();
+      }, BATCH_DELAY);
+    }
+  }, {
+    key: "requestRefresh",
+    value: function requestRefresh() {
+      if (!this.canPoll()) return;
+      this.fullRefreshPending = true;
+      this.clearBatch();
+      this.flush();
+    }
+  }, {
+    key: "flush",
+    value: function flush() {
+      var _this4 = this;
+      if (!this.canPoll() || this.inFlight) return;
+      var ids = this.fullRefreshPending ? Array.from(this.counts.keys()) : Array.from(this.pending).filter(function (id) {
+        return _this4.counts.has(id);
+      });
+      this.fullRefreshPending = false;
+      ids.forEach(function (id) {
+        return _this4.pending["delete"](id);
+      });
+      if (!ids.length) return;
+      var session = this.session;
+      var client = this.client;
+      this.inFlight = true;
+      this.lastRequestAt = Date.now();
+      var failed = false;
+      Promise.resolve().then(function () {
+        return client.getUsers(ids);
+      }).then(function (users) {
+        var _this4$dispatch;
+        if (session !== _this4.session || !_this4.canPoll()) return;
+        var activeUsers = (users || []).filter(function (user) {
+          return (user === null || user === void 0 ? void 0 : user.id) && _this4.counts.has(user.id);
+        });
+        if (activeUsers.length) (_this4$dispatch = _this4.dispatch) === null || _this4$dispatch === void 0 ? void 0 : _this4$dispatch.call(_this4, {
+          type: APPLY_PRESENCE_USERS,
+          payload: {
+            users: activeUsers
+          }
+        });
+      })["catch"](function () {
+        failed = true;
+        if (session === _this4.session) _this4.fullRefreshPending = false;
+      })["finally"](function () {
+        if (session !== _this4.session) return;
+        _this4.inFlight = false;
+        if (failed) {
+          _this4.clearBatch();
+          return;
+        }
+        if (_this4.fullRefreshPending) _this4.flush();else if (_this4.pending.size) _this4.scheduleBatch();
+      });
+    }
+  }]);
+}();
+var presenceRegistry = new PresenceRegistry();
+
 var _marked$3 = /*#__PURE__*/_regenerator().m(applyChannelReadProgress),
   _marked2$3 = /*#__PURE__*/_regenerator().m(confirmDisplayedRead),
   _marked3$2 = /*#__PURE__*/_regenerator().m(createChannel),
@@ -27564,7 +27733,7 @@ var _marked$3 = /*#__PURE__*/_regenerator().m(applyChannelReadProgress),
   _marked25$1 = /*#__PURE__*/_regenerator().m(deleteChannel),
   _marked26$1 = /*#__PURE__*/_regenerator().m(blockChannel),
   _marked27$1 = /*#__PURE__*/_regenerator().m(updateChannel),
-  _marked28$1 = /*#__PURE__*/_regenerator().m(checkUsersStatus),
+  _marked28$1 = /*#__PURE__*/_regenerator().m(applyPresenceUsers),
   _marked29$1 = /*#__PURE__*/_regenerator().m(sendTyping),
   _marked30$1 = /*#__PURE__*/_regenerator().m(sendRecording),
   _marked31$1 = /*#__PURE__*/_regenerator().m(clearHistory),
@@ -30018,52 +30187,54 @@ function updateChannel(action) {
     }
   }, _marked27$1, null, [[0, 9]]);
 }
-function checkUsersStatus() {
-  var _SceytChatClient7, usersForUpdate, updatedUsers, usersToUpdateMap, update, updateData, _t27;
+function applyPresenceUsers(action) {
+  var current, changed, lastActive, _t27;
   return _regenerator().w(function (_context29) {
     while (1) switch (_context29.p = _context29.n) {
       case 0:
         _context29.p = 0;
-        _SceytChatClient7 = getClient();
-        usersForUpdate = Object.keys(usersMap);
         _context29.n = 1;
-        return effects.call(_SceytChatClient7.getUsers, usersForUpdate);
+        return effects.select(function (state) {
+          return state.UserReducer.updatedUserMap;
+        });
       case 1:
-        updatedUsers = _context29.v;
-        usersToUpdateMap = {};
-        update = false;
-        updatedUsers.forEach(function (updatedUser) {
-          var _usersMap$updatedUser, _usersMap$updatedUser2, _usersMap$updatedUser3, _usersMap$updatedUser4, _usersMap$updatedUser5, _usersMap$updatedUser6, _usersMap$updatedUser7, _usersMap$updatedUser8, _usersMap$updatedUser9, _usersMap$updatedUser0;
-          if (updatedUser.presence && (updatedUser.presence.state !== ((_usersMap$updatedUser = usersMap[updatedUser.id]) === null || _usersMap$updatedUser === void 0 ? void 0 : (_usersMap$updatedUser2 = _usersMap$updatedUser.presence) === null || _usersMap$updatedUser2 === void 0 ? void 0 : _usersMap$updatedUser2.state) || updatedUser.presence.status !== ((_usersMap$updatedUser3 = usersMap[updatedUser.id]) === null || _usersMap$updatedUser3 === void 0 ? void 0 : (_usersMap$updatedUser4 = _usersMap$updatedUser3.presence) === null || _usersMap$updatedUser4 === void 0 ? void 0 : _usersMap$updatedUser4.status) || updatedUser.presence.lastActiveAt && new Date(updatedUser.presence.lastActiveAt).getTime() !== new Date(((_usersMap$updatedUser5 = usersMap[updatedUser.id]) === null || _usersMap$updatedUser5 === void 0 ? void 0 : (_usersMap$updatedUser6 = _usersMap$updatedUser5.presence) === null || _usersMap$updatedUser6 === void 0 ? void 0 : _usersMap$updatedUser6.lastActiveAt) || 0).getTime() || updatedUser.avatarUrl !== ((_usersMap$updatedUser7 = usersMap[updatedUser.id]) === null || _usersMap$updatedUser7 === void 0 ? void 0 : _usersMap$updatedUser7.avatarUrl) || updatedUser.firstName !== ((_usersMap$updatedUser8 = usersMap[updatedUser.id]) === null || _usersMap$updatedUser8 === void 0 ? void 0 : _usersMap$updatedUser8.firstName) || updatedUser.lastName !== ((_usersMap$updatedUser9 = usersMap[updatedUser.id]) === null || _usersMap$updatedUser9 === void 0 ? void 0 : _usersMap$updatedUser9.lastName) || !!updatedUser.blocked !== !!((_usersMap$updatedUser0 = usersMap[updatedUser.id]) !== null && _usersMap$updatedUser0 !== void 0 && _usersMap$updatedUser0.blocked))) {
-            updateUserOnMap(updatedUser);
-            usersToUpdateMap[updatedUser.id] = _extends({}, updatedUser, {
-              blocked: !!updatedUser.blocked
+        current = _context29.v;
+        changed = {};
+        lastActive = function lastActive(user) {
+          var _user$presence;
+          return new Date((user === null || user === void 0 ? void 0 : (_user$presence = user.presence) === null || _user$presence === void 0 ? void 0 : _user$presence.lastActiveAt) || 0).getTime();
+        };
+        action.payload.users.forEach(function (user) {
+          var _user$presence2, _previous$presence, _user$presence3, _previous$presence2;
+          var previous = current[user.id];
+          if (!previous || ((_user$presence2 = user.presence) === null || _user$presence2 === void 0 ? void 0 : _user$presence2.state) !== ((_previous$presence = previous.presence) === null || _previous$presence === void 0 ? void 0 : _previous$presence.state) || ((_user$presence3 = user.presence) === null || _user$presence3 === void 0 ? void 0 : _user$presence3.status) !== ((_previous$presence2 = previous.presence) === null || _previous$presence2 === void 0 ? void 0 : _previous$presence2.status) || lastActive(user) !== lastActive(previous) || user.avatarUrl !== previous.avatarUrl || user.firstName !== previous.firstName || user.lastName !== previous.lastName || !!user.blocked !== !!previous.blocked) {
+            changed[user.id] = _extends({}, user, {
+              blocked: !!user.blocked
             });
-            update = true;
           }
         });
-        if (!update) {
-          _context29.n = 5;
+        if (Object.keys(changed).length) {
+          _context29.n = 2;
           break;
         }
-        updateData = JSON.parse(JSON.stringify(usersToUpdateMap));
-        _context29.n = 2;
-        return effects.put(updateMembersPresenceAC(updateData));
+        return _context29.a(2);
       case 2:
         _context29.n = 3;
-        return effects.put(updateUserStatusOnMapAC(updateData));
+        return effects.put(updateUserStatusOnMapAC(changed));
       case 3:
         _context29.n = 4;
-        return effects.put(updateUserStatusOnChannelAC(updateData));
+        return effects.put(updateMembersPresenceAC(changed));
       case 4:
-        updateChannelMemberInAllChannels(Object.values(updateData));
+        _context29.n = 5;
+        return effects.put(updateUserStatusOnChannelAC(changed));
       case 5:
+        updateChannelMemberInAllChannels(Object.values(changed));
         _context29.n = 7;
         break;
       case 6:
         _context29.p = 6;
         _t27 = _context29.v;
-        log.error('ERROR in check user status : ', _t27.message);
+        log.error('ERROR in apply presence users : ', _t27.message);
       case 7:
         return _context29.a(2);
     }
@@ -30305,14 +30476,14 @@ function deleteAllMessages(action) {
   }, _marked32$1, null, [[0, 11]]);
 }
 function joinChannel(action) {
-  var payload, channelId, _SceytChatClient8, channel, joinedChannel, _t32;
+  var payload, channelId, _SceytChatClient7, channel, joinedChannel, _t32;
   return _regenerator().w(function (_context34) {
     while (1) switch (_context34.p = _context34.n) {
       case 0:
         _context34.p = 0;
         payload = action.payload;
         channelId = payload.channelId;
-        _SceytChatClient8 = getClient();
+        _SceytChatClient7 = getClient();
         _context34.n = 1;
         return effects.call(getChannelFromMap, channelId);
       case 1:
@@ -30325,7 +30496,7 @@ function joinChannel(action) {
           break;
         }
         _context34.n = 2;
-        return effects.call(_SceytChatClient8.getChannel, channelId);
+        return effects.call(_SceytChatClient7.getChannel, channelId);
       case 2:
         channel = _context34.v;
       case 3:
@@ -30369,14 +30540,14 @@ function watchForChannelEvents() {
   }, _marked34$1);
 }
 function createChannelInviteKey(action) {
-  var payload, channelId, _SceytChatClient9, channel, inviteKey, _t33;
+  var payload, channelId, _SceytChatClient8, channel, inviteKey, _t33;
   return _regenerator().w(function (_context36) {
     while (1) switch (_context36.p = _context36.n) {
       case 0:
         _context36.p = 0;
         payload = action.payload;
         channelId = payload.channelId;
-        _SceytChatClient9 = getClient();
+        _SceytChatClient8 = getClient();
         _context36.n = 1;
         return effects.call(getChannelFromMap, channelId);
       case 1:
@@ -30389,7 +30560,7 @@ function createChannelInviteKey(action) {
           break;
         }
         _context36.n = 2;
-        return effects.call(_SceytChatClient9.createInviteKey, {
+        return effects.call(_SceytChatClient8.createInviteKey, {
           maxUses: 0,
           expiresAt: 0,
           accessPriorHistory: true
@@ -30549,16 +30720,16 @@ function updateChannelInviteKey(action) {
   }, _marked38$1, null, [[1, 5]]);
 }
 function getChannelByInviteKey(action) {
-  var _channel$, _channel$2, payload, key, _SceytChatClient0, channel, _t37;
+  var _channel$, _channel$2, payload, key, _SceytChatClient9, channel, _t37;
   return _regenerator().w(function (_context40) {
     while (1) switch (_context40.p = _context40.n) {
       case 0:
         _context40.p = 0;
         payload = action.payload;
         key = payload.key;
-        _SceytChatClient0 = getClient();
+        _SceytChatClient9 = getClient();
         _context40.n = 1;
-        return effects.call(_SceytChatClient0.Channel.getChannelByInviteKey, key);
+        return effects.call(_SceytChatClient9.Channel.getChannelByInviteKey, key);
       case 1:
         channel = _context40.v;
         if (!(channel && channel.length > 0 && !((_channel$ = channel[0]) !== null && _channel$ !== void 0 && _channel$.role))) {
@@ -30600,17 +30771,17 @@ function getChannelByInviteKey(action) {
   }, _marked39$1, null, [[0, 6]]);
 }
 function joinChannelWithInviteKey(action) {
-  var payload, key, _SceytChatClient1, user, channel, messageToSend, _t38;
+  var payload, key, _SceytChatClient0, user, channel, messageToSend, _t38;
   return _regenerator().w(function (_context41) {
     while (1) switch (_context41.p = _context41.n) {
       case 0:
         _context41.p = 0;
         payload = action.payload;
         key = payload.key;
-        _SceytChatClient1 = getClient();
-        user = _SceytChatClient1.user;
+        _SceytChatClient0 = getClient();
+        user = _SceytChatClient0.user;
         _context41.n = 1;
-        return effects.call(_SceytChatClient1.Channel.joinChannelByInviteKey, key);
+        return effects.call(_SceytChatClient0.Channel.joinChannelByInviteKey, key);
       case 1:
         channel = _context41.v;
         _context41.n = 2;
@@ -30697,7 +30868,7 @@ function setMessageRetentionPeriod(action) {
   }, _marked41$1, null, [[0, 5]]);
 }
 function getChannelsWithUser(action) {
-  var payload, userId, _SceytChatClient10, channelsQueryBuilder, channelsQuery, channelsData, channels, _t40;
+  var payload, userId, _SceytChatClient1, channelsQueryBuilder, channelsQuery, channelsData, channels, _t40;
   return _regenerator().w(function (_context43) {
     while (1) switch (_context43.p = _context43.n) {
       case 0:
@@ -30710,8 +30881,8 @@ function getChannelsWithUser(action) {
         _context43.p = 2;
         payload = action.payload;
         userId = payload.userId;
-        _SceytChatClient10 = getClient();
-        channelsQueryBuilder = new _SceytChatClient10.ChannelListQueryBuilder();
+        _SceytChatClient1 = getClient();
+        channelsQueryBuilder = new _SceytChatClient1.ChannelListQueryBuilder();
         channelsQueryBuilder.memberCount(0);
         channelsQueryBuilder.setMutualWithUserId(userId);
         channelsQueryBuilder.types([DEFAULT_CHANNEL_TYPE.PRIVATE]);
@@ -30897,7 +31068,7 @@ function ChannelsSaga() {
         return effects.takeLatest(MARK_CHANNEL_AS_UNREAD, markChannelAsUnRead);
       case 25:
         _context45.n = 26;
-        return effects.takeLatest(CHECK_USER_STATUS, checkUsersStatus);
+        return effects.takeEvery(APPLY_PRESENCE_USERS, applyPresenceUsers);
       case 26:
         _context45.n = 27;
         return effects.takeLatest(SEND_TYPING, sendTyping);
@@ -31558,9 +31729,6 @@ function blockUser(action) {
           break;
         }
         user = _step.value;
-        updateUserOnMap(_extends({}, user, {
-          blocked: true
-        }));
         _context.n = 7;
         return effects.put(updateUserStatusOnMapAC((_updateUserStatusOnMa = {}, _updateUserStatusOnMa[user.id] = _extends({}, user, {
           blocked: true
@@ -31665,9 +31833,6 @@ function unblockUser(action) {
         }
         user = _step2.value;
         updateData = JSON.parse(JSON.stringify(user));
-        updateUserOnMap(_extends({}, updateData, {
-          blocked: false
-        }));
         _context2.n = 7;
         return effects.put(updateUserStatusOnMapAC((_updateUserStatusOnMa2 = {}, _updateUserStatusOnMa2[user.id] = _extends({}, updateData, {
           blocked: false
@@ -32967,22 +33132,12 @@ var useColors = function useColors() {
 };
 
 function useUpdatedUser(user) {
-  var dispatch = useDispatch();
-  var usersMap = useSelector(usersMapSelector);
-  React.useEffect(function () {
-    if (user !== null && user !== void 0 && user.id && !usersMap[user.id]) {
-      var _updateUserStatusOnMa;
-      setUserToMap(user);
-      dispatch(updateUserStatusOnMapAC((_updateUserStatusOnMa = {}, _updateUserStatusOnMa[user.id] = user, _updateUserStatusOnMa)));
-      updateChannelMemberInAllChannels([user]);
-    }
-  }, [user === null || user === void 0 ? void 0 : user.id]);
+  var latest = useSelector(function (state) {
+    return user !== null && user !== void 0 && user.id ? state.UserReducer.updatedUserMap[user.id] : undefined;
+  });
   return React.useMemo(function () {
-    if (!(user !== null && user !== void 0 && user.id)) {
-      return user;
-    }
-    return usersMap[user.id] || user;
-  }, [user, usersMap]);
+    return latest ? _extends({}, user, latest) : user;
+  }, [user, latest]);
 }
 
 function setThemeAC(theme) {
@@ -33691,6 +33846,12 @@ var SceytChat = function SceytChat(_ref) {
     hidden = 'webkitHidden';
     visibilityChange = 'webkitvisibilitychange';
   }
+  var isDocumentVisible = function isDocumentVisible() {
+    return hidden ? !document[hidden] : document.visibilityState !== 'hidden';
+  };
+  var _useState2 = React.useState(isDocumentVisible),
+    documentVisible = _useState2[0],
+    setDocumentVisible = _useState2[1];
   var handleDropFile = function handleDropFile(e) {
     e.preventDefault();
     e.stopPropagation();
@@ -33712,12 +33873,15 @@ var SceytChat = function SceytChat(_ref) {
     requestPermissionOnUserInteraction();
   };
   var syncBrowserTabIsActive = function syncBrowserTabIsActive() {
-    var isVisible = hidden ? !document[hidden] : document.visibilityState !== 'hidden';
+    var isVisible = isDocumentVisible();
     var isFocused = typeof document.hasFocus === 'function' ? document.hasFocus() : true;
+    setDocumentVisible(isVisible);
     dispatch(browserTabIsActiveAC(isVisible && isFocused));
   };
   React.useEffect(function () {
     log.info('client is changed.... ', client);
+    dispatch(resetUpdatedUserMapAC());
+    presenceRegistry.configure(dispatch, client || null);
     if (client) {
       cleanupOldAttachmentCache();
       if (client.user && client.user.id) {
@@ -33733,7 +33897,6 @@ var SceytChat = function SceytChat(_ref) {
       clearMessagesMap();
       setActiveChannelId('');
       destroyChannelsMap();
-      clearUsersMap();
       clearDraftMessagesMap();
       clearPersistedDrafts();
       releaseAllBlobUrls();
@@ -33741,8 +33904,11 @@ var SceytChat = function SceytChat(_ref) {
     }
   }, [client]);
   React.useEffect(function () {
-    dispatch(setConnectionStatusAC(client.connectionState));
+    dispatch(setConnectionStatusAC((client === null || client === void 0 ? void 0 : client.connectionState) || ''));
   }, [client === null || client === void 0 ? void 0 : client.connectionState]);
+  React.useEffect(function () {
+    presenceRegistry.setAvailability(connectionStatus === CONNECTION_STATUS.CONNECTED, documentVisible);
+  }, [connectionStatus, documentVisible]);
   React.useEffect(function () {
     if (connectionStatus === CONNECTION_STATUS.CONNECTED) {
       dispatch(getRolesAC());
@@ -33817,7 +33983,7 @@ var SceytChat = function SceytChat(_ref) {
       clearMessagesMap();
       setActiveChannelId('');
       destroyChannelsMap();
-      clearUsersMap();
+      presenceRegistry.dispose();
       releaseAllBlobUrls();
       setBlobUrlEvictListener(null);
       dispatch(destroySession());
@@ -33869,7 +34035,6 @@ var SceytChat = function SceytChat(_ref) {
         var user = _extends({}, contact === null || contact === void 0 ? void 0 : contact.user);
         dispatch(addUserInMapIfNotExistsAC(user));
       }
-      dispatch(checkUserStatusAC());
     }
   }, [contactsMap]);
   React.useEffect(function () {
@@ -34054,68 +34219,124 @@ var SceytChatContainer = function SceytChatContainer(_ref) {
   }));
 };
 
-var updateInterval;
-var presenceHookInstances = 0;
-var stopPresenceInterval = function stopPresenceInterval() {
-  if (updateInterval) {
-    clearInterval(updateInterval);
-    updateInterval = undefined;
+var PRESENCE_ENTER_DELAY = 300;
+var PRESENCE_LEAVE_GRACE = 2000;
+var callbacks = new Map();
+var observer = null;
+var getObserver = function getObserver() {
+  if (typeof IntersectionObserver === 'undefined') return null;
+  if (!observer) {
+    observer = new IntersectionObserver(function (entries) {
+      entries.forEach(function (entry) {
+        var _callbacks$get;
+        (_callbacks$get = callbacks.get(entry.target)) === null || _callbacks$get === void 0 ? void 0 : _callbacks$get.forEach(function (callback) {
+          return callback(entry.isIntersecting);
+        });
+      });
+    });
   }
+  return observer;
 };
-var syncPresenceInterval = function syncPresenceInterval(dispatch, connected) {
-  var shouldRun = presenceHookInstances > 0 && Object.keys(usersMap).length > 0 && connected;
-  if (shouldRun && !updateInterval) {
-    updateInterval = setInterval(function () {
-      dispatch(checkUserStatusAC());
-    }, 4000);
-  } else if (!shouldRun) {
-    stopPresenceInterval();
+var observePresenceRow = function observePresenceRow(element, callback) {
+  var sharedObserver = getObserver();
+  if (!sharedObserver) {
+    callback(true);
+    return function () {
+      return undefined;
+    };
   }
+  var listeners = callbacks.get(element);
+  if (!listeners) {
+    listeners = new Set();
+    callbacks.set(element, listeners);
+    sharedObserver.observe(element);
+  }
+  listeners.add(callback);
+  return function () {
+    var _listeners, _listeners2;
+    (_listeners = listeners) === null || _listeners === void 0 ? void 0 : _listeners["delete"](callback);
+    if (!((_listeners2 = listeners) !== null && _listeners2 !== void 0 && _listeners2.size)) {
+      callbacks["delete"](element);
+      sharedObserver.unobserve(element);
+      if (!callbacks.size) {
+        sharedObserver.disconnect();
+        observer = null;
+      }
+    }
+  };
 };
-function useUpdatePresence(channel, isVisible) {
-  var dispatch = useDispatch();
-  var connectionStatus = useSelector(connectionStatusSelector);
-  var ChatClient = getClient();
-  var user = ChatClient.user;
-  var isDirectChannel = channel.type === DEFAULT_CHANNEL_TYPE.DIRECT;
-  var directChannelUser = isDirectChannel && channel.members.find(function (member) {
-    return member.id !== user.id;
-  });
-  var userId = directChannelUser && directChannelUser.id;
-  if (userId && usersMap[userId] && !isVisible) {
-    deleteUserFromMap(userId);
+function useIsOnScreen(ref, enabled) {
+  if (enabled === void 0) {
+    enabled = true;
   }
+  var _useState = React.useState(false),
+    visible = _useState[0],
+    setVisible = _useState[1];
   React.useEffect(function () {
-    presenceHookInstances++;
-    return function () {
-      presenceHookInstances--;
-      if (presenceHookInstances <= 0) {
-        stopPresenceInterval();
+    if (!enabled || !ref.current) {
+      setVisible(false);
+      return;
+    }
+    var enterTimer = null;
+    var leaveTimer = null;
+    var shown = false;
+    var unobserve = observePresenceRow(ref.current, function (onScreen) {
+      if (onScreen) {
+        if (leaveTimer) clearTimeout(leaveTimer);
+        leaveTimer = null;
+        if (shown || enterTimer) return;
+        enterTimer = setTimeout(function () {
+          enterTimer = null;
+          shown = true;
+          setVisible(true);
+        }, PRESENCE_ENTER_DELAY);
+      } else {
+        if (enterTimer) clearTimeout(enterTimer);
+        enterTimer = null;
+        if (!shown || leaveTimer) return;
+        leaveTimer = setTimeout(function () {
+          leaveTimer = null;
+          shown = false;
+          setVisible(false);
+        }, PRESENCE_LEAVE_GRACE);
       }
+    });
+    return function () {
+      if (enterTimer) clearTimeout(enterTimer);
+      if (leaveTimer) clearTimeout(leaveTimer);
+      unobserve();
     };
-  }, []);
+  }, [ref, enabled]);
+  return enabled && visible;
+}
+
+function usePresenceSubscription(ids, _temp) {
+  var _ref = _temp === void 0 ? {} : _temp,
+    _ref$enabled = _ref.enabled,
+    enabled = _ref$enabled === void 0 ? true : _ref$enabled;
+  var subscriptions = React.useRef(new Map());
+  var idsKey = Array.from(new Set(ids.filter(Boolean))).sort().join("\0");
   React.useEffect(function () {
-    if (userId && isVisible && directChannelUser) {
-      var _usersMap$userId, _usersMap$userId$pres;
-      if (!usersMap[userId]) {
-        setUserToMap(directChannelUser);
-      } else if (((_usersMap$userId = usersMap[userId]) === null || _usersMap$userId === void 0 ? void 0 : (_usersMap$userId$pres = _usersMap$userId.presence) === null || _usersMap$userId$pres === void 0 ? void 0 : _usersMap$userId$pres.state) !== directChannelUser.presence.state) {
-        var _updateUserStatusOnCh;
-        updateUserOnMap(directChannelUser);
-        dispatch(updateUserStatusOnChannelAC((_updateUserStatusOnCh = {}, _updateUserStatusOnCh[directChannelUser.id] = directChannelUser, _updateUserStatusOnCh)));
+    var desired = new Set(enabled ? idsKey.split("\0").filter(Boolean) : []);
+    subscriptions.current.forEach(function (unsubscribe, id) {
+      if (!desired.has(id)) {
+        unsubscribe();
+        subscriptions.current["delete"](id);
       }
-    }
-  });
-  React.useEffect(function () {
-    syncPresenceInterval(dispatch, connectionStatus === CONNECTION_STATUS.CONNECTED);
-  });
+    });
+    desired.forEach(function (id) {
+      if (!subscriptions.current.has(id)) {
+        subscriptions.current.set(id, presenceRegistry.subscribe([id]));
+      }
+    });
+  }, [idsKey, enabled]);
   React.useEffect(function () {
-    var _usersMap$directChann, _usersMap$directChann2;
-    if (directChannelUser && usersMap[directChannelUser.id] && directChannelUser.presence && (directChannelUser.presence.state !== usersMap[directChannelUser.id].state || directChannelUser.presence.lastActiveAt && new Date(directChannelUser.presence.lastActiveAt).getTime() !== new Date(((_usersMap$directChann = usersMap[directChannelUser.id]) === null || _usersMap$directChann === void 0 ? void 0 : (_usersMap$directChann2 = _usersMap$directChann.presence) === null || _usersMap$directChann2 === void 0 ? void 0 : _usersMap$directChann2.lastActiveAt) || 0).getTime())) {
-      var _updateUserStatusOnCh2;
-      dispatch(updateUserStatusOnChannelAC((_updateUserStatusOnCh2 = {}, _updateUserStatusOnCh2[directChannelUser.id] = directChannelUser, _updateUserStatusOnCh2)));
-      updateUserOnMap(directChannelUser);
-    }
+    return function () {
+      subscriptions.current.forEach(function (unsubscribe) {
+        return unsubscribe();
+      });
+      subscriptions.current.clear();
+    };
   }, []);
 }
 
@@ -34508,6 +34729,7 @@ var Channel = function Channel(_ref3) {
   var directChannelUser = isDirectChannel && channel.members.find(function (member) {
     return member.id !== user.id;
   });
+  var currentDirectUser = useUpdatedUser(directChannelUser || null);
   var typingOrRecordingIndicator = useSelector(typingOrRecordingIndicatorArraySelector(channel.id));
   var _useState = React.useState(),
     draftMessageText = _useState[0],
@@ -34535,7 +34757,11 @@ var Channel = function Channel(_ref3) {
   var avatarName = channel.subject || (isDirectChannel && directChannelUser ? directChannelUser.firstName || directChannelUser.id : isSelfChannel ? showPhoneNumber ? "+" + user.id + " (You)" : 'Me' : '');
   var messageAuthorRef = React.useRef(null);
   var messageTimeAndStatusRef = React.useRef(null);
-  useUpdatePresence(channel, true);
+  var presenceRowRef = React.useRef(null);
+  var rowIsOnScreen = useIsOnScreen(presenceRowRef, !!directChannelUser);
+  usePresenceSubscription(directChannelUser ? [directChannelUser.id] : [], {
+    enabled: rowIsOnScreen
+  });
   React.useEffect(function () {
     if (messageTimeAndStatusRef.current) {
       setStatusWidth(messageTimeAndStatusRef.current.offsetWidth);
@@ -34688,6 +34914,7 @@ var Channel = function Channel(_ref3) {
     }
   }, [channel, activeChannel.id, setSelectedChannel]);
   return /*#__PURE__*/React__default.createElement(Container$3, {
+    ref: presenceRowRef,
     backgroundColor: background,
     selectedChannel: channel.id === activeChannel.id,
     selectedChannelLeftBorder: selectedChannelLeftBorder,
@@ -34711,7 +34938,7 @@ var Channel = function Channel(_ref3) {
   }), !!(channel !== null && channel !== void 0 && channel.messageRetentionPeriod) && (/*#__PURE__*/React__default.createElement(DisappearingMessagesBadge, {
     color: accentColor,
     className: 'disappearing-messages-badge'
-  })), isDirectChannel && directChannelUser && hideUserPresence && (hideUserPresence(directChannelUser) ? '' : directChannelUser.presence && directChannelUser.presence.state === USER_PRESENCE_STATUS.ONLINE) && (/*#__PURE__*/React__default.createElement(UserStatus, {
+  })), isDirectChannel && directChannelUser && hideUserPresence && (hideUserPresence(directChannelUser) ? '' : (currentDirectUser === null || currentDirectUser === void 0 ? void 0 : currentDirectUser.presence) && currentDirectUser.presence.state === USER_PRESENCE_STATUS.ONLINE) && (/*#__PURE__*/React__default.createElement(UserStatus, {
     backgroundColor: onlineStatus,
     borderColor: background
   })))), getCustomIconOnAvatar ? getCustomIconOnAvatar({
@@ -35045,8 +35272,15 @@ var ContactItem = function ContactItem(_ref) {
     backgroundHovered = _useColor[THEME_COLORS.BACKGROUND_HOVERED],
     background = _useColor[THEME_COLORS.BACKGROUND];
   var getFromContacts = getShowOnlyContactUsers();
+  var presenceRowRef = React.useRef(null);
+  var rowIsOnScreen = useIsOnScreen(presenceRowRef);
+  usePresenceSubscription([contact.user.id], {
+    enabled: rowIsOnScreen
+  });
+  var currentUser = useUpdatedUser(contact.user);
   var contactUserName = makeUsername(contact, undefined, getFromContacts);
   return /*#__PURE__*/React__default.createElement(Container$4, {
+    ref: presenceRowRef,
     channelsPaddings: channelsPaddings,
     channelsMargin: channelsMargin,
     onClick: function onClick() {
@@ -35056,11 +35290,11 @@ var ContactItem = function ContactItem(_ref) {
   }, showAvatar && (/*#__PURE__*/React__default.createElement(AvatarWrapper$1, null, /*#__PURE__*/React__default.createElement(Avatar, {
     name: contactUserName,
     borderRadius: avatarBorderRadius,
-    image: contact.user.avatarUrl,
+    image: currentUser.avatarUrl,
     size: channelAvatarSize || 50,
     textSize: channelAvatarTextSize || 16,
     setDefaultAvatar: true
-  }), hideUserPresence && (hideUserPresence(contact.user) ? '' : contact.user.presence && contact.user.presence.state === USER_PRESENCE_STATUS.ONLINE) && (/*#__PURE__*/React__default.createElement(UserStatus$1, {
+  }), hideUserPresence && (hideUserPresence(currentUser) ? '' : currentUser.presence && currentUser.presence.state === USER_PRESENCE_STATUS.ONLINE) && (/*#__PURE__*/React__default.createElement(UserStatus$1, {
     backgroundColor: online,
     borderColor: background
   })))), channelListWidth === undefined || channelListWidth >= 280 ? (/*#__PURE__*/React__default.createElement(ChannelInfo$1, {
@@ -35305,6 +35539,109 @@ var CustomLabel = styled__default.label(_templateObject$9 || (_templateObject$9
 });
 var Checkbox = styled__default.input(_templateObject2$8 || (_templateObject2$8 = _taggedTemplateLiteralLoose(["\n  display: none;\n"])));
 
+function useOnScreenUserIds(ref, rowIds, enabled) {
+  if (enabled === void 0) {
+    enabled = true;
+  }
+  var _useState = React.useState([]),
+    visibleIds = _useState[0],
+    setVisibleIds = _useState[1];
+  var activeIds = React.useRef(new Set());
+  var observed = React.useRef(new Map());
+  var visibleCounts = React.useRef(new Map());
+  var removeTimers = React.useRef(new Map());
+  var idsKey = Array.from(new Set(rowIds.filter(Boolean))).join("\0");
+  usePresenceSubscription(visibleIds, {
+    enabled: enabled
+  });
+  var publish = function publish() {
+    return setVisibleIds(Array.from(activeIds.current));
+  };
+  var showRow = function showRow(id) {
+    visibleCounts.current.set(id, (visibleCounts.current.get(id) || 0) + 1);
+    var timer = removeTimers.current.get(id);
+    if (timer) clearTimeout(timer);
+    removeTimers.current["delete"](id);
+    if (!activeIds.current.has(id)) {
+      activeIds.current.add(id);
+      publish();
+    }
+  };
+  var hideRow = function hideRow(id) {
+    var count = (visibleCounts.current.get(id) || 0) - 1;
+    if (count > 0) {
+      visibleCounts.current.set(id, count);
+      return;
+    }
+    visibleCounts.current["delete"](id);
+    if (removeTimers.current.has(id)) return;
+    removeTimers.current.set(id, setTimeout(function () {
+      removeTimers.current["delete"](id);
+      if (!visibleCounts.current.get(id) && activeIds.current["delete"](id)) publish();
+    }, PRESENCE_LEAVE_GRACE));
+  };
+  var releaseRow = function releaseRow(row) {
+    if (row.enterTimer) clearTimeout(row.enterTimer);
+    row.enterTimer = null;
+    if (row.visible) {
+      row.visible = false;
+      hideRow(row.id);
+    }
+  };
+  React.useEffect(function () {
+    var elements = enabled && ref.current ? Array.from(ref.current.querySelectorAll('[data-presence-user-id]')) : [];
+    var currentElements = new Set(elements);
+    observed.current.forEach(function (row, element) {
+      if (!currentElements.has(element)) {
+        row.stop();
+        observed.current["delete"](element);
+        releaseRow(row);
+      }
+    });
+    elements.forEach(function (element) {
+      if (observed.current.has(element)) return;
+      var id = element.dataset.presenceUserId;
+      if (!id) return;
+      var row = {
+        id: id,
+        stop: function stop() {
+          return undefined;
+        },
+        enterTimer: null,
+        visible: false
+      };
+      observed.current.set(element, row);
+      row.stop = observePresenceRow(element, function (onScreen) {
+        if (!onScreen) {
+          releaseRow(row);
+          return;
+        }
+        if (row.visible || row.enterTimer) return;
+        row.enterTimer = setTimeout(function () {
+          row.enterTimer = null;
+          row.visible = true;
+          showRow(id);
+        }, PRESENCE_ENTER_DELAY);
+      });
+    });
+  }, [ref, idsKey, enabled]);
+  React.useEffect(function () {
+    return function () {
+      observed.current.forEach(function (row) {
+        row.stop();
+        if (row.enterTimer) clearTimeout(row.enterTimer);
+      });
+      observed.current.clear();
+      removeTimers.current.forEach(function (timer) {
+        return clearTimeout(timer);
+      });
+      removeTimers.current.clear();
+      visibleCounts.current.clear();
+      activeIds.current.clear();
+    };
+  }, []);
+}
+
 var _path$o;
 function _extends$p() {
   return _extends$p = Object.assign ? Object.assign.bind() : function (n) {
@@ -35504,6 +35841,12 @@ var UsersPopup = function UsersPopup(_ref2) {
   var _useState4 = React.useState([]),
     filteredUsers = _useState4[0],
     setFilteredUsers = _useState4[1];
+  var usersListRef = React.useRef(null);
+  useOnScreenUserIds(usersListRef, filteredUsers.filter(function (user) {
+    return !(actionType === 'addMembers' && memberIds !== null && memberIds !== void 0 && memberIds.includes(user.id));
+  }).map(function (user) {
+    return user.id;
+  }));
   var memberDisplayText = getChannelTypesMemberDisplayTextMap();
   var channelTypeRoleMap = getDefaultRolesByChannelTypesMap();
   var _useState5 = React.useState(false),
@@ -35512,7 +35855,20 @@ var UsersPopup = function UsersPopup(_ref2) {
   var _useState6 = React.useState(false),
     isSelectedMembersScrolling = _useState6[0],
     setIsSelectedMembersScrolling = _useState6[1];
-  var usersMap = useSelector(usersMapSelector);
+  var blockedFlags = useSelector(function (state) {
+    var updatedUserMap = state.UserReducer.updatedUserMap || {};
+    var flags = {};
+    var collect = function collect(id) {
+      if (id && updatedUserMap[id]) flags[id] = !!updatedUserMap[id].blocked;
+    };
+    contactList.forEach(function (contact) {
+      return collect(contact.id);
+    });
+    usersList.forEach(function (user) {
+      return collect(user.id);
+    });
+    return flags;
+  }, reactRedux.shallowEqual);
   var popupTitleText = channel && (memberDisplayText && memberDisplayText[channel.type] ? "Add " + memberDisplayText[channel.type] + "s" : channel.type === DEFAULT_CHANNEL_TYPE.BROADCAST || channel.type === DEFAULT_CHANNEL_TYPE.PUBLIC ? 'Subscribers' : 'Members');
   var handleMembersListScroll = function handleMembersListScroll(event) {
     if (!userSearchValue && event.target.scrollHeight - event.target.scrollTop <= event.target.offsetHeight + 300) {
@@ -35597,9 +35953,8 @@ var UsersPopup = function UsersPopup(_ref2) {
     if (getFromContacts) {
       if (!userSearchValue) {
         var userList = contactList.map(function (cont) {
-          var _usersMap$cont$id;
           return _extends({}, cont.user, {
-            blocked: !!(usersMap !== null && usersMap !== void 0 && (_usersMap$cont$id = usersMap[cont.id]) !== null && _usersMap$cont$id !== void 0 && _usersMap$cont$id.blocked)
+            blocked: !!blockedFlags[cont.id]
           });
         });
         if (actionType === 'createChat') {
@@ -35608,13 +35963,17 @@ var UsersPopup = function UsersPopup(_ref2) {
         setFilteredUsers(userList);
       }
     } else {
-      var _userList = [].concat(usersList);
+      var _userList = usersList.map(function (user) {
+        return blockedFlags[user.id] === undefined ? user : _extends({}, user, {
+          blocked: blockedFlags[user.id]
+        });
+      });
       if (actionType === 'createChat') {
         _userList.unshift(selfUser);
       }
       setFilteredUsers(_userList);
     }
-  }, [contactList, usersList, usersMap]);
+  }, [contactList, usersList, blockedFlags]);
   useDidUpdate(function () {
     if (getFromContacts) {
       if (userSearchValue) {
@@ -35627,16 +35986,14 @@ var UsersPopup = function UsersPopup(_ref2) {
           });
         }
         setFilteredUsers(filteredContacts.map(function (cont) {
-          var _usersMap$cont$id2;
           return _extends({}, cont.user, {
-            blocked: !!(usersMap !== null && usersMap !== void 0 && (_usersMap$cont$id2 = usersMap[cont.id]) !== null && _usersMap$cont$id2 !== void 0 && _usersMap$cont$id2.blocked)
+            blocked: !!blockedFlags[cont.id]
           });
         }));
       } else {
         var userList = contactList.map(function (cont) {
-          var _usersMap$cont$id3;
           return _extends({}, cont.user, {
-            blocked: !!(usersMap !== null && usersMap !== void 0 && (_usersMap$cont$id3 = usersMap[cont.id]) !== null && _usersMap$cont$id3 !== void 0 && _usersMap$cont$id3.blocked)
+            blocked: !!blockedFlags[cont.id]
           });
         });
         if (actionType === 'createChat') {
@@ -35644,14 +36001,17 @@ var UsersPopup = function UsersPopup(_ref2) {
         }
         setFilteredUsers(userList);
       }
-    } else {
+    }
+  }, [userSearchValue, blockedFlags]);
+  useDidUpdate(function () {
+    if (!getFromContacts) {
       dispatch(getUsersAC({
         query: userSearchValue,
         filter: 'all',
         limit: 50
       }));
     }
-  }, [userSearchValue, usersMap]);
+  }, [userSearchValue]);
   React.useEffect(function () {
     if (selectedMembersCont.current) {
       setUsersContHeight(selectedMembersCont.current.offsetHeight);
@@ -35735,6 +36095,7 @@ var UsersPopup = function UsersPopup(_ref2) {
       }
     }));
   }))), /*#__PURE__*/React__default.createElement(MembersContainer, {
+    ref: usersListRef,
     className: isScrolling ? 'show-scrollbar' : '',
     isAdd: actionType !== 'createChat',
     selectedMembersHeight: usersContHeight,
@@ -35757,6 +36118,7 @@ var UsersPopup = function UsersPopup(_ref2) {
     }) >= 0;
     var memberDisplayName = selfUser.id === user.id ? 'Me' : makeUsername(contactsMap[user.id], user, selfUser.id !== user.id && getFromContacts);
     return /*#__PURE__*/React__default.createElement(ListRow, {
+      "data-presence-user-id": user.id,
       hoverBackground: backgroundHovered,
       key: user.id,
       onClick: function onClick() {
@@ -38159,6 +38521,8 @@ function ChatHeader(_ref) {
   var directChannelUser = isDirectChannel && activeChannel.members.find(function (member) {
     return member.id !== user.id;
   });
+  var currentDirectUser = useUpdatedUser(directChannelUser || null);
+  usePresenceSubscription(directChannelUser ? [directChannelUser.id] : []);
   var contactsMap = useSelector(contactsMapSelector);
   var memberDisplayText = getChannelTypesMemberDisplayTextMap();
   var displayMemberText = memberDisplayText && memberDisplayText[activeChannel.type] ? activeChannel.memberCount > 1 ? memberDisplayText[activeChannel.type] + "s" : memberDisplayText[activeChannel.type] : activeChannel.type === DEFAULT_CHANNEL_TYPE.BROADCAST || activeChannel.type === DEFAULT_CHANNEL_TYPE.PUBLIC ? activeChannel.memberCount > 1 ? 'subscribers' : 'subscriber' : activeChannel.memberCount > 1 ? 'members' : 'member';
@@ -38242,7 +38606,7 @@ function ChatHeader(_ref) {
     fontSize: memberInfoFontSize,
     lineHeight: memberInfoLineHeight,
     color: memberInfoTextColor || textSecondary
-  }, hideUserPresence && hideUserPresence(directChannelUser) ? '' : directChannelUser.presence && (directChannelUser.presence.state === USER_PRESENCE_STATUS.ONLINE ? 'Online' : directChannelUser.presence.lastActiveAt && userLastActiveDateFormat(directChannelUser.presence.lastActiveAt)))) : (/*#__PURE__*/React__default.createElement(SubTitle, {
+  }, hideUserPresence && hideUserPresence(currentDirectUser || directChannelUser) ? '' : (currentDirectUser === null || currentDirectUser === void 0 ? void 0 : currentDirectUser.presence) && (currentDirectUser.presence.state === USER_PRESENCE_STATUS.ONLINE ? 'Online' : currentDirectUser.presence.lastActiveAt && userLastActiveDateFormat(currentDirectUser.presence.lastActiveAt)))) : (/*#__PURE__*/React__default.createElement(SubTitle, {
     fontSize: memberInfoFontSize,
     lineHeight: memberInfoLineHeight,
     color: memberInfoTextColor || textSecondary
@@ -42188,9 +42552,15 @@ var ChannelMembersItem = function ChannelMembersItem(_ref) {
     isDirectChannel = _ref.isDirectChannel;
   var _useColor = useColors(),
     textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY];
+  var presenceRef = React.useRef(null);
+  var onScreen = useIsOnScreen(presenceRef, isDirectChannel);
+  usePresenceSubscription(isDirectChannel && directChannelUser ? [directChannelUser.id] : [], {
+    enabled: onScreen
+  });
   var updatedUser = useUpdatedUser(directChannelUser);
   var directChannelUserUpdated = isDirectChannel ? updatedUser : directChannelUser;
   return /*#__PURE__*/React__default.createElement(ChannelMembers, {
+    ref: presenceRef,
     color: textSecondary
   }, isDirectChannel && directChannelUserUpdated ? (hideUserPresence && hideUserPresence(directChannelUserUpdated) ? '' : directChannelUserUpdated.presence && directChannelUserUpdated.presence.state === USER_PRESENCE_STATUS.ONLINE) ? 'Online' : directChannelUserUpdated && directChannelUserUpdated.presence && directChannelUserUpdated.presence.lastActiveAt && userLastActiveDateFormat(directChannelUserUpdated.presence.lastActiveAt) : (channel === null || channel === void 0 ? void 0 : channel.memberCount) + " " + (channel.type === DEFAULT_CHANNEL_TYPE.BROADCAST || channel.type === DEFAULT_CHANNEL_TYPE.PUBLIC ? (channel === null || channel === void 0 ? void 0 : channel.memberCount) > 1 ? 'subscribers' : 'subscriber' : (channel === null || channel === void 0 ? void 0 : channel.memberCount) > 1 ? 'members' : 'member') + " ");
 };
@@ -50228,21 +50598,48 @@ var ReadMoreLink = styled__default.span(_templateObject0$f || (_templateObject0$
 
 var _templateObject$M, _templateObject2$I, _templateObject3$C, _templateObject4$w, _templateObject5$s, _templateObject6$n, _templateObject7$l, _templateObject8$j, _templateObject9$h, _templateObject0$g;
 var reactionsPrevLength = 0;
-function ReactionsPopup(_ref) {
-  var messageId = _ref.messageId,
-    handleReactionsPopupClose = _ref.handleReactionsPopupClose,
-    handleAddDeleteEmoji = _ref.handleAddDeleteEmoji,
-    bottomPosition = _ref.bottomPosition,
-    horizontalPositions = _ref.horizontalPositions,
-    anchorTop = _ref.anchorTop,
-    anchorBottom = _ref.anchorBottom,
-    reactionTotals = _ref.reactionTotals,
-    reactionsDetailsPopupBorderRadius = _ref.reactionsDetailsPopupBorderRadius,
-    reactionsDetailsPopupHeaderItemsStyle = _ref.reactionsDetailsPopupHeaderItemsStyle,
-    _ref$popupZIndex = _ref.popupZIndex,
-    popupZIndex = _ref$popupZIndex === void 0 ? 12 : _ref$popupZIndex,
-    rtlDirection = _ref.rtlDirection,
-    openUserProfile = _ref.openUserProfile;
+var ReactionPresenceItem = function ReactionPresenceItem(_ref) {
+  var reaction = _ref.reaction,
+    currentUserId = _ref.currentUserId,
+    contactsMap = _ref.contactsMap,
+    getFromContacts = _ref.getFromContacts,
+    textPrimary = _ref.textPrimary,
+    textSecondary = _ref.textSecondary,
+    backgroundHovered = _ref.backgroundHovered,
+    onSelect = _ref.onSelect;
+  var updatedUser = useUpdatedUser(reaction.user);
+  return /*#__PURE__*/React__default.createElement(ReactionItem$1, {
+    "data-presence-user-id": reaction.user.id,
+    key: reaction.id,
+    hoverBackgroundColor: backgroundHovered,
+    onClick: onSelect
+  }, /*#__PURE__*/React__default.createElement(AvatarWrapper, null, /*#__PURE__*/React__default.createElement(Avatar, {
+    name: updatedUser.firstName || updatedUser.id,
+    image: updatedUser.avatarUrl,
+    size: 40,
+    textSize: 14,
+    setDefaultAvatar: true
+  })), /*#__PURE__*/React__default.createElement(UserNamePresence$1, null, /*#__PURE__*/React__default.createElement(MemberName$1, {
+    color: textPrimary
+  }, makeUsername(updatedUser.id === currentUserId ? updatedUser : contactsMap[updatedUser.id], updatedUser, getFromContacts)), /*#__PURE__*/React__default.createElement(SubTitle, {
+    color: textSecondary
+  }, updatedUser.presence && updatedUser.presence.state === USER_PRESENCE_STATUS.ONLINE ? 'Online' : updatedUser.presence && updatedUser.presence.lastActiveAt && userLastActiveDateFormat(updatedUser.presence.lastActiveAt))), /*#__PURE__*/React__default.createElement(ReactionKey, null, reaction.key));
+};
+function ReactionsPopup(_ref2) {
+  var messageId = _ref2.messageId,
+    handleReactionsPopupClose = _ref2.handleReactionsPopupClose,
+    handleAddDeleteEmoji = _ref2.handleAddDeleteEmoji,
+    bottomPosition = _ref2.bottomPosition,
+    horizontalPositions = _ref2.horizontalPositions,
+    anchorTop = _ref2.anchorTop,
+    anchorBottom = _ref2.anchorBottom,
+    reactionTotals = _ref2.reactionTotals,
+    reactionsDetailsPopupBorderRadius = _ref2.reactionsDetailsPopupBorderRadius,
+    reactionsDetailsPopupHeaderItemsStyle = _ref2.reactionsDetailsPopupHeaderItemsStyle,
+    _ref2$popupZIndex = _ref2.popupZIndex,
+    popupZIndex = _ref2$popupZIndex === void 0 ? 12 : _ref2$popupZIndex,
+    rtlDirection = _ref2.rtlDirection,
+    openUserProfile = _ref2.openUserProfile;
   var _useColor = useColors(),
     accentColor = _useColor[THEME_COLORS.ACCENT],
     textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
@@ -50252,8 +50649,12 @@ function ReactionsPopup(_ref) {
     surface1 = _useColor[THEME_COLORS.SURFACE_1],
     backgroundHovered = _useColor[THEME_COLORS.BACKGROUND_HOVERED];
   var popupRef = React.useRef(null);
+  var reactionsListRef = React.useRef(null);
   var scoresRef = React.useRef(null);
   var reactions = useSelector(reactionsListSelector, reactRedux.shallowEqual);
+  useOnScreenUserIds(reactionsListRef, reactions.map(function (reaction) {
+    return reaction.user.id;
+  }));
   var messageInputHeight = useSelector(sendMessageInputHeightSelector, reactRedux.shallowEqual);
   var reactionsHasNext = useSelector(reactionsHasNextSelector, reactRedux.shallowEqual);
   var reactionsLoadingState = useSelector(reactionsLoadingStateSelector, reactRedux.shallowEqual);
@@ -50262,10 +50663,10 @@ function ReactionsPopup(_ref) {
   var _useState = React.useState('all'),
     activeTabKey = _useState[0],
     setActiveTabKey = _useState[1];
-  var reactionTotalsSignature = reactionTotals.map(function (_ref2) {
-    var key = _ref2.key,
-      count = _ref2.count,
-      score = _ref2.score;
+  var reactionTotalsSignature = reactionTotals.map(function (_ref3) {
+    var key = _ref3.key,
+      count = _ref3.count,
+      score = _ref3.score;
     return key + ":" + count + ":" + score;
   }).join('|');
   var reactionTotalsSignatureRef = React.useRef(reactionTotalsSignature);
@@ -50423,6 +50824,7 @@ function ReactionsPopup(_ref) {
       backgroundColor: surface1
     }, /*#__PURE__*/React__default.createElement("span", null, /*#__PURE__*/React__default.createElement(TabKey, null, reaction.key), reaction.count));
   }))), /*#__PURE__*/React__default.createElement(ReactionsList, {
+    ref: reactionsListRef,
     className: isScrolling ? 'show-scrollbar' : '',
     scoresHeight: scoresHeight,
     onScroll: handleReactionsListScroll,
@@ -50434,10 +50836,16 @@ function ReactionsPopup(_ref) {
       return setIsScrolling(false);
     }
   }, reactions.map(function (reaction) {
-    return /*#__PURE__*/React__default.createElement(ReactionItem$1, {
+    return /*#__PURE__*/React__default.createElement(ReactionPresenceItem, {
       key: reaction.id,
-      hoverBackgroundColor: backgroundHovered,
-      onClick: function onClick() {
+      reaction: reaction,
+      currentUserId: user.id,
+      contactsMap: contactsMap,
+      getFromContacts: getFromContacts,
+      textPrimary: textPrimary,
+      textSecondary: textSecondary,
+      backgroundHovered: backgroundHovered,
+      onSelect: function onSelect() {
         if (reaction.user.id === user.id) {
           handleAddDeleteEmoji(reaction.key);
         } else {
@@ -50445,17 +50853,7 @@ function ReactionsPopup(_ref) {
           handleReactionsPopupClose();
         }
       }
-    }, /*#__PURE__*/React__default.createElement(AvatarWrapper, null, /*#__PURE__*/React__default.createElement(Avatar, {
-      name: reaction.user.firstName || reaction.user.id,
-      image: reaction.user.avatarUrl,
-      size: 40,
-      textSize: 14,
-      setDefaultAvatar: true
-    })), /*#__PURE__*/React__default.createElement(UserNamePresence$1, null, /*#__PURE__*/React__default.createElement(MemberName$1, {
-      color: textPrimary
-    }, makeUsername(reaction.user.id === user.id ? reaction.user : contactsMap[reaction.user.id], reaction.user, getFromContacts)), /*#__PURE__*/React__default.createElement(SubTitle, {
-      color: textSecondary
-    }, reaction.user.presence && reaction.user.presence.state === USER_PRESENCE_STATUS.ONLINE ? 'Online' : reaction.user.presence && reaction.user.presence.lastActiveAt && userLastActiveDateFormat(reaction.user.presence.lastActiveAt))), /*#__PURE__*/React__default.createElement(ReactionKey, null, reaction.key));
+    });
   }))), document.body);
 }
 var Container$j = styled__default.div(_templateObject$M || (_templateObject$M = _taggedTemplateLiteralLoose(["\n  width: 340px;\n  height: ", "px;\n  //overflow: ", ";\n  overflow: hidden;\n  max-height: 320px;\n  background: ", ";\n  //border: 1px solid #dfe0eb;\n  box-shadow:\n    0 6px 24px -6px rgba(15, 34, 67, 0.12),\n    0px 1px 3px rgba(24, 23, 37, 0.14);\n  box-sizing: border-box;\n  //box-shadow: 0 0 12px rgba(0, 0, 0, 0.08);\n  border-radius: ", ";\n  visibility: ", ";\n  transition: all 0.2s;\n\n  direction: initial;\n  &::after {\n    content: '';\n    position: absolute;\n    width: 12px;\n    height: 12px;\n\n    right: ", ";\n    left: ", ";\n    top: ", ";\n    bottom: ", ";\n    transform: rotate(45deg);\n    box-shadow: ", ";\n    border-radius: 2px;\n    visibility: ", ";\n    transition-delay: 150ms;\n    transition-property: visibility;\n\n    background: ", ";\n  }\n"])), function (props) {
@@ -54412,33 +54810,10 @@ var LENGTH_LIMIT = 75;
 var AtSignMentionsRegex = new RegExp('(^|\\s|\\()(' + '[' + TRIGGERS + ']' + '((?:' + VALID_CHARS + VALID_JOINS + '){0,' + LENGTH_LIMIT + '})' + ')$');
 var ALIAS_LENGTH_LIMIT = 50;
 var AtSignMentionsRegexAliasRegex = new RegExp('(^|\\s|\\()(' + '[' + TRIGGERS + ']' + '((?:' + VALID_CHARS + '){0,' + ALIAS_LENGTH_LIMIT + '})' + ')$');
-var mentionsCache = new Map();
-var membersMap = {};
 function useMentionLookupService(mentionString, contactsMap, userId, members, getFromContacts) {
-  var _useState = React.useState([]),
-    results = _useState[0],
-    setResults = _useState[1];
-  membersMap = React.useMemo(function () {
-    mentionsCache.clear();
-    return members.reduce(function (acc, member) {
-      acc[member.id] = member;
-      return acc;
-    }, {});
-  }, [members]);
-  React.useEffect(function () {
-    var cachedResults = mentionsCache.get(mentionString);
-    if (mentionString == null) {
-      setResults([]);
-      return;
-    }
-    if (cachedResults === null) {
-      return;
-    } else if (cachedResults !== undefined) {
-      setResults(cachedResults);
-      return;
-    }
-    mentionsCache.set(mentionString, null);
-    var searchedMembers = [].concat(members).filter(function (member) {
+  return React.useMemo(function () {
+    if (mentionString === null) return [];
+    return members.filter(function (member) {
       var displayName = makeUsername(contactsMap[member.id], member, getFromContacts);
       return displayName && member.id !== userId && displayName.split(' ').find(function (namePart) {
         return namePart[0] === '~' ? namePart.slice(1).toLowerCase().startsWith(mentionString.toLowerCase()) : namePart.toLowerCase().startsWith(mentionString.toLowerCase());
@@ -54452,10 +54827,7 @@ function useMentionLookupService(mentionString, contactsMap, userId, members, ge
         presence: member.presence
       };
     });
-    mentionsCache.set(mentionString, searchedMembers);
-    setResults(searchedMembers);
-  }, [mentionString, members]);
-  return results;
+  }, [mentionString, members, contactsMap, userId, getFromContacts]);
 }
 function checkForAtSignMentions(text, minMatchLength) {
   var match = AtSignMentionsRegex.exec(text);
@@ -54498,6 +54870,13 @@ function MentionsTypeaheadMenuItem(_ref) {
     onClick = _ref.onClick,
     onMouseEnter = _ref.onMouseEnter,
     option = _ref.option;
+  var currentUser = useUpdatedUser({
+    id: option.id,
+    firstName: option.name,
+    lastName: '',
+    state: '',
+    presence: option.presence
+  });
   var _useColor = useColors(),
     textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
     textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY],
@@ -54507,6 +54886,7 @@ function MentionsTypeaheadMenuItem(_ref) {
     className += ' selected';
   }
   return /*#__PURE__*/React__default.createElement(MemberItem, {
+    "data-presence-user-id": option.id,
     key: option.id,
     tabIndex: -1,
     className: className,
@@ -54527,7 +54907,7 @@ function MentionsTypeaheadMenuItem(_ref) {
     color: textPrimary
   }, option.name), /*#__PURE__*/React__default.createElement(SubTitle, {
     color: textSecondary
-  }, option.presence && option.presence.state === USER_PRESENCE_STATUS.ONLINE ? 'Online' : option.presence && option.presence.lastActiveAt && userLastActiveDateFormat(option.presence.lastActiveAt))));
+  }, currentUser.presence && currentUser.presence.state === USER_PRESENCE_STATUS.ONLINE ? 'Online' : currentUser.presence && currentUser.presence.lastActiveAt && userLastActiveDateFormat(currentUser.presence.lastActiveAt))));
 }
 function MentionsContainer(_ref2) {
   var queryString = _ref2.queryString,
@@ -54553,6 +54933,9 @@ function MentionsContainer(_ref2) {
     return channelsMembersHasNext === null || channelsMembersHasNext === void 0 ? void 0 : channelsMembersHasNext[channelId];
   }, [channelsMembersHasNext === null || channelsMembersHasNext === void 0 ? void 0 : channelsMembersHasNext[channelId]]);
   var mentionsListRef = React.useRef(null);
+  useOnScreenUserIds(mentionsListRef, options.map(function (option) {
+    return option.id;
+  }));
   var contRef = React.useRef();
   var handleKeyDown = function handleKeyDown(event) {
     var code = event.code;
@@ -54653,10 +55036,15 @@ function MentionsPlugin(_ref3) {
     channelId = _ref3.channelId;
   var _useLexicalComposerCo = LexicalComposerContext.useLexicalComposerContext(),
     editor = _useLexicalComposerCo[0];
-  var _useState2 = React.useState(null),
-    queryString = _useState2[0],
-    setQueryString = _useState2[1];
+  var _useState = React.useState(null),
+    queryString = _useState[0],
+    setQueryString = _useState[1];
   var results = useMentionLookupService(queryString, contactsMap, userId, members, getFromContacts);
+  var membersById = React.useMemo(function () {
+    return new Map(members.map(function (member) {
+      return [member.id, member];
+    }));
+  }, [members]);
   var checkForSlashTriggerMatch = LexicalTypeaheadMenuPlugin.useBasicTypeaheadTriggerMatch('/', {
     minLength: 0
   });
@@ -54664,7 +55052,7 @@ function MentionsPlugin(_ref3) {
     return results.map(function (result) {
       return new MentionTypeaheadOption(result.name, result.id, result.presence, result.avatar);
     });
-  }, [results === null || results === void 0 ? void 0 : results.length]);
+  }, [results]);
   var handleOnOpen = function handleOnOpen() {
     var menuElement = document.getElementById('typeahead-menu');
     if (menuElement) {
@@ -54673,7 +55061,7 @@ function MentionsPlugin(_ref3) {
   };
   var onSelectOption = React.useCallback(function (selectedOption, nodeToReplace, closeMenu) {
     if (selectedOption) {
-      setMentionMember(membersMap[selectedOption.id]);
+      setMentionMember(membersById.get(selectedOption.id));
       editor.update(function () {
         var mentionNode = $createMentionNode(_extends({}, selectedOption, {
           name: "@" + selectedOption.name
@@ -54688,7 +55076,7 @@ function MentionsPlugin(_ref3) {
     } else {
       closeMenu();
     }
-  }, [editor, setMentionMember]);
+  }, [editor, setMentionMember, membersById]);
   var checkForMentionMatch = React.useCallback(function (text) {
     var slashMatch = checkForSlashTriggerMatch(text, editor);
     if (slashMatch !== null) {
@@ -63145,27 +63533,38 @@ var QrHint = styled__default.p(_templateObject13$a || (_templateObject13$a = _ta
 });
 
 var _templateObject$1b, _templateObject2$17, _templateObject3$Z, _templateObject4$Q, _templateObject5$M, _templateObject6$F, _templateObject7$B, _templateObject8$y, _templateObject9$s, _templateObject0$p, _templateObject1$j, _templateObject10$h, _templateObject11$e, _templateObject12$d, _templateObject13$b;
-var Members = function Members(_ref) {
+var MemberPresence = function MemberPresence(_ref) {
+  var member = _ref.member,
+    color = _ref.color,
+    fontSize = _ref.fontSize;
+  var currentMember = useUpdatedUser(member);
+  return /*#__PURE__*/React__default.createElement(SubTitle, {
+    color: color,
+    margin: '1px 0 0',
+    fontSize: fontSize
+  }, currentMember.presence && currentMember.presence.state === USER_PRESENCE_STATUS.ONLINE ? 'Online' : currentMember.presence && currentMember.presence.lastActiveAt && userLastActiveDateFormat(currentMember.presence.lastActiveAt));
+};
+var Members = function Members(_ref2) {
   var _members$find;
-  var channel = _ref.channel,
-    members = _ref.members,
-    checkActionPermission = _ref.checkActionPermission,
-    CustomLoadErrorState = _ref.CustomLoadErrorState,
-    _ref$showChangeMember = _ref.showChangeMemberRole,
-    showChangeMemberRole = _ref$showChangeMember === void 0 ? true : _ref$showChangeMember,
-    _ref$showMakeMemberAd = _ref.showMakeMemberAdmin,
-    showMakeMemberAdmin = _ref$showMakeMemberAd === void 0 ? true : _ref$showMakeMemberAd,
-    _ref$showKickMember = _ref.showKickMember,
-    showKickMember = _ref$showKickMember === void 0 ? true : _ref$showKickMember,
-    _ref$showKickAndBlock = _ref.showKickAndBlockMember,
-    showKickAndBlockMember = _ref$showKickAndBlock === void 0 ? true : _ref$showKickAndBlock,
-    hoverBackgroundColor = _ref.hoverBackgroundColor,
-    addMemberFontSize = _ref.addMemberFontSize,
-    addMemberIcon = _ref.addMemberIcon,
-    memberNameFontSize = _ref.memberNameFontSize,
-    memberAvatarSize = _ref.memberAvatarSize,
-    memberPresenceFontSize = _ref.memberPresenceFontSize,
-    QRCodeIcon = _ref.QRCodeIcon;
+  var channel = _ref2.channel,
+    members = _ref2.members,
+    checkActionPermission = _ref2.checkActionPermission,
+    CustomLoadErrorState = _ref2.CustomLoadErrorState,
+    _ref2$showChangeMembe = _ref2.showChangeMemberRole,
+    showChangeMemberRole = _ref2$showChangeMembe === void 0 ? true : _ref2$showChangeMembe,
+    _ref2$showMakeMemberA = _ref2.showMakeMemberAdmin,
+    showMakeMemberAdmin = _ref2$showMakeMemberA === void 0 ? true : _ref2$showMakeMemberA,
+    _ref2$showKickMember = _ref2.showKickMember,
+    showKickMember = _ref2$showKickMember === void 0 ? true : _ref2$showKickMember,
+    _ref2$showKickAndBloc = _ref2.showKickAndBlockMember,
+    showKickAndBlockMember = _ref2$showKickAndBloc === void 0 ? true : _ref2$showKickAndBloc,
+    hoverBackgroundColor = _ref2.hoverBackgroundColor,
+    addMemberFontSize = _ref2.addMemberFontSize,
+    addMemberIcon = _ref2.addMemberIcon,
+    memberNameFontSize = _ref2.memberNameFontSize,
+    memberAvatarSize = _ref2.memberAvatarSize,
+    memberPresenceFontSize = _ref2.memberPresenceFontSize,
+    QRCodeIcon = _ref2.QRCodeIcon;
   var _useColor = useColors(),
     accentColor = _useColor[THEME_COLORS.ACCENT],
     textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
@@ -63176,6 +63575,10 @@ var Members = function Members(_ref) {
     iconInactive = _useColor[THEME_COLORS.ICON_INACTIVE],
     surface1 = _useColor[THEME_COLORS.SURFACE_1];
   var dispatch = useDispatch();
+  var membersListRef = React__default.useRef(null);
+  useOnScreenUserIds(membersListRef, members.map(function (member) {
+    return member.id;
+  }));
   var getFromContacts = getShowOnlyContactUsers();
   var _useState = React.useState(null),
     selectedMember = _useState[0],
@@ -63324,7 +63727,9 @@ var Members = function Members(_ref) {
     var myPriority = rolePriority(currentUserRole);
     return typeof memberPriority === 'number' && typeof myPriority === 'number' && memberPriority < myPriority;
   };
-  return /*#__PURE__*/React__default.createElement(Container$t, null, /*#__PURE__*/React__default.createElement(ActionsMenu$1, null, /*#__PURE__*/React__default.createElement(MembersList, null, checkActionPermission('addMember') && (/*#__PURE__*/React__default.createElement(MemberItem$1, {
+  return /*#__PURE__*/React__default.createElement(Container$t, null, /*#__PURE__*/React__default.createElement(ActionsMenu$1, null, /*#__PURE__*/React__default.createElement(MembersList, {
+    ref: membersListRef
+  }, checkActionPermission('addMember') && (/*#__PURE__*/React__default.createElement(MemberItem$1, {
     key: 1,
     onClick: handleAddMemberPopup,
     color: textPrimary,
@@ -63356,10 +63761,11 @@ var Members = function Members(_ref) {
       width: '35%',
       height: '12px'
     })));
-  }), !!members.length && members.map(function (member, index) {
+  }), !!members.length && members.map(function (member) {
     return /*#__PURE__*/React__default.createElement(MemberItem$1, {
+      "data-presence-user-id": member.id,
       addMemberIconColor: iconInactive,
-      key: member.id + index,
+      key: member.id,
       color: textPrimary,
       hoverBackground: hoverBackgroundColor || backgroundHovered,
       onClick: function onClick() {
@@ -63380,11 +63786,11 @@ var Members = function Members(_ref) {
     }, "Owner")) : member.role === 'admin' ? (/*#__PURE__*/React__default.createElement(RoleBadge, {
       color: accentColor,
       backgroundColor: backgroundFocused
-    }, "Admin")) : ''), /*#__PURE__*/React__default.createElement(SubTitle, {
+    }, "Admin")) : ''), /*#__PURE__*/React__default.createElement(MemberPresence, {
+      member: member,
       color: textSecondary,
-      margin: '1px 0 0',
       fontSize: memberPresenceFontSize
-    }, member.presence && member.presence.state === USER_PRESENCE_STATUS.ONLINE ? 'Online' : member.presence && member.presence.lastActiveAt && userLastActiveDateFormat(member.presence.lastActiveAt))), !noMemberEditPermissions && member.role !== 'owner' && currentUserRole && outranks(member.role) && member.id !== user.id && (/*#__PURE__*/React__default.createElement(DropDown, {
+    })), !noMemberEditPermissions && member.role !== 'owner' && currentUserRole && outranks(member.role) && member.id !== user.id && (/*#__PURE__*/React__default.createElement(DropDown, {
       isSelect: true,
       forceClose: !!(closeMenu && closeMenu !== member.id),
       watchToggleState: function watchToggleState(state) {
@@ -64146,6 +64552,8 @@ var Details = function Details(_ref) {
   var directChannelUser = isDirectChannel && (activeChannel.members.find(function (member) {
     return member.id !== user.id;
   }) || (activeChannel === null || activeChannel === void 0 ? void 0 : (_activeChannel$member = activeChannel.members) === null || _activeChannel$member === void 0 ? void 0 : _activeChannel$member[0]));
+  var currentDirectUser = useUpdatedUser(directChannelUser || null);
+  usePresenceSubscription(isDirectChannel && !isSelfChannel && directChannelUser ? [directChannelUser.id] : []);
   var handleMembersListScroll = function handleMembersListScroll(event) {
     if (event.target.scrollTop >= event.target.scrollHeight - event.target.offsetHeight - 100) {
       if (activeTab === channelDetailsTabs.member) {
@@ -64303,7 +64711,7 @@ var Details = function Details(_ref) {
   }, "+" + directChannelUser.id, copiedPhone && (/*#__PURE__*/React__default.createElement(CopiedTooltip, {
     backgroundColor: tooltipBackground,
     color: textOnPrimary
-  }, "Copied")))) : hideUserPresence && directChannelUser && hideUserPresence(directChannelUser) ? '' : directChannelUser && directChannelUser.presence && (directChannelUser.presence.state === USER_PRESENCE_STATUS.ONLINE ? 'Online' : directChannelUser.presence.lastActiveAt && userLastActiveDateFormat(directChannelUser.presence.lastActiveAt)))) : (/*#__PURE__*/React__default.createElement(SubTitle, {
+  }, "Copied")))) : hideUserPresence && currentDirectUser && hideUserPresence(currentDirectUser) ? '' : currentDirectUser && currentDirectUser.presence && (currentDirectUser.presence.state === USER_PRESENCE_STATUS.ONLINE ? 'Online' : currentDirectUser.presence.lastActiveAt && userLastActiveDateFormat(currentDirectUser.presence.lastActiveAt)))) : (/*#__PURE__*/React__default.createElement(SubTitle, {
     color: textSecondary,
     fontSize: channelMembersFontSize,
     lineHeight: channelMembersLineHeight