Merge pull request #215 from julianpoy/fix-slow-messaging

Fix slow messaging
julianpoy · Apr 4, 2019 · 41514e8 · 41514e8
2 parents 3d3802c + d076218
commit 41514e8
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 6 deletions.
diff --git a/Frontend/src/pages/info-components/release-notes/release-notes.html b/Frontend/src/pages/info-components/release-notes/release-notes.html
@@ -27,13 +27,14 @@
   - Added a better error message for when a user uploads an invalid file format for LCB import.<br />
   - Improved search: Added fuzzy matching - mistyped words will now show results, but at a lower ranking in the results with exact matches<br />
   - Improved search: Re-added support for searching in source, description, instructions, ingredients, and notes.<br />
-  - Improved search: A match in the title will be heavily booested, and a match in the source or description will be slightly boosted<br />
+  - Improved search: A match in the title will be heavily boosted, and a match in the source or description will be slightly boosted<br />
   - Added a warning for unsupported browsers<br />
   - Added the contribute page to the sidemenu!<br />
   - Added an action button to add recipe to meal plan from the recipe details page<br />
   - Recipe authoring page (edit, create) now shows preview of recipe image<br />
   - Added a tips, tricks and tutorials page to the about and support page<br />
   - Open recipes in new tab from recipe list: control + click or command + click on a recipe<br />
+  - Fixed a bug where message thread text input would be slow on longer threads<br />
 
   <br />
 

diff --git a/Frontend/src/pages/messaging-components/message-thread/message-thread.html b/Frontend/src/pages/messaging-components/message-thread/message-thread.html
@@ -24,8 +24,8 @@
       class="message"
       [ngClass]="{'me': message.toUser.id === message.otherUser.id, 'blue': message.fromUser.id === message.otherUser.id }"
       *ngFor="let message of messages; let i = index; trackBy: trackByFn">
-      <div class="time-divider" *ngIf="deservesDateDiff(messages[i-1], messages[i])">
-        {{ formatMessageDividerDate(message.createdAt) }}
+      <div class="time-divider" *ngIf="message.deservesDateDiff">
+        {{ message.dateDiff }}
       </div>
       <div class="chat" *ngIf="!message.recipe" (press)="setSelectedChat(i)">
         <span [innerHTML]="message.body"></span>
@@ -63,7 +63,7 @@ <h2 text-wrap>Recipe deleted</h2>
       </div>
 
       <div class="chatDetails" *ngIf="selectedChatIdx === i">
-        {{ formatMessageDate(message.createdAt) }}
+        {{ message.formattedDate }}
       </div>
     </div>
   </div>

diff --git a/Frontend/src/pages/messaging-components/message-thread/message-thread.ts b/Frontend/src/pages/messaging-components/message-thread/message-thread.ts
@@ -70,10 +70,15 @@ export class MessageThreadPage {
     } else {
       var loading = this.loadingService.start();
 
-      this.content.getNativeElement().style.opacity = 0;
+      let messageArea;
+      try {
+        this.content.getNativeElement().children[1].children[0];
+      } catch(e){};
+
+      if (messageArea) messageArea.style.opacity = 0;
       this.loadMessages(true).then(() => {
         loading.dismiss();
-        this.content.getNativeElement().style.opacity = 1;
+        if (messageArea) messageArea.style.opacity = 1;
       }, () => {
         loading.dismiss();
       });
@@ -132,6 +137,7 @@ export class MessageThreadPage {
     return new Promise((resolve, reject) => {
       this.messagingService.fetch(this.otherUserId).subscribe(response => {
         this.messages = response.map(message => {
+          // Reuse messages that have already been parsed for performance. Otherwise, send it through linkify
           if (this.messagesById[message.id]) {
             message.body = this.messagesById[message.id].body;
           } else {
@@ -143,6 +149,8 @@ export class MessageThreadPage {
           return message;
         });
 
+        this.processMessages();
+
         this.scrollToBottom.call(this, !isInitialLoad, true, () => {
           resolve();
         });
@@ -159,6 +167,15 @@ export class MessageThreadPage {
     });
   }
 
+  processMessages() {
+    for (var i = 0; i < this.messages.length; i++) {
+      let message = this.messages[i];
+      message.deservesDateDiff = !!this.deservesDateDiff(this.messages[i-1], message);
+      if (message.deservesDateDiff) message.dateDiff = this.formatMessageDividerDate(message.createdAt);
+      message.formattedDate = this.formatMessageDate(message.createdAt);
+    }
+  }
+
   sendMessage() {
     if (!this.pendingMessage) return;
 
@@ -178,6 +195,8 @@ export class MessageThreadPage {
 
       this.messages.push(response);
 
+      this.processMessages();
+
       this.scrollToBottom(true, true);
     }, err => {
       this.messagePlaceholder = 'Message...';