polymer - How can I know that Template Repeat has finished?

Question

Element needs some time for template-repeat to render all content, so paper-spinner is used to notify the user to wait.

How can I know that template-repeat has finished so I can turn off the spinner?

And related question: how can inner element "item-details" be selected? Again, template-repeat has to be finished first.

Here's the code I am using:

<polymer-element name="item-list">

  <template>
    <paper-spinner active></paper-spinner>

    <template id="repeat_items" repeat="{{ item  in  car.items }}">
         <item-details id="item_details" item="{{item}}"></item-details>
    </template>....

This is some simulation of the problem: plnkr.co

Edit

links from research:

spinner example

why does onmutation disconnect after first mutation?

polymer-how-to-watch-for-change-in-content-properties

Answer 1

There are component lifecycle hooks.

You are probably looking for domReady.

Called when the element’s initial set of children are guaranteed to exist. This is an appropriate time to poke at the element’s parent or light DOM children. Another use is when you have sibling custom elements (e.g. they’re .innerHTML‘d together, at the same time). Before element A can use B’s API/properties, element B needs to be upgraded. The domReady callback ensures both elements exist.

Polymer('tag-name', {
  domReady: function() {
     // hide the spinner 
     // select the first item details element
  }
});

As for selecting elements, you can traverse the component's shadow dom like so:

this.shadowRoot.querySelector(selector);

EDIT...

The domReady hook is great if you have all of your data up-front. If you get data asynchronously, then you can use a change watcher.

Here's is a fork of your plunkr that successfully selects the child components after the data changes. Notice the setTimeout(f, 1) that defers selection until after the DOM updates.

carsChanged: function(){
    var _this = this;
    setTimeout(function(){
       console.log(_this.shadowRoot.querySelectorAll('item-details'))
    },1)
}