Avoid flashing when opening chat room.

css/converse.css

@@ -1120,22 +1120,6 @@
     #conversejs {
       width: 100%;
       width: 100vw; } }
-  #converse-embedded-chat .fade-in,
-  #conversejs .fade-in {
-    opacity: 0;
-    /* make things invisible upon start */
-    -webkit-animation-name: fadein;
-    -moz-animation-name: fadein;
-    animation-name: fadein;
-    -webkit-animation-fill-mode: forwards;
-    -moz-animation-fill-mode: forwards;
-    animation-fill-mode: forwards;
-    -webkit-animation-duration: 1s;
-    -moz-animation-duration: 1s;
-    animation-duration: 1s;
-    -webkit-animation-timing-function: ease;
-    -moz-animation-timing-function: ease;
-    animation-timing-function: ease; }
   #converse-embedded-chat ::-webkit-input-placeholder,
   #conversejs ::-webkit-input-placeholder {
     /* Chrome/Opera/Safari */
@@ -1181,26 +1165,41 @@
     opacity: 0; }
   100% {
     opacity: 1; } }
+  #converse-embedded-chat .fade-in,
+  #conversejs .fade-in {
+    opacity: 0;
+    /* make things invisible upon start */
+    -webkit-animation-name: fadein;
+    -moz-animation-name: fadein;
+    animation-name: fadein;
+    -webkit-animation-fill-mode: forwards;
+    -moz-animation-fill-mode: forwards;
+    animation-fill-mode: forwards;
+    -webkit-animation-duration: 750;
+    -moz-animation-duration: 750;
+    animation-duration: 750;
+    -webkit-animation-timing-function: ease;
+    -moz-animation-timing-function: ease;
+    animation-timing-function: ease; }
   #converse-embedded-chat .visible,
   #conversejs .visible {
-    visibility: visible;
-    opacity: 1;
+    opacity: 0;
+    /* make things invisible upon start */
     -webkit-animation-name: fadein;
     -moz-animation-name: fadein;
     animation-name: fadein;
     -webkit-animation-fill-mode: forwards;
     -moz-animation-fill-mode: forwards;
     animation-fill-mode: forwards;
-    -webkit-animation-duration: 350ms;
-    -moz-animation-duration: 350ms;
-    animation-duration: 350ms;
+    -webkit-animation-duration: 500ms;
+    -moz-animation-duration: 500ms;
+    animation-duration: 500ms;
     -webkit-animation-timing-function: ease;
     -moz-animation-timing-function: ease;
     animation-timing-function: ease; }
   #converse-embedded-chat .hidden,
   #conversejs .hidden {
-    opacity: 0;
-    display: none; }
+    opacity: 0; }
   #converse-embedded-chat .collapsed,
   #conversejs .collapsed {
     height: 0 !important;
@@ -1935,9 +1934,9 @@
     -webkit-animation-fill-mode: forwards;
     -moz-animation-fill-mode: forwards;
     animation-fill-mode: forwards;
-    -webkit-animation-duration: 1s;
-    -moz-animation-duration: 1s;
-    animation-duration: 1s;
+    -webkit-animation-duration: 750;
+    -moz-animation-duration: 750;
+    animation-duration: 750;
     -webkit-animation-timing-function: ease;
     -moz-animation-timing-function: ease;
     animation-timing-function: ease;

css/inverse.css

@@ -1120,22 +1120,6 @@
     #conversejs {
       width: 100%;
       width: 100vw; } }
-  #converse-embedded-chat .fade-in,
-  #conversejs .fade-in {
-    opacity: 0;
-    /* make things invisible upon start */
-    -webkit-animation-name: fadein;
-    -moz-animation-name: fadein;
-    animation-name: fadein;
-    -webkit-animation-fill-mode: forwards;
-    -moz-animation-fill-mode: forwards;
-    animation-fill-mode: forwards;
-    -webkit-animation-duration: 1s;
-    -moz-animation-duration: 1s;
-    animation-duration: 1s;
-    -webkit-animation-timing-function: ease;
-    -moz-animation-timing-function: ease;
-    animation-timing-function: ease; }
   #converse-embedded-chat ::-webkit-input-placeholder,
   #conversejs ::-webkit-input-placeholder {
     /* Chrome/Opera/Safari */
