Dart and Polymer Dart.
I am using many core-list-dart Lists in my program that populate with data upon page changed (using core-pages). I am finding that even though core-list-dart populates much quicker than using <template repeat="...>, it still causes several seconds delay (up to 8 seconds if there's enough data) when switching to a new page.
Fine. I understand that I'm using a beta version of polymer (and consequently Polymer Dart), and things will be slower. So for the sake of end-user sanity, I want to put up a loading spinner when I change pages. I can use futures to check for data populating the List being used, but that's not where the delay really occurs. The List populates with the data and the spinner goes away, and then the delay kicks in while the core-list-dart takes its sweet time, apparently, looping through the list or something.
How can I (or can I even) deal with keeping a loading indication (a spinner in my case -- specifically paper-spinner) up until the data with the core-list-dart is in place and ready to display.
Here is a specific example of the html code:
<core-list-dart id="list1" class="{{listclass}}" data="{{tierOne}}" grid="true" width="150">
<template>
<div index="{{index}}" class="{{ {'strike': model.cleared} }} ringcontainer">
<img _src="../../../web/images/rings/thumbnails/{{model.image}}" class="{{ {'strike': model.cleared} }} ringimagethumb" data-sku="{{model.SKU}}" data-finish="{{model.finish}}" on-click="{{zoomRing}}"/>
<core-selector theme="core-light-theme" on-core-select="{{removeRing}}" multi>
<core-item icon="{{model.icon}}" data-sku="{{model.SKU}}" data-finish="{{model.finish}}" class="{{ {'strike': model.cleared} }} ringdata">{{model.added}}</core-item>
</core-selector>
<div index="{{index}}" class="{{ {'strike': model.cleared} }} ringdata">Category: {{model.category}}</div>
<div index="{{index}}" class="{{ {'strike': model.cleared} }} ringdata">SKU: {{model.SKU}}</div>
<div index="{{index}}" class="{{ {'strike': model.cleared} }} ringdata">Finish: {{model.finish}}</div>
<div index="{{index}}" class="{{ {'strike': model.cleared} }} ringdata">${{model.price}}</div>
<div index="{{index}}" class="{{ {'strike': model.cleared} }} ringdata">(tier{{model.tier}}-id{{model.id}})</div>
</div>
</template>
</core-list-dart>
That is all within a core-pages tag and when the selected page changes to that section, this is the code that populates the list (initialized as @observable List tierOne = toObservable([]);) Ring, obviously, is the custom class I have used and tierData is the List of Rings that contains all of the data.
tierOne = tierData.where((Ring element) => element.tier == 1).toList();
This all works great. But it is slow -- particularly when being run on the tablets that the app is used on in the field.
Of course I am only presuming that the delay is with the core-list-dart -- as the core-pages swaps quite quickly otherwise.
I haven't tried with core-list-dart but usually you'd do this with the
unresolvedclass.https://www.polymer-project.org/0.5/docs/polymer/styling.html#fouc-prevention
something like (not tested):