Message selection fixed and optimised for speed

5 years ago · 2b7af04587
parent d20d62e8c6
commit 2b7af04587
7 changed files with 82 additions and 16 deletions
--- a/background.html
+++ b/background.html
@ -35,10 +35,6 @@
  </script>

  <script type='text/x-tmpl-mustache' id='conversation-loading-screen'>
-    <div class='content'>
-      <img src='images/session/brand.svg' class='session-filter-color-green session-logo-128' />
-      <p class='session-logo-text'>SESSION</p>
-    </div>
  </script>

  <script type='text/x-tmpl-mustache' id='two-column'>
@ -574,6 +570,7 @@
  <script type='text/javascript' src='js/views/scroll_down_button_view.js'></script>
  <script type='text/javascript' src='js/views/toast_view.js'></script>
  <script type='text/javascript' src='js/views/session_toast_view.js'></script>
+  <script type='text/javascript' src='js/views/conversation_loading_view.js'></script>
  <script type='text/javascript' src='js/views/session_toggle_view.js'></script>
  <script type='text/javascript' src='js/views/session_modal_view.js'></script>
  <script type='text/javascript' src='js/views/session_dropdown_view.js'></script>
@ -621,9 +618,6 @@
 </head>
 <body>
  <div class='app-loading-screen'>
-    <div class='content'>
-      <img src='images/session/brand.svg' class='session-filter-color-green session-logo-128' />
-      <p class='session-logo-text'>SESSION</p>
  </div>

  <script type='text/javascript' src='js/background.js'></script>
--- a/js/modules/signal.js
+++ b/js/modules/signal.js
@ -18,6 +18,9 @@ const LinkPreviews = require('./link_previews');
 const AttachmentDownloads = require('./attachment_downloads');

 // Components
+const {
+  ConversationLoadingScreen,
+} = require('../../ts/components/ConversationLoadingScreen');
 const {
  AttachmentList,
 } = require('../../ts/components/conversation/AttachmentList');
@ -245,6 +248,7 @@ exports.setup = (options = {}) => {
  });

  const Components = {
+    ConversationLoadingScreen,
    AttachmentList,
    CaptionEditor,
    ContactDetail,
--- a/js/views/conversation_loading_view.js
+++ b/js/views/conversation_loading_view.js
@ -0,0 +1,25 @@
+/* global Whisper */
+
+// eslint-disable-next-line func-names
+(function() {
+    'use strict';
+  
+    window.Whisper = window.Whisper || {};
+  
+    Whisper.ConversationLoadingScreen = Whisper.View.extend({
+      initialize() {
+      },
+  
+      render() {
+        this.toastView = new Whisper.ReactWrapperView({
+          className: 'app-loading-wrapper',
+          Component: window.Signal.Components.ConversationLoadingScreen,
+          props: this.props,
+        });
+  
+        this.$el.append(this.toastView.el);
+      },
+  
+    });
+  })();
+  
--- a/js/views/conversation_view.js
+++ b/js/views/conversation_view.js
@ -46,11 +46,6 @@
    },
  });

-  Whisper.ConversationLoadingScreen = Whisper.View.extend({
-    templateName: 'conversation-loading-screen',
-    className: 'conversation-loading-screen',
-  });
-
  Whisper.ConversationView = Whisper.View.extend({
    className() {
      return ['conversation', this.model.get('type')].join(' ');
@ -148,6 +143,7 @@
      this.loadingScreen.render();
      this.loadingScreen.$el.prependTo(this.$('.discussion-container'));

+      
      this.window = options.window;
      this.fileInput = new Whisper.FileInputView({
        el: this.$('.attachment-list'),
--- a/js/views/inbox_view.js
+++ b/js/views/inbox_view.js
@ -23,17 +23,31 @@
    open(conversation) {
      const id = `conversation-${conversation.cid}`;
      const container = $('#main-view .conversation-stack');
-      const conversationOpened = container.children()[0].id === id
+      
+      // Has been opened since app sart, but not focussed
+      const conversationExists = container.children(`#${id}`).length > 0;
+      // Is focussed
+      const conversationOpened = container.children().first().id === id

      // To limit the size of the DOM for speed
-      const maxNumConversations = 5;
+      const maxNumConversations = 10;
      const numConversations = container.children().not('.conversation.placeholder').length;
-      const shouldRemoveConversation = numConversations > maxNumConversations;
+      const shouldTrimConversations = numConversations > maxNumConversations;

-      if (shouldRemoveConversation){
+      if (shouldTrimConversations){
+        // Removes conversation which has been hidden the longest
        container.children()[numConversations - 1].remove();
      }

+      if (conversationExists) {
+        // User opened conversation, move it to top of stack, rather than re-rendering
+        const conversations = container.children().not('.conversation.placeholder');
+        container.children(`#${id}`).first().insertBefore(conversations.first());
+        conversation.trigger('opened');
+       
+        return;
+      }
+
      if (! conversationOpened) {
        this.$el
          .first()
@ -88,6 +102,7 @@
      message: i18n('loading'),
    },
  });
+  

  Whisper.InboxView = Whisper.View.extend({
    templateName: 'two-column',
--- a/stylesheets/_session.scss
+++ b/stylesheets/_session.scss
@ -854,6 +854,19 @@ label {
  margin-left: 75px;
 }

+
+.conversation-loader {
+  height: 100%;
+  margin-top: 45vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &>div{
+    display: block;
+  }
+}
+
 .session-loader {
  display: inline-block;
  position: relative;
--- a/ts/components/ConversationLoadingScreen.tsx
+++ b/ts/components/ConversationLoadingScreen.tsx
@ -0,0 +1,19 @@
+import React from 'react';
+
+import { SessionSpinner } from './session/SessionSpinner';
+
+
+export class ConversationLoadingScreen extends React.PureComponent {
+  constructor(props: any) {
+    super(props);
+  }
+
+  public render() {
+
+    return (
+      <div className="conversation-loader">
+        <SessionSpinner />
+      </div>
+    );
+  }
+}