add responsive ripple feedback on old/slow devices using requestanimation frame

[danDanV1]

On slow devices, the work-load from onclick and grabbing/rendering the page will blocks the ripple effect, and other indicators from rendering.

Topic covered here at Google I.O sums up the issue. 13min 11second mark. https://youtu.be/mmq-KVeO-uU?t=13m11s

Event: on older or low cpu powered device click/tap a paper-button. Expected result: ripple completes animation, page transitions. Result: after a short pause page transitions, ripple does not animate.

This also applies to animations such as the sidebar. Event: clicking a button/link in the sidebar to transition to a new page. Expected result: Sidebar completes closing animation before/while the page transitions. Result: Sidebar does not animate closing, there is a pause while the new page loads, then new page is shown immediately without any sidebar closing animation.

Could this be solved by adding a requestanimation from to the click event in paper-button?

[miguelcobain]

@edeis53 we've been seeing this problem for a long time. That double rAF trick could be a useful hint. Will investigate.

The reason why we can't just apply this fix is because ember uses anchors to transition routes. Not sure if we can intercept that and retrigger the event later. I need to experiment.

[danDanV1]

@miguelcobain good to hear that's on the radar. There's a few other tips in that talk that are useful as well. Such as the expected behaviour of the side bar being reactive to the swipe gesture (kinda like an ondrag event, moving in response to the swipe or partial swipe) https://youtu.be/mmq-KVeO-uU?t=21m19s

and for paper-tab, the expected behaviour of being able to swipe the content of a tab to transition between tabs https://youtu.be/mmq-KVeO-uU?t=22m51s

[danDanV1]

Works nicely.

Throttle the CPU on ChromeDev tools to 10x slowdown. Without the double rAF the animation barely starts before hanging. With the double rAF, the ripple animation plays (mostly). Much better user experience, especially in the sidebar.

paper-button.component

  click(event) {
    requestAnimationFrame(() => {
        requestAnimationFrame(() => {
            this.sendAction('onClick', event);
        })
    })

    // Prevent bubbling, if specified. If undefined, the event will bubble.
    return this.get('bubbles');
  }

Is there a way to preventdefault and stoppropogation of the mouseup and touchend events in ripplemixin? and then resume the events after rAFs? would be more elegant.