Animate in-conversation panels on show/hide

js/views/contact_list_view.js

@@ -16,6 +16,7 @@
       initialize(options) {
         this.ourNumber = textsecure.storage.user.getNumber();
         this.listenBack = options.listenBack;
+        this.loading = false;
 
         this.listenTo(this.model, 'change', this.render);
       },
@@ -39,19 +40,28 @@
             profileName: this.model.getProfileName(),
             verified: this.model.isVerified(),
             onClick: this.showIdentity.bind(this),
+            disabled: this.loading,
           },
         });
         this.$el.append(this.contactView.el);
         return this;
       },
       showIdentity() {
-        if (this.model.id === this.ourNumber) {
+        if (this.model.id === this.ourNumber || this.loading) {
           return;
         }
+
+        this.loading = true;
+        this.render();
+
         const view = new Whisper.KeyVerificationPanelView({
           model: this.model,
+          onLoad: () => {
+            this.loading = false;
+            this.listenBack(view);
+            this.render();
+          },
         });
-        this.listenBack(view);
       },
     }),
   });

js/views/conversation_view.js

@@ -954,7 +954,7 @@
       };
 
       const view = new Whisper.ReactWrapperView({
-        className: 'panel-wrapper',
+        className: 'panel',
         Component: Signal.Components.MediaGallery,
         props: await getProps(),
         onClose: () => {
@@ -1537,7 +1537,7 @@
 
       const props = message.getPropsForMessageDetail();
       const view = new Whisper.ReactWrapperView({
-        className: 'message-detail-wrapper',
+        className: 'panel message-detail-wrapper',
         Component: Signal.Components.MessageDetail,
         props,
         onClose,
@@ -1597,11 +1597,11 @@
 
     listenBack(view) {
       this.panels = this.panels || [];
-      if (this.panels.length > 0) {
-        this.panels[0].$el.hide();
-      }
       this.panels.unshift(view);
-      view.$el.insertBefore(this.$('.panel').first());
+      view.$el.insertAfter(this.$('.panel').last());
+      view.$el.one('animationend', () => {
+        view.$el.addClass('panel--static');
+      });
     },
     resetPanel() {
       if (!this.panels || !this.panels.length) {
@@ -1611,14 +1611,15 @@
       const view = this.panels.shift();
 
       if (this.panels.length > 0) {
-        this.panels[0].$el.show();
-      }
-      view.remove();
-
-      if (this.panels.length === 0) {
-        // Make sure poppers are positioned properly
-        window.dispatchEvent(new Event('resize'));
+        this.panels[0].$el.fadeIn(250);
       }
+      view.$el.addClass('panel--remove').one('transitionend', () => {
+        view.remove();
+        if (this.panels.length === 0) {
+          // Make sure poppers are positioned properly
+          window.dispatchEvent(new Event('resize'));
+        }
+      });
     },
 
     endSession() {

js/views/key_verification_view.js

@@ -22,6 +22,9 @@
 
       this.loadKeys().then(() => {
         this.listenTo(this.model, 'change', this.render);
+        if (options.onLoad) {
+          options.onLoad();
+        }
       });
     },
     loadKeys() {