stream-chat-react-native-core 5.23.0-beta.1 → 5.23.0-beta.3

package/lib/commonjs/components/Channel/Channel.js

@@ -144,7 +144,7 @@ var debounceOptions = {
   trailing: true
 };
 var ChannelWithContext = function ChannelWithContext(props) {
-  var _client$user, _channel$data, _ref27, _ref28;
+  var _client$user, _channel$data, _ref28, _ref29;
   var additionalKeyboardAvoidingViewProps = props.additionalKeyboardAvoidingViewProps,
     additionalTextInputProps = props.additionalTextInputProps,
     additionalTouchableProps = props.additionalTouchableProps,
@@ -443,11 +443,10 @@ var ChannelWithContext = function ChannelWithContext(props) {
     _useState28 = (0, _slicedToArray2["default"])(_useState27, 2),
     hasNoMoreRecentMessagesToLoad = _useState28[0],
     setHasNoMoreRecentMessagesToLoad = _useState28[1];
-  var messagesRef = (0, _react.useRef)(messages);
-  messagesRef.current = messages;
   var _useTargetedMessage = (0, _useTargetedMessage2.useTargetedMessage)(),
     setTargetedMessage = _useTargetedMessage.setTargetedMessage,
     targetedMessage = _useTargetedMessage.targetedMessage;
+  var hasOverlappingRecentMessagesRef = (0, _react.useRef)(false);
   var uploadAbortControllerRef = (0, _react.useRef)(new Map());
   var channelId = (channel == null ? void 0 : channel.id) || '';
   (0, _react.useEffect)(function () {
@@ -516,7 +515,9 @@ var ChannelWithContext = function ChannelWithContext(props) {
   }, defaultThrottleInterval, throttleOptions)).current;
   var copyMessagesState = (0, _react.useRef)((0, _throttle["default"])(function () {
     if (channel) {
+      clearInterval(mergeSetsIntervalRef.current);
       setMessages((0, _toConsumableArray2["default"])(channel.state.messages));
+      restartSetsMergeFuncRef.current();
     }
   }, newMessageStateUpdateThrottleInterval, throttleOptions)).current;
   var copyTypingState = (0, _react.useRef)((0, _throttle["default"])(function () {
@@ -584,64 +585,84 @@ var ChannelWithContext = function ChannelWithContext(props) {
       unsubscribe = _client$on.unsubscribe;
     return unsubscribe;
   }, [channelId]);
+  (0, _react.useEffect)(function () {
+    var handleEvent = function handleEvent(event) {
+      if (channel.cid === event.cid) copyChannelState();
+    };
+    var _client$on2 = client.on('notification.mark_read', handleEvent),
+      unsubscribe = _client$on2.unsubscribe;
+    return unsubscribe;
+  }, []);
   var channelQueryCallRef = (0, _react.useRef)(function () {
     var _ref = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee(queryCall) {
       var onAfterQueryCall,
-        targetMessageId,
-        limit,
+        scrollToMessageId,
         currentMessages,
-        targetMessageIndex,
-        startIndex,
+        hadCurrentLatestMessages,
+        scrollToMessageIndex,
+        limitAfter,
+        currentLength,
+        noOfMessagesAfter,
         endIndex,
-        hadLatestMessages,
-        recentMessage,
-        stillHasLatestMessages,
-        areLatestMessages,
+        restOfMessages,
+        latestSet,
+        hasLatestMessages,
         _args = arguments;
       return _regenerator["default"].wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
             onAfterQueryCall = _args.length > 1 && _args[1] !== undefined ? _args[1] : undefined;
-            targetMessageId = _args.length > 2 && _args[2] !== undefined ? _args[2] : undefined;
+            scrollToMessageId = _args.length > 2 && _args[2] !== undefined ? _args[2] : undefined;
             setError(false);
             _context.prev = 3;
-            _context.next = 6;
+            clearInterval(mergeSetsIntervalRef.current);
+            _context.next = 7;
             return queryCall();
-          case 6:
+          case 7:
             setLastRead(new Date());
             setHasMore(true);
-            if (channel && targetMessageId) {
-              limit = 30 * 3;
-              currentMessages = channel.state.messages;
-              if (currentMessages.length > limit) {
-                targetMessageIndex = currentMessages.findIndex(function (_ref2) {
-                  var id = _ref2.id;
-                  return id === targetMessageId;
-                });
-                startIndex = Math.max(targetMessageIndex - Math.floor(limit / 2), 0);
-                endIndex = targetMessageIndex + Math.floor(limit / 2);
-                if (endIndex > currentMessages.length) {
-                  startIndex = Math.max(startIndex - (endIndex - currentMessages.length - 1) - 1, 0);
+            currentMessages = channel.state.messages;
+            hadCurrentLatestMessages = currentMessages.length > 0 && currentMessages === channel.state.latestMessages;
+            if (typeof scrollToMessageId === 'function') {
+              scrollToMessageId = scrollToMessageId();
+            }
+            scrollToMessageIndex = scrollToMessageId ? currentMessages.findIndex(function (_ref2) {
+              var id = _ref2.id;
+              return id === scrollToMessageId;
+            }) : -1;
+            if (channel && scrollToMessageIndex !== -1) {
+              limitAfter = 4;
+              currentLength = currentMessages.length;
+              if (scrollToMessageIndex !== -1) {
+                noOfMessagesAfter = currentLength - scrollToMessageIndex - 1;
+                if (noOfMessagesAfter > limitAfter) {
+                  endIndex = scrollToMessageIndex + limitAfter;
+                  channel.state.clearMessages();
+                  channel.state.messages = currentMessages.slice(0, endIndex + 1);
+                  splitLatestCurrentMessageSetRef.current();
+                  restOfMessages = currentMessages.slice(endIndex + 1);
+                  if (hadCurrentLatestMessages) {
+                    latestSet = channel.state.messageSets.find(function (set) {
+                      return set.isLatest;
+                    });
+                    if (latestSet) {
+                      latestSet.messages = restOfMessages;
+                      hasOverlappingRecentMessagesRef.current = true;
+                    }
+                  }
                 }
-                hadLatestMessages = channel.state.messages === channel.state.latestMessages;
-                recentMessage = currentMessages[currentMessages.length - 1];
-                channel.state.clearMessages();
-                channel.state.messages = currentMessages.slice(startIndex, endIndex);
-                stillHasLatestMessages = hadLatestMessages && channel.state.messages[channel.state.messages.length - 1] === recentMessage;
-                setHasNoMoreRecentMessagesToLoad(stillHasLatestMessages);
-                channel.state.setIsUpToDate(stillHasLatestMessages);
               }
-            } else {
-              areLatestMessages = channel.state.messages === channel.state.latestMessages;
-              setHasNoMoreRecentMessagesToLoad(areLatestMessages);
-              channel.state.setIsUpToDate(areLatestMessages);
             }
+            hasLatestMessages = channel.state.latestMessages.length > 0;
+            channel.state.setIsUpToDate(hasLatestMessages);
+            setHasNoMoreRecentMessagesToLoad(hasLatestMessages);
             copyChannelState();
+            restartSetsMergeFuncRef.current();
             onAfterQueryCall == null ? void 0 : onAfterQueryCall();
-            _context.next = 18;
+            _context.next = 27;
             break;
-          case 13:
-            _context.prev = 13;
+          case 22:
+            _context.prev = 22;
             _context.t0 = _context["catch"](3);
             if (_context.t0 instanceof Error) {
               setError(_context.t0);
@@ -650,11 +671,11 @@ var ChannelWithContext = function ChannelWithContext(props) {
             }
             setLoading(false);
             setLastRead(new Date());
-          case 18:
+          case 27:
           case "end":
             return _context.stop();
         }
-      }, _callee, null, [[3, 13]]);
+      }, _callee, null, [[3, 22]]);
     }));
     return function (_x) {
       return _ref.apply(this, arguments);
@@ -664,63 +685,102 @@ var ChannelWithContext = function ChannelWithContext(props) {
     if (!channel) return;
     var unreadMessageIdToScrollTo;
     return channelQueryCallRef.current((0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee2() {
-      var lastReadDate, _channel$state$messag;
+      var unreadCount, isLatestMessageSetShown, lastReadDate, _res$messages$find, res;
       return _regenerator["default"].wrap(function _callee2$(_context2) {
         while (1) switch (_context2.prev = _context2.next) {
           case 0:
-            setLoading(true);
+            unreadCount = channel.countUnread();
+            if (!(unreadCount === 0)) {
+              _context2.next = 3;
+              break;
+            }
+            return _context2.abrupt("return");
+          case 3:
+            isLatestMessageSetShown = !!channel.state.messageSets.find(function (set) {
+              return set.isCurrent && set.isLatest;
+            });
+            if (!(isLatestMessageSetShown && unreadCount <= channel.state.messages.length)) {
+              _context2.next = 7;
+              break;
+            }
+            unreadMessageIdToScrollTo = channel.state.messages[channel.state.messages.length - unreadCount].id;
+            return _context2.abrupt("return");
+          case 7:
             lastReadDate = channel.lastRead();
             if (!lastReadDate) {
-              _context2.next = 8;
+              _context2.next = 17;
               break;
             }
-            _context2.next = 5;
+            setLoading(true);
+            _context2.next = 12;
             return channel.query({
               messages: {
                 created_at_around: lastReadDate,
                 limit: 30
-              }
+              },
+              watch: true
             }, 'new');
-          case 5:
-            unreadMessageIdToScrollTo = (_channel$state$messag = channel.state.messages.find(function (m) {
-              return lastReadDate < m.created_at;
-            })) == null ? void 0 : _channel$state$messag.id;
-            _context2.next = 10;
+          case 12:
+            res = _context2.sent;
+            unreadMessageIdToScrollTo = (_res$messages$find = res.messages.find(function (m) {
+              return lastReadDate < (m.created_at ? new Date(m.created_at) : new Date());
+            })) == null ? void 0 : _res$messages$find.id;
+            if (unreadMessageIdToScrollTo) {
+              channel.state.loadMessageIntoState(unreadMessageIdToScrollTo);
+            }
+            _context2.next = 19;
             break;
-          case 8:
-            _context2.next = 10;
-            return channel.state.loadMessageIntoState('latest');
-          case 10:
+          case 17:
+            _context2.next = 19;
+            return loadLatestMessagesRef.current();
+          case 19:
           case "end":
             return _context2.stop();
         }
       }, _callee2);
-    })), function () {
-      if (unreadMessageIdToScrollTo) {
-        setTargetedMessage(unreadMessageIdToScrollTo);
-      }
+    })), undefined, function () {
+      return unreadMessageIdToScrollTo;
     });
   };
   var loadChannelAroundMessage = function loadChannelAroundMessage(_ref4) {
     var messageIdToLoadAround = _ref4.messageId;
     return channelQueryCallRef.current((0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee3() {
+      var currentMessageSet, recentCurrentSetMsgId;
       return _regenerator["default"].wrap(function _callee3$(_context3) {
         while (1) switch (_context3.prev = _context3.next) {
           case 0:
             setLoading(true);
             if (!messageIdToLoadAround) {
-              _context3.next = 6;
+              _context3.next = 12;
               break;
             }
-            _context3.next = 4;
+            setMessages([]);
+            _context3.next = 5;
             return channel.state.loadMessageIntoState(messageIdToLoadAround);
-          case 4:
-            _context3.next = 8;
+          case 5:
+            currentMessageSet = channel.state.messageSets.find(function (set) {
+              return set.isCurrent;
+            });
+            if (!(currentMessageSet && !(currentMessageSet != null && currentMessageSet.isLatest))) {
+              _context3.next = 10;
+              break;
+            }
+            recentCurrentSetMsgId = currentMessageSet.messages[currentMessageSet.messages.length - 1].id;
+            _context3.next = 10;
+            return channel.query({
+              messages: {
+                id_gte: recentCurrentSetMsgId,
+                limit: 25
+              },
+              watch: true
+            });
+          case 10:
+            _context3.next = 14;
             break;
-          case 6:
-            _context3.next = 8;
-            return channel.state.loadMessageIntoState('latest');
-          case 8:
+          case 12:
+            _context3.next = 14;
+            return loadLatestMessagesRef.current();
+          case 14:
           case "end":
             return _context3.stop();
         }
@@ -758,123 +818,211 @@ var ChannelWithContext = function ChannelWithContext(props) {
       }, _callee4);
     })));
   };
