perf(send-button): dramatically improve transition animation jank

app/components/send-button/component.js

@@ -1,14 +1,39 @@
 import Component from '@ember/component';
 
-export default Component.extend({
-  classNameBindings: ['expand', 'shrink', 'active'],
+import KeyboardShortcuts from 'ember-keyboard-shortcuts/mixins/component';
+import { computed, action } from 'ember-decorators/object';
+
+export default Component.extend(KeyboardShortcuts, {
+  classNameBindings: ['isExpanded:expand'],
 
   wallet: null,
 
-  expand: false,
-  shrink: false,
-  active: false,
+  isExpanded: false,
 
   onOpen: null,
   onClose: null,
+
+  @computed
+  get keyboardShortcuts() {
+    return {
+      esc: {
+        action: 'cancel',
+        scoped: true,
+      },
+    };
+  },
+
+  @action
+  cancel() {
+    const isExpanded = this.get('isExpanded');
+    if (isExpanded) {
+      const wallet = this.get('wallet');
+      const onClose = this.get('onClose');
+      if (onClose) {
+        return onClose(wallet);
+      }
+    }
+
+    return false;
+  },
 });

app/components/send-button/styles.scss

@@ -3,66 +3,76 @@
   overflow: hidden;
   width: 70px;
   height: 70px;
-  right: 30px;
-  bottom: 30px;
+  right: 20px;
+  bottom: 20px;
   z-index: 10;
-  border-radius: 80px;
+  border-radius: 70px;
   box-shadow: 0 1px 4px rgba(0, 0, 0, .6);
   background-color: $light-blue;
-  color:$white;
-  cursor: pointer;
-  margin: 20 auto 0;
-  transition: all 1s ease-in-out;
+  color: $white;
+  margin: 30 auto 0;
 
   &.expand {
-    animation: expand 1s 1 forwards;
-    border-radius: 0;
-  }
-
-  &.active {
-    border-radius: 0;
-    bottom: 0;
-    height: 100vh;
-    right: 0;
-    width: 100%;
-  }
+    animation: expand 0.3s 0s forwards;
 
-  &.shrink {
-    animation: shrink 1s 1 forwards;
-    transition: all 1s ease-in-out;
+    .send-form {
+      opacity: 0;
+      animation: 0.3s ease fade-in forwards;
+      animation-delay: 0.3s;
+    }
   }
 
   h1 {
     font-weight: 300;
   }
 
-  a {
+  .toggle {
+    cursor: pointer;
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    width: 70px;
+    height: 70px;
+    border: 0;
+    outline: none;
+    background-color: inherit;
     color: $white;
 
-    &:hover {
-      color: $white;
-    }
-
     i {
-      bottom: 20px;
-      font-size: 30px;
-      margin: 0 auto;
       position: absolute;
-      right: 22px;
-      transition: all 0.3s ease-in-out;
+      top: 50%;
+      left: 50%;
+      width: 30px;
+      height: 30px;
+      margin: -14px 0 0 -16px;
+      padding: 0;
+      transition: transform 0.3s ease-in-out;
+      font-size: 28px;
+    }
 
-      &.expand {
-        transform: rotate(135deg);
+    &:active {
+      .fa-paper-plane {
+        transform: rotate(45deg);
+      }
+
+      .fa-times {
+        transform: rotate(-90deg);
       }
     }
   }
 
+  &.expand {
+    .toggle {
+      top: 0;
+    }
+  }
+
   p {
     font-size:20px;
     padding-left: 30px;
     padding-right: 30px;
     margin-top: -3px;
-    text-align:left;
+    text-align: left;
   }
 
   .send-form {
@@ -131,30 +141,28 @@
       color: $red;
     }
   }
-}
-
-@keyframes expand {
-  from {
-    width: 70px;
-    height: 70px;
-    transform: translate(0);
-  }
-  to {
-    width: 100%;
-    height: 100%;
-    transform: translate(30px, 30px);
-  }
-}
 
-@keyframes shrink {
-  from {
-    width: 100%;
-    height: 100%;
-    transform: translate(30px, 30px);
-  }
-  to {
-    width: 70px;
-    height: 70px;
-    transform: translate(0);
+  @keyframes expand {
+    0% {
+      width: 70px;
+      height: 70px;
+      border-radius: 70px;
+      transform: translate(0);
+    }
+    25% {
+      border-radius: 60px;
+    }
+    50% {
+      border-radius: 20px;
+    }
+    90% {
+      border-radius: 10px;
+    }
+    100% {
+      width: 100%;
+      height: 100%;
+      border-radius: 0;
+      transform: translate(20px, 20px);
+    }
   }
 }

app/components/send-button/template.hbs

@@ -8,12 +8,6 @@
   </div>
 </div>
 
-{{#if expand}}
-  {{#link-to 'wallets.overview' wallet class="nav-link"}}
-    {{fa-icon "times" click=(action onClose) ariaLabel=(t 'send')}}
-  {{/link-to}}
-{{else}}
-  {{#link-to 'wallets.send' wallet class="nav-link"}}
-    {{fa-icon "paper-plane" click=(action onOpen) ariaLabel=(t 'receive')}}
-  {{/link-to}}
-{{/if}}
+<button class="toggle" {{action (optional (if isExpanded onClose onOpen))}}>
+  {{fa-icon (if isExpanded 'times' 'paper-plane') ariaLabel=(if isExpanded (t 'close') (t 'send'))}}
+</button>

app/wallets/overview/accounts/history/route.js

@@ -1,10 +1,21 @@
 import Route from '@ember/routing/route';
 import { get, set } from '@ember/object';
-import { action } from 'ember-decorators/object';
 
+import KeyboardShortcuts from 'ember-keyboard-shortcuts/mixins/route';
 import { hash } from 'ember-concurrency';
+import { computed, action } from 'ember-decorators/object';
+
+export default Route.extend(KeyboardShortcuts, {
+  @computed
+  get keyboardShortcuts() {
+    return {
+      esc: {
+        action: 'hideHistory',
+        scoped: true,
+      },
+    };
+  },
 
-export default Route.extend({
   async model() {
     const wallet = this.modelFor('wallets');
     const account = this.modelFor('wallets.overview.accounts');

app/wallets/overview/accounts/send/route.js

@@ -23,7 +23,7 @@ export default Route.extend({
   },
 
   afterModel() {
-    this.controllerFor('wallets.overview').set('expand', true);
+    this.controllerFor('wallets.overview').set('isExpanded', true);
   },
 
   @action

app/wallets/overview/controller.js

@@ -1,22 +1,19 @@
 import Controller from '@ember/controller';
 
 import { computed } from 'ember-decorators/object';
-import { sort } from '@ember/object/computed';
+import { sort } from 'ember-decorators/object/computed';
 
 export default Controller.extend({
   queryParams: ['slide', 'currency'],
   slide: 0,
   currency: 'NANO',
 
   hideHistory: true,
-  expand: false,
-  shrink: false,
-  expanded: false,
-  firstTime: true,
+  isExpanded: false,
 
-  sortedAccounts: sort('model.accounts', 'sortBy'),
+  @sort('model.accounts', 'sortBy') sortedAccounts: null,
 
-  @computed()
+  @computed
   get sortBy() {
     // Fallback to sorting by `id` for stable sort.
     return ['modifiedTimestamp', 'id'];

app/wallets/overview/route.js

@@ -1,5 +1,5 @@
 import Route from '@ember/routing/route';
-import { get, getProperties, setProperties } from '@ember/object';
+import { get, setProperties } from '@ember/object';
 import { isEmpty } from '@ember/utils';
 
 import { action } from 'ember-decorators/object';
@@ -13,9 +13,7 @@ export default Route.extend({
     const walletOverviewController = this.controllerFor('wallets.overview');
     setProperties(walletOverviewController, {
       hideHistory: true,
-      expand: false,
-      shrink: false,
-      active: false,
+      isExpanded: false,
     });
 
     return this._super(...args);
@@ -41,20 +39,12 @@ export default Route.extend({
   },
 
   @action
-  toggleButton() {
-    const walletOverviewController = this.controllerFor('wallets.overview');
-    const { expand, shrink, firstTime } = getProperties(walletOverviewController, [
-      'expand',
-      'shrink',
-      'firstTime',
-    ]);
-
-    if (expand) {
-      setProperties(walletOverviewController, { expand: false, shrink: true });
-    } else if (firstTime) {
-      setProperties(walletOverviewController, { firstTime: false, expand: true });
-    } else {
-      setProperties(walletOverviewController, { expand: !expand, shrink: !shrink });
-    }
+  openSend(wallet) {
+    return this.transitionTo('wallets.send', wallet);
+  },
+
+  @action
+  closeSend(wallet) {
+    return this.transitionTo(this.routeName, wallet);
   },
 });

app/wallets/overview/template.hbs

@@ -6,6 +6,8 @@
 
 {{liquid-outlet class="history"}}
 
-{{#send-button wallet=model accounts=sortedAccounts expand=expand shrink=shrink onOpen=(route-action 'toggleButton') onClose=(route-action 'toggleButton')}}
+{{#send-button wallet=model accounts=sortedAccounts isExpanded=isExpanded
+    onOpen=(action (queue (toggle 'isExpanded' this) (route-action 'openSend' model)))
+    onClose=(action (queue (toggle 'isExpanded' this) (route-action 'closeSend' model)))}}
   {{liquid-outlet "sendOutlet" class="send-outlet"}}
 {{/send-button}}