Virtualize Messages List - only render what's visible

js/modules/backup.js

@@ -696,7 +696,7 @@ async function exportConversation(conversation, options = {}) {
 
   while (!complete) {
     // eslint-disable-next-line no-await-in-loop
-    const collection = await window.Signal.Data.getMessagesByConversation(
+    const collection = await window.Signal.Data.getOlderMessagesByConversation(
       conversation.id,
       {
         limit: CHUNK_SIZE,

js/modules/data.js

@@ -121,9 +121,11 @@ module.exports = {
   getExpiredMessages,
   getOutgoingWithoutExpiresAt,
   getNextExpiringMessage,
-  getMessagesByConversation,
   getNextTapToViewMessageToAgeOut,
   getTapToViewMessagesNeedingErase,
+  getOlderMessagesByConversation,
+  getNewerMessagesByConversation,
+  getMessageMetricsForConversation,
 
   getUnprocessedCount,
   getAllUnprocessed,
@@ -779,17 +781,40 @@ async function getUnreadByConversation(conversationId, { MessageCollection }) {
   return new MessageCollection(messages);
 }
 
-async function getMessagesByConversation(
+async function getOlderMessagesByConversation(
   conversationId,
   { limit = 100, receivedAt = Number.MAX_VALUE, MessageCollection }
 ) {
-  const messages = await channels.getMessagesByConversation(conversationId, {
-    limit,
-    receivedAt,
-  });
+  const messages = await channels.getOlderMessagesByConversation(
+    conversationId,
+    {
+      limit,
+      receivedAt,
+    }
+  );
 
   return new MessageCollection(messages);
 }
+async function getNewerMessagesByConversation(
+  conversationId,
+  { limit = 100, receivedAt = 0, MessageCollection }
+) {
+  const messages = await channels.getNewerMessagesByConversation(
+    conversationId,
+    {
+      limit,
+      receivedAt,
+    }
+  );
+
+  return new MessageCollection(messages);
+}
+async function getMessageMetricsForConversation(conversationId) {
+  const result = await channels.getMessageMetricsForConversation(
+    conversationId
+  );
+  return result;
+}
 
 async function removeAllMessagesInConversation(
   conversationId,
@@ -800,7 +825,7 @@ async function removeAllMessagesInConversation(
     // Yes, we really want the await in the loop. We're deleting 100 at a
     //   time so we don't use too much memory.
     // eslint-disable-next-line no-await-in-loop
-    messages = await getMessagesByConversation(conversationId, {
+    messages = await getOlderMessagesByConversation(conversationId, {
       limit: 100,
       MessageCollection,
     });

js/modules/signal.js

@@ -28,51 +28,25 @@ const {
   ContactDetail,
 } = require('../../ts/components/conversation/ContactDetail');
 const { ContactListItem } = require('../../ts/components/ContactListItem');
-const { ContactName } = require('../../ts/components/conversation/ContactName');
 const {
   ConversationHeader,
 } = require('../../ts/components/conversation/ConversationHeader');
-const {
-  EmbeddedContact,
-} = require('../../ts/components/conversation/EmbeddedContact');
 const { Emojify } = require('../../ts/components/conversation/Emojify');
-const {
-  GroupNotification,
-} = require('../../ts/components/conversation/GroupNotification');
 const { Lightbox } = require('../../ts/components/Lightbox');
 const { LightboxGallery } = require('../../ts/components/LightboxGallery');
 const {
   MediaGallery,
 } = require('../../ts/components/conversation/media-gallery/MediaGallery');
-const { Message } = require('../../ts/components/conversation/Message');
-const { MessageBody } = require('../../ts/components/conversation/MessageBody');
 const {
   MessageDetail,
 } = require('../../ts/components/conversation/MessageDetail');
 const { Quote } = require('../../ts/components/conversation/Quote');
-const {
-  ResetSessionNotification,
-} = require('../../ts/components/conversation/ResetSessionNotification');
-const {
-  SafetyNumberNotification,
-} = require('../../ts/components/conversation/SafetyNumberNotification');
 const {
   StagedLinkPreview,
 } = require('../../ts/components/conversation/StagedLinkPreview');
-const {
-  TimerNotification,
-} = require('../../ts/components/conversation/TimerNotification');
-const {
-  TypingBubble,
-} = require('../../ts/components/conversation/TypingBubble');
-const {
-  UnsupportedMessage,
-} = require('../../ts/components/conversation/UnsupportedMessage');
-const {
-  VerificationNotification,
-} = require('../../ts/components/conversation/VerificationNotification');
 
 // State
+const { createTimeline } = require('../../ts/state/roots/createTimeline');
 const {
   createCompositionArea,
 } = require('../../ts/state/roots/createCompositionArea');
@@ -264,33 +238,23 @@ exports.setup = (options = {}) => {
     CaptionEditor,
     ContactDetail,
     ContactListItem,
-    ContactName,
     ConversationHeader,
-    EmbeddedContact,
     Emojify,
-    GroupNotification,
     Lightbox,
     LightboxGallery,
     MediaGallery,
-    Message,
-    MessageBody,
     MessageDetail,
     Quote,
-    ResetSessionNotification,
-    SafetyNumberNotification,
     StagedLinkPreview,
-    TimerNotification,
     Types: {
       Message: MediaGalleryMessage,
     },
-    TypingBubble,
-    UnsupportedMessage,
-    VerificationNotification,
   };
 
   const Roots = {
     createCompositionArea,
     createLeftPane,
+    createTimeline,
     createStickerManager,
     createStickerPreviewModal,
   };