+  var splitLatestCurrentMessageSetRef = (0, _react.useRef)(function () {
+    var currentLatestSet = channel.state.messageSets.find(function (set) {
+      return set.isCurrent && set.isLatest;
+    });
+    if (!currentLatestSet) return;
+    currentLatestSet.isLatest = false;
+    channel.state.messageSets.push({
+      isCurrent: false,
+      isLatest: true,
+      messages: []
+    });
+  });
+  var mergeOverlappingMessageSetsRef = (0, _react.useRef)(function () {
+    var limitToMaxRenderPerBatch = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+    if (hasOverlappingRecentMessagesRef.current) {
+      var limit = 30;
+      var latestMessageSet = channel.state.messageSets.find(function (set) {
+        return set.isLatest;
+      });
+      var currentMessageSet = channel.state.messageSets.find(function (set) {
+        return set.isCurrent;
+      });
+      if (latestMessageSet && currentMessageSet && latestMessageSet !== currentMessageSet) {
+        if (limitToMaxRenderPerBatch && latestMessageSet.messages.length > limit) {
+          currentMessageSet.messages = currentMessageSet.messages.concat(latestMessageSet.messages.slice(0, limit));
+          latestMessageSet.messages = latestMessageSet.messages.slice(limit);
+        } else {
+          channel.state.messageSets = channel.state.messageSets.filter(function (set) {
+            return !set.isLatest;
+          });
+          currentMessageSet.messages = currentMessageSet.messages.concat(latestMessageSet.messages);
+          currentMessageSet.isLatest = true;
+          hasOverlappingRecentMessagesRef.current = false;
+          clearInterval(mergeSetsIntervalRef.current);
+        }
+        return true;
+      }
+    }
+    return false;
+  });
+  var mergeSetsIntervalRef = (0, _react.useRef)();
+  (0, _react.useEffect)(function () {
+    return function () {
+      clearInterval(mergeSetsIntervalRef.current);
+    };
+  }, []);
+  var restartSetsMergeFuncRef = (0, _react.useRef)(function () {
+    clearInterval(mergeSetsIntervalRef.current);
+    if (!hasOverlappingRecentMessagesRef.current) return;
+    mergeSetsIntervalRef.current = setInterval(function () {
+      var currentLength = channel.state.messages.length || 0;
+      var didMerge = mergeOverlappingMessageSetsRef.current(true);
+      if (didMerge && channel.state.messages.length !== currentLength) {
+        setMessages((0, _toConsumableArray2["default"])(channel.state.messages));
+      }
+    }, 1000);
+  });
+  var loadLatestMessagesRef = (0, _react.useRef)((0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee5() {
+    var clearLatest,
+      latestSet,
+      _args5 = arguments;
+    return _regenerator["default"].wrap(function _callee5$(_context5) {
+      while (1) switch (_context5.prev = _context5.next) {
+        case 0:
+          clearLatest = _args5.length > 0 && _args5[0] !== undefined ? _args5[0] : false;
+          mergeOverlappingMessageSetsRef.current();
+          if (clearLatest) {
+            latestSet = channel.state.messageSets.find(function (set) {
+              return set.isLatest;
+            });
+            if (latestSet) latestSet.messages = [];
+          }
+          if (!(channel.state.latestMessages.length === 0)) {
+            _context5.next = 6;
+            break;
+          }
+          _context5.next = 6;
+          return channel.query({}, 'latest');
+        case 6:
+          _context5.next = 8;
+          return channel.state.loadMessageIntoState('latest');
+        case 8:
+        case "end":
+          return _context5.stop();
+      }
+    }, _callee5);
+  })));
   var loadChannel = function loadChannel() {
-    return channelQueryCallRef.current((0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee5() {
-      return _regenerator["default"].wrap(function _callee5$(_context5) {
-        while (1) switch (_context5.prev = _context5.next) {
+    return channelQueryCallRef.current((0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee6() {
+      return _regenerator["default"].wrap(function _callee6$(_context6) {
+        while (1) switch (_context6.prev = _context6.next) {
           case 0:
             if (!(!(channel != null && channel.initialized) || !channel.state.isUpToDate)) {
-              _context5.next = 7;
+              _context6.next = 5;
               break;
             }
-            _context5.next = 3;
+            _context6.next = 3;
             return channel == null ? void 0 : channel.watch();
           case 3:
-            setHasNoMoreRecentMessagesToLoad(true);
-            channel == null ? void 0 : channel.state.setIsUpToDate(true);
-            _context5.next = 9;
+            _context6.next = 7;
             break;
+          case 5:
+            _context6.next = 7;
+            return loadLatestMessagesRef.current(true);
           case 7:
-            _context5.next = 9;
-            return channel.state.loadMessageIntoState('latest');
+            channel == null ? void 0 : channel.state.setIsUpToDate(true);
+            setHasNoMoreRecentMessagesToLoad(true);
           case 9:
-            return _context5.abrupt("return");
-          case 10:
           case "end":
-            return _context5.stop();
+            return _context6.stop();
         }
-      }, _callee5);
+      }, _callee6);
     })));
   };
   var reloadThread = function () {
-    var _ref9 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee6() {
+    var _ref10 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee7() {
       var parentID, limit, queryResponse, updatedHasMore, updatedThreadMessages, _yield$channel$getMes, _messages, _messages2, threadMessage, formattedMessage;
-      return _regenerator["default"].wrap(function _callee6$(_context6) {
-        while (1) switch (_context6.prev = _context6.next) {
+      return _regenerator["default"].wrap(function _callee7$(_context7) {
+        while (1) switch (_context7.prev = _context7.next) {
           case 0:
             if (!(!channel || !(thread != null && thread.id))) {
-              _context6.next = 2;
+              _context7.next = 2;
               break;
             }
-            return _context6.abrupt("return");
+            return _context7.abrupt("return");
           case 2:
             setThreadLoadingMore(true);
-            _context6.prev = 3;
+            _context7.prev = 3;
             parentID = thread.id;
             limit = 50;
             channel.state.threads[parentID] = [];
-            _context6.next = 9;
+            _context7.next = 9;
             return channel.getReplies(parentID, {
               limit: limit
             });
           case 9:
-            queryResponse = _context6.sent;
+            queryResponse = _context7.sent;
             updatedHasMore = queryResponse.messages.length === limit;
             updatedThreadMessages = channel.state.threads[parentID] || [];
             loadMoreThreadFinished(updatedHasMore, updatedThreadMessages);
-            _context6.next = 15;
+            _context7.next = 15;
             return channel.getMessagesById([parentID]);
           case 15:
-            _yield$channel$getMes = _context6.sent;
+            _yield$channel$getMes = _context7.sent;
             _messages = _yield$channel$getMes.messages;
             _messages2 = (0, _slicedToArray2["default"])(_messages, 1), threadMessage = _messages2[0];
             if (threadMessage) {
               formattedMessage = channel.state.formatMessage(threadMessage);
               setThread(formattedMessage);
             }
-            _context6.next = 27;
+            _context7.next = 27;
             break;
           case 21:
-            _context6.prev = 21;
-            _context6.t0 = _context6["catch"](3);
-            console.warn('Thread loading request failed with error', _context6.t0);
-            if (_context6.t0 instanceof Error) {
-              setError(_context6.t0);
+            _context7.prev = 21;
+            _context7.t0 = _context7["catch"](3);
+            console.warn('Thread loading request failed with error', _context7.t0);
+            if (_context7.t0 instanceof Error) {
+              setError(_context7.t0);
             } else {
               setError(true);
             }
             setThreadLoadingMore(false);
-            throw _context6.t0;
+            throw _context7.t0;
           case 27:
           case "end":
-            return _context6.stop();
+            return _context7.stop();
         }
-      }, _callee6, null, [[3, 21]]);
+      }, _callee7, null, [[3, 21]]);
     }));
     return function reloadThread() {
-      return _ref9.apply(this, arguments);
+      return _ref10.apply(this, arguments);
     };
   }();
   var resyncChannel = function () {
-    var _ref10 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee7() {
+    var _ref11 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee8() {
       var _messages$, state, oldListTopMessage, oldListTopMessageId, oldListBottomMessage, newListTopMessage, newListBottomMessage, parseMessage, failedMessages, failedThreadMessages, oldListTopMessageCreatedAt, oldListBottomMessageCreatedAt, newListTopMessageCreatedAt, newListBottomMessageCreatedAt, finalMessages, index;
-      return _regenerator["default"].wrap(function _callee7$(_context7) {
-        while (1) switch (_context7.prev = _context7.next) {
+      return _regenerator["default"].wrap(function _callee8$(_context8) {
+        while (1) switch (_context8.prev = _context8.next) {
           case 0:
             if (!(!channel || syncingChannel)) {
-              _context7.next = 2;
+              _context8.next = 2;
               break;
             }
-            return _context7.abrupt("return");
+            return _context8.abrupt("return");
           case 2:
+            hasOverlappingRecentMessagesRef.current = false;
+            clearInterval(mergeSetsIntervalRef.current);
             setSyncingChannel(true);
             setError(false);
-            _context7.prev = 4;
-            _context7.next = 7;
+            _context8.prev = 6;
+            _context8.next = 9;
             return channel.watch({
               messages: {
                 limit: messages.length + 30
               }
             });
-          case 7:
-            state = _context7.sent;
+          case 9:
+            state = _context8.sent;
             oldListTopMessage = messages[0];
             oldListTopMessageId = (_messages$ = messages[0]) == null ? void 0 : _messages$.id;
             oldListBottomMessage = messages[messages.length - 1];
             newListTopMessage = state.messages[0];
             newListBottomMessage = state.messages[state.messages.length - 1];
             if (!(!oldListTopMessage || !oldListBottomMessage || !newListTopMessage || !newListBottomMessage)) {
-              _context7.next = 20;
+              _context8.next = 22;
               break;
             }
             channel.state.clearMessages();
@@ -882,8 +1030,8 @@ var ChannelWithContext = function ChannelWithContext(props) {
             channel.state.addMessagesSorted(state.messages);
             channel.state.addPinnedMessages(state.pinned_messages);
             copyChannelState();
-            return _context7.abrupt("return");
-          case 20:
+            return _context8.abrupt("return");
+          case 22:
             parseMessage = function parseMessage(message) {
               var _message$pinned_at, _message$updated_at;
               return (0, _extends2["default"])({}, message, {
@@ -911,45 +1059,45 @@ var ChannelWithContext = function ChannelWithContext(props) {
             } else {
               finalMessages = state.messages;
             }
-            setHasNoMoreRecentMessagesToLoad(true);
             channel.state.setIsUpToDate(true);
             channel.state.clearMessages();
             channel.state.addMessagesSorted(finalMessages);
             channel.state.addPinnedMessages(state.pinned_messages);
+            setHasNoMoreRecentMessagesToLoad(true);
             setHasMore(true);
             copyChannelState();
             if (failedMessages.length) {
               channel.state.addMessagesSorted(failedMessages);
               copyChannelState();
             }
-            _context7.next = 39;
+            _context8.next = 41;
             return reloadThread();
-          case 39:
+          case 41:
             if (thread && failedThreadMessages.length) {
               channel.state.addMessagesSorted(failedThreadMessages);
               setThreadMessages((0, _toConsumableArray2["default"])(channel.state.threads[thread.id]));
             }
-            _context7.next = 46;
+            _context8.next = 48;
             break;
-          case 42:
-            _context7.prev = 42;
-            _context7.t0 = _context7["catch"](4);
-            if (_context7.t0 instanceof Error) {
-              setError(_context7.t0);
+          case 44:
+            _context8.prev = 44;
+            _context8.t0 = _context8["catch"](6);
+            if (_context8.t0 instanceof Error) {
+              setError(_context8.t0);
             } else {
               setError(true);
             }
             setLoading(false);
-          case 46:
+          case 48:
             setSyncingChannel(false);
-          case 47:
+          case 49:
           case "end":
-            return _context7.stop();
+            return _context8.stop();
         }
-      }, _callee7, null, [[4, 42]]);
+      }, _callee8, null, [[6, 44]]);
     }));
     return function resyncChannel() {
-      return _ref10.apply(this, arguments);
+      return _ref11.apply(this, arguments);
     };
   }();
   var resyncChannelRef = (0, _react.useRef)(resyncChannel);
@@ -975,85 +1123,87 @@ var ChannelWithContext = function ChannelWithContext(props) {
     };
   }, [enableOfflineSupport, shouldSyncChannel]);
   var reloadChannel = function reloadChannel() {
-    return channelQueryCallRef.current((0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee8() {
-      return _regenerator["default"].wrap(function _callee8$(_context8) {
-        while (1) switch (_context8.prev = _context8.next) {
+    return channelQueryCallRef.current((0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee9() {
+      return _regenerator["default"].wrap(function _callee9$(_context9) {
+        while (1) switch (_context9.prev = _context9.next) {
           case 0:
             setLoading(true);
-            _context8.next = 3;
-            return channel.state.loadMessageIntoState('latest');
+            _context9.next = 3;
+            return loadLatestMessagesRef.current(true);
           case 3:
             setLoading(false);
-            setHasNoMoreRecentMessagesToLoad(true);
             channel == null ? void 0 : channel.state.setIsUpToDate(true);
+            setHasNoMoreRecentMessagesToLoad(true);
           case 6:
           case "end":
-            return _context8.stop();
+            return _context9.stop();
         }
-      }, _callee8);
+      }, _callee9);
     })));
   };
   var queryAtMessage = function () {
-    var _ref13 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee9(_ref12) {
-      var _ref12$after, after, _ref12$before, before, messageId;
-      return _regenerator["default"].wrap(function _callee9$(_context9) {
-        while (1) switch (_context9.prev = _context9.next) {
+    var _ref14 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee10(_ref13) {
+      var _ref13$after, after, _ref13$before, before, messageId;
+      return _regenerator["default"].wrap(function _callee10$(_context10) {
+        while (1) switch (_context10.prev = _context10.next) {
           case 0:
-            _ref12$after = _ref12.after, after = _ref12$after === void 0 ? 10 : _ref12$after, _ref12$before = _ref12.before, before = _ref12$before === void 0 ? 10 : _ref12$before, messageId = _ref12.messageId;
+            _ref13$after = _ref13.after, after = _ref13$after === void 0 ? 10 : _ref13$after, _ref13$before = _ref13.before, before = _ref13$before === void 0 ? 10 : _ref13$before, messageId = _ref13.messageId;
             if (channel) {
-              _context9.next = 3;
+              _context10.next = 3;
               break;
             }
-            return _context9.abrupt("return");
+            return _context10.abrupt("return");
           case 3:
             channel.state.setIsUpToDate(false);
+            hasOverlappingRecentMessagesRef.current = false;
+            clearInterval(mergeSetsIntervalRef.current);
             channel.state.clearMessages();
-            setMessages((0, _toConsumableArray2["default"])(channel.state.messages));
+            setMessages([]);
             if (messageId) {
-              _context9.next = 11;
+              _context10.next = 13;
               break;
             }
-            _context9.next = 9;
+            _context10.next = 11;
             return channel.query({
               messages: {
                 limit: before
               },
               watch: true
             });
-          case 9:
-            channel.state.setIsUpToDate(true);
-            return _context9.abrupt("return");
           case 11:
-            _context9.next = 13;
-            return queryBeforeMessage(messageId, before);
+            channel.state.setIsUpToDate(true);
+            return _context10.abrupt("return");
           case 13:
-            _context9.next = 15;
-            return queryAfterMessage(messageId, after);
+            _context10.next = 15;
+            return queryBeforeMessage(messageId, before);
           case 15:
+            _context10.next = 17;
+            return queryAfterMessage(messageId, after);
+          case 17:
           case "end":
-            return _context9.stop();
+            return _context10.stop();
         }
-      }, _callee9);
+      }, _callee10);
     }));
     return function queryAtMessage(_x2) {
-      return _ref13.apply(this, arguments);
+      return _ref14.apply(this, arguments);
     };
   }();
   var queryBeforeMessage = function () {
-    var _ref14 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee10(messageId) {
+    var _ref15 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee11(messageId) {
       var limit,
-        _args10 = arguments;
-      return _regenerator["default"].wrap(function _callee10$(_context10) {
-        while (1) switch (_context10.prev = _context10.next) {
+        _args11 = arguments;
+      return _regenerator["default"].wrap(function _callee11$(_context11) {
+        while (1) switch (_context11.prev = _context11.next) {
           case 0:
-            limit = _args10.length > 1 && _args10[1] !== undefined ? _args10[1] : 5;
+            limit = _args11.length > 1 && _args11[1] !== undefined ? _args11[1] : 5;
             if (channel) {
-              _context10.next = 3;
+              _context11.next = 3;
               break;
             }
-            return _context10.abrupt("return");
+            return _context11.abrupt("return");
           case 3:
-            _context10.next = 5;
+            _context11.next = 5;
             return channel.query({
               messages: {
                 id_lt: messageId,
@@ -1065,30 +1215,31 @@ var ChannelWithContext = function ChannelWithContext(props) {
             channel.state.setIsUpToDate(false);
           case 6:
           case "end":
-            return _context10.stop();
+            return _context11.stop();
         }
-      }, _callee10);
+      }, _callee11);
     }));
     return function queryBeforeMessage(_x3) {
-      return _ref14.apply(this, arguments);
+      return _ref15.apply(this, arguments);
     };
   }();
   var queryAfterMessage = function () {
-    var _ref15 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee11(messageId) {
+    var _ref16 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee12(messageId) {
       var limit,
         state,
-        _args11 = arguments;
-      return _regenerator["default"].wrap(function _callee11$(_context11) {
-        while (1) switch (_context11.prev = _context11.next) {
+        currentSet,
+        _args12 = arguments;
+      return _regenerator["default"].wrap(function _callee12$(_context12) {
+        while (1) switch (_context12.prev = _context12.next) {
           case 0:
-            limit = _args11.length > 1 && _args11[1] !== undefined ? _args11[1] : 5;
+            limit = _args12.length > 1 && _args12[1] !== undefined ? _args12[1] : 5;
             if (channel) {
-              _context11.next = 3;
+              _context12.next = 3;
               break;
             }
-            return _context11.abrupt("return");
+            return _context12.abrupt("return");
           case 3:
-            _context11.next = 5;
+            _context12.next = 5;
             return channel.query({
               messages: {
                 id_gte: messageId,
@@ -1097,20 +1248,32 @@ var ChannelWithContext = function ChannelWithContext(props) {
               watch: true
             });
           case 5:
-            state = _context11.sent;
+            state = _context12.sent;
             if (state.messages.length < limit) {
+              currentSet = channel.state.messageSets.find(function (set) {
+                return set.isCurrent;
+              });
+              if (currentSet && !currentSet.isLatest) {
+                channel.state.messageSets = channel.state.messageSets.filter(function (set) {
+                  return !set.isLatest;
+                });
+                currentSet.isLatest = true;
+              }
               channel.state.setIsUpToDate(true);
+              setHasNoMoreRecentMessagesToLoad(true);
             } else {
+              splitLatestCurrentMessageSetRef.current();
               channel.state.setIsUpToDate(false);
+              setHasNoMoreRecentMessagesToLoad(false);
             }
           case 7:
           case "end":
-            return _context11.stop();
+            return _context12.stop();
         }
-      }, _callee11);
+      }, _callee12);
     }));
     return function queryAfterMessage(_x4) {
-      return _ref15.apply(this, arguments);
+      return _ref16.apply(this, arguments);
     };
   }();
   var getChannelConfigSafely = function getChannelConfigSafely() {
@@ -1143,12 +1306,12 @@ var ChannelWithContext = function ChannelWithContext(props) {
       setMessages(channel.state.messages);
     }
   };
-  var createMessagePreview = function createMessagePreview(_ref16) {
-    var attachments = _ref16.attachments,
-      mentioned_users = _ref16.mentioned_users,
-      parent_id = _ref16.parent_id,
-      text = _ref16.text,
-      extraFields = (0, _objectWithoutProperties2["default"])(_ref16, _excluded);
+  var createMessagePreview = function createMessagePreview(_ref17) {
+    var attachments = _ref17.attachments,
+      mentioned_users = _ref17.mentioned_users,
+      parent_id = _ref17.parent_id,
+      text = _ref17.text,
+      extraFields = (0, _objectWithoutProperties2["default"])(_ref17, _excluded);
     var _client$user2 = client.user,
       channel_mutes = _client$user2.channel_mutes,
       devices = _client$user2.devices,
@@ -1183,28 +1346,28 @@ var ChannelWithContext = function ChannelWithContext(props) {
     return preview;
   };
   var uploadPendingAttachments = function () {
-    var _ref17 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee12(message) {
+    var _ref18 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee13(message) {
       var _updatedMessage$attac;
       var updatedMessage, i, _updatedMessage$attac2, attachment, image, file, _image$name, filename, controller, compressedUri, contentType, uploadResponse, _controller, response;
-      return _regenerator["default"].wrap(function _callee12$(_context12) {
-        while (1) switch (_context12.prev = _context12.next) {
+      return _regenerator["default"].wrap(function _callee13$(_context13) {
+        while (1) switch (_context13.prev = _context13.next) {
           case 0:
             updatedMessage = (0, _extends2["default"])({}, message);
             if (!((_updatedMessage$attac = updatedMessage.attachments) != null && _updatedMessage$attac.length)) {
-              _context12.next = 48;
+              _context13.next = 48;
               break;
             }
             i = 0;
           case 3:
             if (!(i < ((_updatedMessage$attac2 = updatedMessage.attachments) == null ? void 0 : _updatedMessage$attac2.length))) {
-              _context12.next = 48;
+              _context13.next = 48;
               break;
             }
             attachment = updatedMessage.attachments[i];
             image = attachment.originalImage;
             file = attachment.originalFile;
             if (!(attachment.type === 'image' && image != null && image.uri && attachment.image_url && (0, _utils.isLocalUrl)(attachment.image_url))) {
-              _context12.next = 28;
+              _context13.next = 28;
               break;
             }
             filename = (_image$name = image.name) != null ? _image$name : image.uri.replace(/^(file:\/\/|content:\/\/)/, '');
@@ -1213,28 +1376,28 @@ var ChannelWithContext = function ChannelWithContext(props) {
               controller.abort();
               uploadAbortControllerRef.current["delete"](filename);
             }
-            _context12.next = 13;
+            _context13.next = 13;
             return (0, _compressImage.compressedImageURI)(image, compressImageQuality);
           case 13:
-            compressedUri = _context12.sent;
+            compressedUri = _context13.sent;
             contentType = (0, _mimeTypes.lookup)(filename) || 'multipart/form-data';
             if (!doImageUploadRequest) {
-              _context12.next = 21;
+              _context13.next = 21;
               break;
             }
-            _context12.next = 18;
+            _context13.next = 18;
             return doImageUploadRequest(image, channel);
           case 18:
-            _context12.t0 = _context12.sent;
-            _context12.next = 24;
+            _context13.t0 = _context13.sent;
+            _context13.next = 24;
             break;
           case 21:
-            _context12.next = 23;
+            _context13.next = 23;
             return channel.sendImage(compressedUri, filename, contentType);
           case 23:
-            _context12.t0 = _context12.sent;
+            _context13.t0 = _context13.sent;
           case 24:
-            uploadResponse = _context12.t0;
+            uploadResponse = _context13.t0;
             attachment.image_url = uploadResponse.file;
             delete attachment.originalFile;
             dbApi.updateMessage({
@@ -1244,7 +1407,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
             });
           case 28:
             if (!((attachment.type === 'file' || attachment.type === 'audio' || attachment.type === 'video') && attachment.asset_url && (0, _utils.isLocalUrl)(attachment.asset_url) && file != null && file.uri)) {
-              _context12.next = 45;
+              _context13.next = 45;
               break;
             }
             _controller = uploadAbortControllerRef.current.get(file.name);
@@ -1253,22 +1416,22 @@ var ChannelWithContext = function ChannelWithContext(props) {
               uploadAbortControllerRef.current["delete"](file.name);
             }
             if (!doDocUploadRequest) {
-              _context12.next = 37;
+              _context13.next = 37;
               break;
             }
-            _context12.next = 34;
+            _context13.next = 34;
             return doDocUploadRequest(file, channel);
           case 34:
-            _context12.t1 = _context12.sent;
-            _context12.next = 40;
+            _context13.t1 = _context13.sent;
+            _context13.next = 40;
             break;
           case 37:
-            _context12.next = 39;
+            _context13.next = 39;
             return channel.sendFile(file.uri, file.name, file.mimeType);
           case 39:
-            _context12.t1 = _context12.sent;
+            _context13.t1 = _context13.sent;
           case 40:
-            response = _context12.t1;
+            response = _context13.t1;
             attachment.asset_url = response.file;
             if (response.thumb_url) {
               attachment.thumb_url = response.thumb_url;
@@ -1281,37 +1444,37 @@ var ChannelWithContext = function ChannelWithContext(props) {
             });
           case 45:
             i++;
-            _context12.next = 3;
+            _context13.next = 3;
             break;
           case 48:
-            return _context12.abrupt("return", updatedMessage);
+            return _context13.abrupt("return", updatedMessage);
           case 49:
           case "end":
-            return _context12.stop();
+            return _context13.stop();
         }
-      }, _callee12);
+      }, _callee13);
     }));
     return function uploadPendingAttachments(_x5) {
-      return _ref17.apply(this, arguments);
+      return _ref18.apply(this, arguments);
     };
   }();
   var sendMessageRequest = function () {
-    var _ref18 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee13(message, retrying) {
+    var _ref19 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee14(message, retrying) {
       var _updatedMessage, __html, attachments, created_at, deleted_at, html, id, latest_reactions, mentioned_users, own_reactions, parent_id, quoted_message, reaction_counts, reactions, status, text, type, updated_at, user, extraFields, mentionedUserIds, _messageData, messageResponse;
-      return _regenerator["default"].wrap(function _callee13$(_context13) {
-        while (1) switch (_context13.prev = _context13.next) {
+      return _regenerator["default"].wrap(function _callee14$(_context14) {
+        while (1) switch (_context14.prev = _context14.next) {
           case 0:
-            _context13.prev = 0;
-            _context13.next = 3;
+            _context14.prev = 0;
+            _context14.next = 3;
             return uploadPendingAttachments(message);
           case 3:
-            _updatedMessage = _context13.sent;
+            _updatedMessage = _context14.sent;
             __html = _updatedMessage.__html, attachments = _updatedMessage.attachments, created_at = _updatedMessage.created_at, deleted_at = _updatedMessage.deleted_at, html = _updatedMessage.html, id = _updatedMessage.id, latest_reactions = _updatedMessage.latest_reactions, mentioned_users = _updatedMessage.mentioned_users, own_reactions = _updatedMessage.own_reactions, parent_id = _updatedMessage.parent_id, quoted_message = _updatedMessage.quoted_message, reaction_counts = _updatedMessage.reaction_counts, reactions = _updatedMessage.reactions, status = _updatedMessage.status, text = _updatedMessage.text, type = _updatedMessage.type, updated_at = _updatedMessage.updated_at, user = _updatedMessage.user, extraFields = (0, _objectWithoutProperties2["default"])(_updatedMessage, _excluded3);
             if (channel.id) {
-              _context13.next = 7;
+              _context14.next = 7;
               break;
             }
-            return _context13.abrupt("return");
+            return _context14.abrupt("return");
           case 7:
             mentionedUserIds = (mentioned_users == null ? void 0 : mentioned_users.map(function (user) {
               return user.id;
@@ -1325,24 +1488,24 @@ var ChannelWithContext = function ChannelWithContext(props) {
             }, extraFields);
             messageResponse = {};
             if (!doSendMessageRequest) {
-              _context13.next = 16;
+              _context14.next = 16;
               break;
             }
-            _context13.next = 13;
+            _context14.next = 13;
             return doSendMessageRequest((channel == null ? void 0 : channel.cid) || '', _messageData);
           case 13:
-            messageResponse = _context13.sent;
-            _context13.next = 20;
+            messageResponse = _context14.sent;
+            _context14.next = 20;
             break;
           case 16:
             if (!channel) {
-              _context13.next = 20;
+              _context14.next = 20;
               break;
             }
-            _context13.next = 19;
+            _context14.next = 19;
             return channel.sendMessage(_messageData);
           case 19:
-            messageResponse = _context13.sent;
+            messageResponse = _context14.sent;
           case 20:
             if (messageResponse.message) {
               messageResponse.message.status = _utils.MessageStatusTypes.RECEIVED;
@@ -1359,12 +1522,12 @@ var ChannelWithContext = function ChannelWithContext(props) {
                 updateMessage(messageResponse.message);
               }
             }
-            _context13.next = 29;
+            _context14.next = 29;
             break;
           case 23:
-            _context13.prev = 23;
-            _context13.t0 = _context13["catch"](0);
-            console.log(_context13.t0);
+            _context14.prev = 23;
+            _context14.t0 = _context14["catch"](0);
+            console.log(_context14.t0);
             message.status = _utils.MessageStatusTypes.FAILED;
             updateMessage((0, _extends2["default"])({}, message, {
               cid: channel.cid
@@ -1378,20 +1541,20 @@ var ChannelWithContext = function ChannelWithContext(props) {
             }
           case 29:
           case "end":
-            return _context13.stop();
+            return _context14.stop();
         }
-      }, _callee13, null, [[0, 23]]);
+      }, _callee14, null, [[0, 23]]);
     }));
     return function sendMessageRequest(_x6, _x7) {
-      return _ref18.apply(this, arguments);
+      return _ref19.apply(this, arguments);
     };
   }();
   var sendMessage = function () {
-    var _ref19 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee14(message) {
+    var _ref20 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee15(message) {
       var _channel$state;
       var messagePreview;
-      return _regenerator["default"].wrap(function _callee14$(_context14) {
-        while (1) switch (_context14.prev = _context14.next) {
+      return _regenerator["default"].wrap(function _callee15$(_context15) {
+        while (1) switch (_context15.prev = _context15.next) {
           case 0:
             if (channel != null && (_channel$state = channel.state) != null && _channel$state.filterErrorMessages) {
               channel.state.filterErrorMessages();
@@ -1399,13 +1562,14 @@ var ChannelWithContext = function ChannelWithContext(props) {
             messagePreview = createMessagePreview((0, _extends2["default"])({}, message, {
               attachments: message.attachments || []
             }));
+            mergeOverlappingMessageSetsRef.current();
             if (channel != null && channel.state.isUpToDate) {
-              _context14.next = 5;
+              _context15.next = 6;
               break;
             }
-            _context14.next = 5;
+            _context15.next = 6;
             return reloadChannel();
-          case 5:
+          case 6:
             updateMessage(messagePreview, {
               commands: [],
               messageInput: ''
@@ -1418,86 +1582,87 @@ var ChannelWithContext = function ChannelWithContext(props) {
                 })]
               });
             }
-            _context14.next = 9;
+            _context15.next = 10;
             return sendMessageRequest(messagePreview);
-          case 9:
+          case 10:
           case "end":
-            return _context14.stop();
+            return _context15.stop();
         }
-      }, _callee14);
+      }, _callee15);
     }));
     return function sendMessage(_x8) {
-      return _ref19.apply(this, arguments);
+      return _ref20.apply(this, arguments);
     };
   }();
   var retrySendMessage = function () {
-    var _ref20 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee15(message) {
+    var _ref21 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee16(message) {
       var statusPendingMessage;
-      return _regenerator["default"].wrap(function _callee15$(_context15) {
-        while (1) switch (_context15.prev = _context15.next) {
+      return _regenerator["default"].wrap(function _callee16$(_context16) {
+        while (1) switch (_context16.prev = _context16.next) {
           case 0:
             statusPendingMessage = (0, _extends2["default"])({}, message, {
               status: _utils.MessageStatusTypes.SENDING
             });
             updateMessage(statusPendingMessage);
-            _context15.next = 4;
+            _context16.next = 4;
             return sendMessageRequest(statusPendingMessage, true);
           case 4:
           case "end":
-            return _context15.stop();
+            return _context16.stop();
         }
-      }, _callee15);
+      }, _callee16);
     }));
     return function retrySendMessage(_x9) {
-      return _ref20.apply(this, arguments);
+      return _ref21.apply(this, arguments);
     };
   }();
   var loadMoreFinished = (0, _react.useRef)((0, _debounce["default"])(function (updatedHasMore, newMessages) {
+    setLoading(false);
     setLoadingMore(false);
     setError(false);
     setHasMore(updatedHasMore);
     setMessages(newMessages);
   }, defaultDebounceInterval, debounceOptions)).current;
-  var loadMore = (0, _react.useCallback)((0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee16() {
+  var loadMore = (0, _react.useCallback)((0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee17() {
     var limit,
       currentMessages,
       oldestMessage,
       oldestID,
       queryResponse,
       updatedHasMore,
-      _args16 = arguments;
-    return _regenerator["default"].wrap(function _callee16$(_context16) {
-      while (1) switch (_context16.prev = _context16.next) {
+      _args17 = arguments;
+    return _regenerator["default"].wrap(function _callee17$(_context17) {
+      while (1) switch (_context17.prev = _context17.next) {
         case 0:
-          limit = _args16.length > 0 && _args16[0] !== undefined ? _args16[0] : 20;
+          limit = _args17.length > 0 && _args17[0] !== undefined ? _args17[0] : 20;
           if (!(loadingMore || hasMore === false)) {
-            _context16.next = 3;
+            _context17.next = 3;
             break;
           }
-          return _context16.abrupt("return");
+          return _context17.abrupt("return");
         case 3:
-          setLoadingMore(true);
-          currentMessages = messagesRef.current;
+          currentMessages = channel.state.messages;
           if (currentMessages.length) {
-            _context16.next = 7;
+            _context17.next = 6;
             break;
           }
-          return _context16.abrupt("return", setLoadingMore(false));
-        case 7:
+          return _context17.abrupt("return", setLoadingMore(false));
+        case 6:
           oldestMessage = currentMessages && currentMessages[0];
           if (!(oldestMessage && oldestMessage.status !== _utils.MessageStatusTypes.RECEIVED)) {
-            _context16.next = 10;
+            _context17.next = 9;
             break;
           }
-          return _context16.abrupt("return", setLoadingMore(false));
-        case 10:
+          return _context17.abrupt("return", setLoadingMore(false));
+        case 9:
+          setLoadingMore(true);
           oldestID = oldestMessage && oldestMessage.id;
-          _context16.prev = 11;
+          _context17.prev = 11;
           if (!channel) {
-            _context16.next = 18;
+            _context17.next = 18;
             break;
           }
-          _context16.next = 15;
+          _context17.next = 15;
           return channel.query({
             messages: {
               id_lt: oldestID,
@@ -1505,60 +1670,86 @@ var ChannelWithContext = function ChannelWithContext(props) {
             }
           });
         case 15:
-          queryResponse = _context16.sent;
+          queryResponse = _context17.sent;
           updatedHasMore = queryResponse.messages.length === limit;
           loadMoreFinished(updatedHasMore, channel.state.messages);
         case 18:
-          _context16.next = 25;
+          _context17.next = 25;
           break;
         case 20:
-          _context16.prev = 20;
-          _context16.t0 = _context16["catch"](11);
-          if (_context16.t0 instanceof Error) {
-            setError(_context16.t0);
+          _context17.prev = 20;
+          _context17.t0 = _context17["catch"](11);
+          if (_context17.t0 instanceof Error) {
+            setError(_context17.t0);
           } else {
             setError(true);
           }
           setLoadingMore(false);
-          throw _context16.t0;
+          throw _context17.t0;
         case 25:
         case "end":
-          return _context16.stop();
+          return _context17.stop();
       }
-    }, _callee16, null, [[11, 20]]);
+    }, _callee17, null, [[11, 20]]);
   })), [channelId, hasMore, loadingMore]);
-  var loadMoreRecent = (0, _react.useCallback)((0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee17() {
+  var loadMoreRecent = (0, _react.useCallback)((0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee18() {
     var limit,
+      latestMessageSet,
+      latestLengthBeforeMerge,
+      didMerge,
       currentMessages,
       recentMessage,
       queryResponse,
-      _args17 = arguments;
-    return _regenerator["default"].wrap(function _callee17$(_context17) {
-      while (1) switch (_context17.prev = _context17.next) {
+      gotAllRecentMessages,
+      currentSet,
+      _args18 = arguments;
+    return _regenerator["default"].wrap(function _callee18$(_context18) {
+      while (1) switch (_context18.prev = _context18.next) {
         case 0:
-          limit = _args17.length > 0 && _args17[0] !== undefined ? _args17[0] : 5;
-          if (!hasNoMoreRecentMessagesToLoad) {
-            _context17.next = 3;
+          limit = _args18.length > 0 && _args18[0] !== undefined ? _args18[0] : 5;
+          latestMessageSet = channel.state.messageSets.find(function (set) {
+            return set.isLatest;
+          });
+          latestLengthBeforeMerge = (latestMessageSet == null ? void 0 : latestMessageSet.messages.length) || 0;
+          didMerge = mergeOverlappingMessageSetsRef.current(true);
+          if (!didMerge) {
+            _context18.next = 12;
+            break;
+          }
+          if (!(latestMessageSet && latestLengthBeforeMerge >= limit)) {
+            _context18.next = 12;
             break;
           }
-          return _context17.abrupt("return");
-        case 3:
           setLoadingMoreRecent(true);
-          currentMessages = messagesRef.current;
+          channel.state.setIsUpToDate(true);
+          setHasNoMoreRecentMessagesToLoad(true);
+          loadMoreRecentFinished(channel.state.messages);
+          restartSetsMergeFuncRef.current();
+          return _context18.abrupt("return");
+        case 12:
+          if (!channel.state.isUpToDate) {
+            _context18.next = 15;
+            break;
+          }
+          setLoadingMoreRecent(false);
+          return _context18.abrupt("return");
+        case 15:
+          currentMessages = channel.state.messages;
           recentMessage = currentMessages[currentMessages.length - 1];
           if (!((recentMessage == null ? void 0 : recentMessage.status) !== _utils.MessageStatusTypes.RECEIVED)) {
-            _context17.next = 9;
+            _context18.next = 20;
             break;
           }
           setLoadingMoreRecent(false);
-          return _context17.abrupt("return");
-        case 9:
-          _context17.prev = 9;
+          return _context18.abrupt("return");
+        case 20:
+          setLoadingMoreRecent(true);
+          _context18.prev = 21;
           if (!channel) {
-            _context17.next = 16;
+            _context18.next = 32;
             break;
           }
-          _context17.next = 13;
+          _context18.next = 25;
           return channel.query({
             messages: {
               id_gte: recentMessage.id,
@@ -1566,29 +1757,40 @@ var ChannelWithContext = function ChannelWithContext(props) {
             },
             watch: true
           });
-        case 13:
-          queryResponse = _context17.sent;
-          setHasNoMoreRecentMessagesToLoad(queryResponse.messages.length < limit);
+        case 25:
+          queryResponse = _context18.sent;
+          gotAllRecentMessages = queryResponse.messages.length < limit;
+          currentSet = channel.state.messageSets.find(function (set) {
+            return set.isCurrent;
+          });
+          if (gotAllRecentMessages && currentSet && !currentSet.isLatest) {
+            channel.state.messageSets = channel.state.messageSets.filter(function (set) {
+              return !set.isLatest;
+            });
+            currentSet.isLatest = true;
+          }
+          channel.state.setIsUpToDate(gotAllRecentMessages);
+          setHasNoMoreRecentMessagesToLoad(gotAllRecentMessages);
           loadMoreRecentFinished(channel.state.messages);
-        case 16:
-          _context17.next = 24;
+        case 32:
+          _context18.next = 40;
           break;
-        case 18:
-          _context17.prev = 18;
-          _context17.t0 = _context17["catch"](9);
-          console.warn('Message pagination request failed with error', _context17.t0);
-          if (_context17.t0 instanceof Error) {
-            setError(_context17.t0);
+        case 34:
+          _context18.prev = 34;
+          _context18.t0 = _context18["catch"](21);
+          console.warn('Message pagination request failed with error', _context18.t0);
+          if (_context18.t0 instanceof Error) {
+            setError(_context18.t0);
           } else {
             setError(true);
           }
           setLoadingMoreRecent(false);
-          throw _context17.t0;
-        case 24:
+          throw _context18.t0;
+        case 40:
         case "end":
-          return _context17.stop();
+          return _context18.stop();
       }
-    }, _callee17, null, [[9, 18]]);
+    }, _callee18, null, [[21, 34]]);
   })), [channelId, hasNoMoreRecentMessagesToLoad]);
   var loadMoreRecentFinished = (0, _react.useRef)((0, _debounce["default"])(function (newMessages) {
     setLoadingMoreRecent(false);
@@ -1626,13 +1828,13 @@ var ChannelWithContext = function ChannelWithContext(props) {
     }
   };
   var sendReaction = function () {
-    var _ref23 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee18(type, messageId) {
+    var _ref24 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee19(type, messageId) {
       var payload;
-      return _regenerator["default"].wrap(function _callee18$(_context18) {
-        while (1) switch (_context18.prev = _context18.next) {
+      return _regenerator["default"].wrap(function _callee19$(_context19) {
+        while (1) switch (_context19.prev = _context19.next) {
           case 0:
             if (!(!(channel != null && channel.id) || !client.user)) {
-              _context18.next = 2;
+              _context19.next = 2;
               break;
             }
             throw new Error('Channel has not been initialized');
@@ -1643,13 +1845,13 @@ var ChannelWithContext = function ChannelWithContext(props) {
               enforce_unique: enforceUniqueReaction
             }];
             if (enableOfflineSupport) {
-              _context18.next = 7;
+              _context19.next = 7;
               break;
             }
-            _context18.next = 6;
+            _context19.next = 6;
             return channel.sendReaction.apply(channel, payload);
           case 6:
-            return _context18.abrupt("return");
+            return _context19.abrupt("return");
           case 7:
             (0, _addReactionToLocalState.addReactionToLocalState)({
               channel: channel,
@@ -1659,7 +1861,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
               user: client.user
             });
             setMessages(channel.state.messages);
-            _context18.next = 11;
+            _context19.next = 11;
             return _DBSyncManager.DBSyncManager.queueTask({
               client: client,
               task: {
@@ -1672,51 +1874,51 @@ var ChannelWithContext = function ChannelWithContext(props) {
             });
           case 11:
           case "end":
-            return _context18.stop();
+            return _context19.stop();
         }
-      }, _callee18);
+      }, _callee19);
     }));
     return function sendReaction(_x10, _x11) {
-      return _ref23.apply(this, arguments);
+      return _ref24.apply(this, arguments);
     };
   }();
   var deleteMessage = function () {
-    var _ref24 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee19(message) {
+    var _ref25 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee20(message) {
       var _data;
-      return _regenerator["default"].wrap(function _callee19$(_context19) {
-        while (1) switch (_context19.prev = _context19.next) {
+      return _regenerator["default"].wrap(function _callee20$(_context20) {
+        while (1) switch (_context20.prev = _context20.next) {
           case 0:
             if (channel.id) {
-              _context19.next = 2;
+              _context20.next = 2;
               break;
             }
             throw new Error('Channel has not been initialized yet');
           case 2:
             if (enableOfflineSupport) {
-              _context19.next = 9;
+              _context20.next = 9;
               break;
             }
             if (!(message.status === _utils.MessageStatusTypes.FAILED)) {
-              _context19.next = 6;
+              _context20.next = 6;
               break;
             }
             removeMessage(message);
-            return _context19.abrupt("return");
+            return _context20.abrupt("return");
           case 6:
-            _context19.next = 8;
+            _context20.next = 8;
             return client.deleteMessage(message.id);
           case 8:
-            return _context19.abrupt("return");
+            return _context20.abrupt("return");
           case 9:
             if (!(message.status === _utils.MessageStatusTypes.FAILED)) {
-              _context19.next = 14;
+              _context20.next = 14;
               break;
             }
             _DBSyncManager.DBSyncManager.dropPendingTasks({
               messageId: message.id
             });
             removeMessage(message);
-            _context19.next = 19;
+            _context20.next = 19;
             break;
           case 14:
             updateMessage((0, _extends2["default"])({}, message, {
@@ -1724,7 +1926,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
               deleted_at: new Date().toISOString(),
               type: 'deleted'
             }));
-            _context19.next = 17;
+            _context20.next = 17;
             return _DBSyncManager.DBSyncManager.queueTask({
               client: client,
               task: {
@@ -1736,41 +1938,41 @@ var ChannelWithContext = function ChannelWithContext(props) {
               }
             });
           case 17:
-            _data = _context19.sent;
+            _data = _context20.sent;
             if (_data != null && _data.message) {
               updateMessage((0, _extends2["default"])({}, _data.message));
             }
           case 19:
           case "end":
-            return _context19.stop();
+            return _context20.stop();
         }
-      }, _callee19);
+      }, _callee20);
     }));
     return function deleteMessage(_x12) {
-      return _ref24.apply(this, arguments);
+      return _ref25.apply(this, arguments);
     };
   }();
   var deleteReaction = function () {
-    var _ref25 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee20(type, messageId) {
+    var _ref26 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee21(type, messageId) {
       var payload;
-      return _regenerator["default"].wrap(function _callee20$(_context20) {
-        while (1) switch (_context20.prev = _context20.next) {
+      return _regenerator["default"].wrap(function _callee21$(_context21) {
+        while (1) switch (_context21.prev = _context21.next) {
           case 0:
             if (!(!(channel != null && channel.id) || !client.user)) {
-              _context20.next = 2;
+              _context21.next = 2;
               break;
             }
             throw new Error('Channel has not been initialized');
           case 2:
             payload = [messageId, type];
             if (enableOfflineSupport) {
-              _context20.next = 7;
+              _context21.next = 7;
               break;
             }
-            _context20.next = 6;
+            _context21.next = 6;
             return channel.deleteReaction.apply(channel, payload);
           case 6:
-            return _context20.abrupt("return");
+            return _context21.abrupt("return");
           case 7:
             (0, _removeReactionFromLocalState.removeReactionFromLocalState)({
               channel: channel,
@@ -1779,7 +1981,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
               user: client.user
             });
             setMessages(channel.state.messages);
-            _context20.next = 11;
+            _context21.next = 11;
             return _DBSyncManager.DBSyncManager.queueTask({
               client: client,
               task: {
@@ -1792,12 +1994,12 @@ var ChannelWithContext = function ChannelWithContext(props) {
             });
           case 11:
           case "end":
-            return _context20.stop();
+            return _context21.stop();
         }
-      }, _callee20);
+      }, _callee21);
     }));
     return function deleteReaction(_x13, _x14) {
-      return _ref25.apply(this, arguments);
+      return _ref26.apply(this, arguments);
     };
   }();
   var openThread = function openThread(message) {
@@ -1816,59 +2018,59 @@ var ChannelWithContext = function ChannelWithContext(props) {
     setThreadMessages(updatedThreadMessages);
   }, defaultDebounceInterval, debounceOptions)).current;
   var loadMoreThread = function () {
-    var _ref26 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee21() {
+    var _ref27 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee22() {
       var _threadMessages$, parentID, oldestMessageID, limit, queryResponse, updatedHasMore, updatedThreadMessages;
-      return _regenerator["default"].wrap(function _callee21$(_context21) {
-        while (1) switch (_context21.prev = _context21.next) {
+      return _regenerator["default"].wrap(function _callee22$(_context22) {
+        while (1) switch (_context22.prev = _context22.next) {
           case 0:
             if (!(threadLoadingMore || !(thread != null && thread.id))) {
-              _context21.next = 2;
+              _context22.next = 2;
               break;
             }
-            return _context21.abrupt("return");
+            return _context22.abrupt("return");
           case 2:
             setThreadLoadingMore(true);
-            _context21.prev = 3;
+            _context22.prev = 3;
             if (!channel) {
-              _context21.next = 15;
+              _context22.next = 15;
               break;
             }
             parentID = thread.id;
             channel.state.threads[parentID] = threadMessages;
             oldestMessageID = threadMessages == null ? void 0 : (_threadMessages$ = threadMessages[0]) == null ? void 0 : _threadMessages$.id;
             limit = 50;
-            _context21.next = 11;
+            _context22.next = 11;
             return channel.getReplies(parentID, {
               id_lt: oldestMessageID,
               limit: limit
             });
           case 11:
-            queryResponse = _context21.sent;
+            queryResponse = _context22.sent;
             updatedHasMore = queryResponse.messages.length === limit;
             updatedThreadMessages = channel.state.threads[parentID] || [];
             loadMoreThreadFinished(updatedHasMore, updatedThreadMessages);
           case 15:
-            _context21.next = 23;
+            _context22.next = 23;
             break;
           case 17:
-            _context21.prev = 17;
-            _context21.t0 = _context21["catch"](3);
-            console.warn('Message pagination request failed with error', _context21.t0);
-            if (_context21.t0 instanceof Error) {
-              setError(_context21.t0);
+            _context22.prev = 17;
+            _context22.t0 = _context22["catch"](3);
+            console.warn('Message pagination request failed with error', _context22.t0);
+            if (_context22.t0 instanceof Error) {
+              setError(_context22.t0);
             } else {
               setError(true);
             }
             setThreadLoadingMore(false);
-            throw _context21.t0;
+            throw _context22.t0;
           case 23:
           case "end":
-            return _context21.stop();
+            return _context22.stop();
         }
-      }, _callee21, null, [[3, 17]]);
+      }, _callee22, null, [[3, 17]]);
     }));
     return function loadMoreThread() {
-      return _ref26.apply(this, arguments);
+      return _ref27.apply(this, arguments);
     };
   }();
   var ownCapabilitiesContext = (0, _useCreateOwnCapabilitiesContext.useCreateOwnCapabilitiesContext)({
@@ -1882,7 +2084,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
     enableMessageGroupingByUser: enableMessageGroupingByUser,
     enforceUniqueReaction: enforceUniqueReaction,
     error: error,
-    giphyEnabled: giphyEnabled != null ? giphyEnabled : !!((_ref27 = (clientChannelConfig == null ? void 0 : clientChannelConfig.commands) || []) != null && _ref27.some(function (command) {
+    giphyEnabled: giphyEnabled != null ? giphyEnabled : !!((_ref28 = (clientChannelConfig == null ? void 0 : clientChannelConfig.commands) || []) != null && _ref28.some(function (command) {
       return command.name === 'giphy';
     })),
     hideDateSeparators: hideDateSeparators,
@@ -1938,7 +2140,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
     InputEditingStateHeader: InputEditingStateHeader,
     InputGiphySearch: InputGiphySearch,
     InputReplyStateHeader: InputReplyStateHeader,
-    maxMessageLength: (_ref28 = maxMessageLengthProp != null ? maxMessageLengthProp : clientChannelConfig == null ? void 0 : clientChannelConfig.max_message_length) != null ? _ref28 : undefined,
+    maxMessageLength: (_ref29 = maxMessageLengthProp != null ? maxMessageLengthProp : clientChannelConfig == null ? void 0 : clientChannelConfig.max_message_length) != null ? _ref29 : undefined,
     maxNumberOfFiles: maxNumberOfFiles,
     mentionAllAppUsersEnabled: mentionAllAppUsersEnabled,
     mentionAllAppUsersQuery: mentionAllAppUsersQuery,
@@ -2081,7 +2283,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 2109,
+        lineNumber: 2284,
         columnNumber: 12
       }
     });
@@ -2095,7 +2297,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 2114,
+        lineNumber: 2289,
         columnNumber: 7
       }
     }, t('Please select a channel first'));
@@ -2108,7 +2310,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 2121,
+      lineNumber: 2296,
       columnNumber: 5
     }
   }), _react["default"].createElement(_ChannelContext.ChannelProvider, {
@@ -2116,7 +2318,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 2127,
+      lineNumber: 2302,
       columnNumber: 7
     }
   }, _react["default"].createElement(_OwnCapabilitiesContext.OwnCapabilitiesProvider, {
@@ -2124,7 +2326,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 2128,
+      lineNumber: 2303,
       columnNumber: 9
     }
   }, _react["default"].createElement(_TypingContext.TypingProvider, {
@@ -2132,7 +2334,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 2129,
+      lineNumber: 2304,
       columnNumber: 11
     }
   }, _react["default"].createElement(_PaginatedMessageListContext.PaginatedMessageListProvider, {
@@ -2140,7 +2342,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 2130,
+      lineNumber: 2305,
       columnNumber: 13
     }
   }, _react["default"].createElement(_MessagesContext.MessagesProvider, {
@@ -2148,7 +2350,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 2131,
+      lineNumber: 2306,
       columnNumber: 15
     }
   }, _react["default"].createElement(_ThreadContext.ThreadProvider, {
@@ -2156,7 +2358,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 2132,
+      lineNumber: 2307,
       columnNumber: 17
     }
   }, _react["default"].createElement(_SuggestionsContext.SuggestionsProvider, {
@@ -2164,7 +2366,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 2133,
+      lineNumber: 2308,
       columnNumber: 19
     }
   }, _react["default"].createElement(_MessageInputContext.MessageInputProvider, {
@@ -2172,7 +2374,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 2134,
+      lineNumber: 2309,
       columnNumber: 21
     }
   }, _react["default"].createElement(_reactNative.View, {
@@ -2182,13 +2384,13 @@ var ChannelWithContext = function ChannelWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 2135,
+      lineNumber: 2310,
       columnNumber: 23
     }
   }, children))))))))));
 };
 var Channel = function Channel(props) {
-  var _props$thread, _props$thread2;
+  var _props$thread, _props$thread2, _props$channel;
   var _useChatContext = (0, _ChatContext.useChatContext)(),
     client = _useChatContext.client,
     enableOfflineSupport = _useChatContext.enableOfflineSupport;
@@ -2211,6 +2413,7 @@ var Channel = function Channel(props) {
     watcherCount = _useChannelState.watcherCount,
     watchers = _useChannelState.watchers;
   return _react["default"].createElement(ChannelWithContext, (0, _extends2["default"])({
+    key: (_props$channel = props.channel) == null ? void 0 : _props$channel.cid,
     client: client,
     enableOfflineSupport: enableOfflineSupport,
     t: t
@@ -2233,7 +2436,7 @@ var Channel = function Channel(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 2192,
+      lineNumber: 2367,
       columnNumber: 5
     }
   }));