@@ -1181,26 +1165,41 @@
     opacity: 0; }
   100% {
     opacity: 1; } }
+  #converse-embedded-chat .fade-in,
+  #conversejs .fade-in {
+    opacity: 0;
+    /* make things invisible upon start */
+    -webkit-animation-name: fadein;
+    -moz-animation-name: fadein;
+    animation-name: fadein;
+    -webkit-animation-fill-mode: forwards;
+    -moz-animation-fill-mode: forwards;
+    animation-fill-mode: forwards;
+    -webkit-animation-duration: 750;
+    -moz-animation-duration: 750;
+    animation-duration: 750;
+    -webkit-animation-timing-function: ease;
+    -moz-animation-timing-function: ease;
+    animation-timing-function: ease; }
   #converse-embedded-chat .visible,
   #conversejs .visible {
-    visibility: visible;
-    opacity: 1;
+    opacity: 0;
+    /* make things invisible upon start */
     -webkit-animation-name: fadein;
     -moz-animation-name: fadein;
     animation-name: fadein;
     -webkit-animation-fill-mode: forwards;
     -moz-animation-fill-mode: forwards;
     animation-fill-mode: forwards;
-    -webkit-animation-duration: 350ms;
-    -moz-animation-duration: 350ms;
-    animation-duration: 350ms;
+    -webkit-animation-duration: 500ms;
+    -moz-animation-duration: 500ms;
+    animation-duration: 500ms;
     -webkit-animation-timing-function: ease;
     -moz-animation-timing-function: ease;
     animation-timing-function: ease; }
   #converse-embedded-chat .hidden,
   #conversejs .hidden {
-    opacity: 0;
-    display: none; }
+    opacity: 0; }
   #converse-embedded-chat .collapsed,
   #conversejs .collapsed {
     height: 0 !important;
@@ -1425,9 +1424,9 @@ body {
       -webkit-animation-fill-mode: forwards;
       -moz-animation-fill-mode: forwards;
       animation-fill-mode: forwards;
-      -webkit-animation-duration: 1s;
-      -moz-animation-duration: 1s;
-      animation-duration: 1s;
+      -webkit-animation-duration: 750;
+      -moz-animation-duration: 750;
+      animation-duration: 750;
       -webkit-animation-timing-function: ease;
       -moz-animation-timing-function: ease;
       animation-timing-function: ease;
@@ -2021,9 +2020,9 @@ body {
     -webkit-animation-fill-mode: forwards;
     -moz-animation-fill-mode: forwards;
     animation-fill-mode: forwards;
-    -webkit-animation-duration: 1s;
-    -moz-animation-duration: 1s;
-    animation-duration: 1s;
+    -webkit-animation-duration: 750;
+    -moz-animation-duration: 750;
+    animation-duration: 750;
     -webkit-animation-timing-function: ease;
     -moz-animation-timing-function: ease;
     animation-timing-function: ease;
@@ -2418,9 +2417,9 @@ body {
     -webkit-animation-fill-mode: forwards;
     -moz-animation-fill-mode: forwards;
     animation-fill-mode: forwards;
-    -webkit-animation-duration: 1s;
-    -moz-animation-duration: 1s;
-    animation-duration: 1s;
+    -webkit-animation-duration: 750;
+    -moz-animation-duration: 750;
+    animation-duration: 750;
     -webkit-animation-timing-function: ease;
     -moz-animation-timing-function: ease;
     animation-timing-function: ease;

sass/_core.scss

@@ -2,7 +2,7 @@
     opacity:0;  /* make things invisible upon start */
     @include animation-name(fadein);
     @include animation-fill-mode(forwards);
-    @include animation-duration(1s);
+    @include animation-duration(750);
     @include animation-timing-function(ease);
 }
 
@@ -28,10 +28,6 @@
         width: 100vw;
     }
 
-    .fade-in {
-        @include fade-in;
-    }
-
 	::-webkit-input-placeholder { /* Chrome/Opera/Safari */
         color: $subdued-color;
 	}
@@ -73,14 +69,18 @@
         100% { opacity: 1 }
     }
 
