CODEWITHSUNDEEP
javascriptpolymer
MoorLi
MoorLi

Reputation: 193

Polymer how to render <template> asynchronous without affecting interaction with user

My page have several huge <template>, only will be render and show in any time. But when changing <template> to render, it takes too long. For example:

<polymer-element name = "my-element">
  <template>
   <template if = "{{render == '#1'}}">
      <!--Many elements, takes long time to render-->
   </template>
   <template if = "{{render == '#2'}}">
      <!--Many elements, takes very long time to render-->
   </template>
   <paper-button on-click = "{{changeRender}}"></paper-button>
  </template>
  <script>
    Polymer({
      render: '#1',
      changeRender: function() {
        this.render = '#2';
     }
    });
 </script>
</polymer-element>

When user clicks button, the ripple of paper shows up but stuck and stay until <template if = "{{render == '#2'}}"> rendered. I've tried to change code to this:

changeRender: function() {
  var obj = this;
  this.async(function() {
    obj.render = '#2';
  }, null, 300);
}

It won't stuck now but the time delay is a bit unfriendly to users, does anyone has a better solution? Thanks!

Upvotes: 1

Views: 853

Answers (1)

ebidel
ebidel

Reputation: 24119

This seems related to https://github.com/Polymer/paper-ripple/issues/10.

One thing you can do is wait for the ripple animation to finish before activating the template:

<paper-button on-core-transitionend="{{changeRender}}"></paper-button>

changeRender: function() {
  this.render = '#2';
}

Upvotes: 1

Related Questions