+    .fade-in {
+        @include fade-in;
+    }
+
     .visible {
-        visibility: visible;
-        opacity: 1;
+        opacity:0;  /* make things invisible upon start */
         @include animation-name(fadein);
         @include animation-fill-mode(forwards);
-        @include animation-duration(350ms);
+        @include animation-duration(500ms);
         @include animation-timing-function(ease);
     }
+
     .hidden {
         opacity: 0;
         display: none;

src/converse-chatview.js

@@ -917,8 +917,11 @@
                 },
 
                 focus () {
-                    this.el.querySelector('.chat-textarea').focus();
-                    _converse.emit('chatBoxFocused', this);
+                    const textarea_el = this.el.querySelector('.chat-textarea');
+                    if (!_.isNull(textarea_el)) {
+                        textarea_el.focus();
+                        _converse.emit('chatBoxFocused', this);
+                    }
                     return this;
                 },
 
@@ -940,8 +943,9 @@
                     }
                 },
 
-                show (focus) {
-                    if (u.isVisible(this.el) && this.$el.css('opacity') === "1") {
+                _show (focus) {
+                    /* Inner show method that gets debounced */
+                    if (u.isVisible(this.el)) {
                         if (focus) { this.focus(); }
                         return;
                     }
@@ -952,6 +956,18 @@
                     });
                 },
 
+                show (focus) {
+                    if (_.isUndefined(this.debouncedShow)) {
+                        /* We wrap the method in a debouncer and set it on the
+                         * instance, so that we have it debounced per instance.
+                         * Debouncing it on the class-level is too broad.
+                         */
+                        this.debouncedShow = _.debounce(this._show, 250, {'leading': true});
+                    }
+                    this.debouncedShow.apply(this, arguments);
+                    return this;
+                },
+
                 hideNewMessagesIndicator () {
                     const new_msgs_indicator = this.el.querySelector('.new-msgs-indicator');
                     if (!_.isNull(new_msgs_indicator)) {
@@ -993,8 +1009,11 @@
 
                 _scrollDown () {
                     /* Inner method that gets debounced */
-                    if (this.$content.is(':visible') && !this.model.get('scrolled')) {
-                        this.$content.scrollTop(this.$content[0].scrollHeight);
+                    if (_.isUndefined(this.content)) {
+                        return;
+                    }
+                    if (u.isVisible(this.content) && !this.model.get('scrolled')) {
+                        this.content.scrollTop = this.content.scrollHeight;
                         this.onScrolledDown();
                         this.model.save({'auto_scrolled': true});
                     }

src/converse-mam.js

@@ -191,8 +191,8 @@
                     this.model.on('change:connection_status', this.fetchArchivedMessagesIfNecessary, this);
                 },
 
-                render () {
-                    const result = this.__super__.render.apply(this, arguments);
+                renderChatArea () {
+                    const result = this.__super__.renderChatArea.apply(this, arguments);
                     if (!this.disable_mam) {
                         this.$content.on('scroll', _.debounce(this.onScroll.bind(this), 100));
                     }

src/converse-muc.js

@@ -564,6 +564,18 @@
                     this.occupantsview.setOccupantsHeight();
                 },
 
+                show (focus) {
+                    if (u.isVisible(this.el)) {
+                        if (focus) { this.focus(); }
+                        return;
+                    }
+                    // Override from converse-chatview in order to not use
+                    // "fadeIn", which causes flashing.
+                    u.showElement(this.el);
+                    this.afterShown();
+                    if (focus) { this.focus(); }
+                },
+
                 afterConnected () {
                     if (this.model.get('connection_status') === converse.ROOMSTATUS.ENTERED) {
                         this.setChatState(_converse.ACTIVE);