Spinner and busy DOM

help
1

Hi,
I need to show more “shops” on site when you click button. All data needed are already on client and it works.
But it take some time when rendering 130 <li> with template and some helpers per template etc.
I want to provide some feedback to user so show spinner.

Currently I am doing it this way, as I want spinner to stop when all will be rendered.
So I created my block template - stopSpinner, to which I paste parent function which set reactive var to false.
And in Template.stopSpinner.onRendered I call that function - which react by turning spinner off.

      {{#if isThereMoreShops}}
        <button class="btn" data-more-shops>
          Zobraziť viac obchodov ( {{shopFeedLength}} )
          {{#stopSpinner stopSpin=stopSpin}}
            {{#if showSpinner}}
              Spinner
            {{/if}}
          {{/stopSpinner}}
        </button>
      {{/if}}
      {{#if isAlreadyExtended}}
        <button class="btn" data-less-shops>
          Zobraziť len 5 obchodov
          {{#stopSpinner stopSpin=stopSpin}}
            {{#if showSpinner}}
              Spinner
            {{/if}}
          {{/stopSpinner}}
        </button>
      {{/if}}

Problem is that when I handle event, the spinner part is not shown till I delay list expanding.
So I expect DOM to be busy rendering.
But I dont like setTimeout and would like to use some better timing, is there any?
Or is there some better pattern ?
For now

Template.productAvailableShops.events
  'click button[data-more-shops]': (event, instance) ->
    instance.spinner.set(true)
    Meteor.setTimeout(instance.incrementListLength, 100)
2

Currently the result of whole computation/filters etc is pushed to resultFeed reactiveVar - that is array and used in {{#each}}

I am thinking how to bundle it in Trackers and afterFlush callback that it starts with rendering spinner, than recomputing array values and when these are rendered, than it recompute spinner to turn it off.

Something like when you wait for subscription, but this time you wait for {{#each}} recomputation.

But I am still not able to pull it out correctly without ugly setTimeout :frowning:

I have more triggers than that 1 button which start the recompute operation and I would like to have spinner activated for each of them.
So most probably for every operation manipulating {{#each}} . In other words everytime that my resultFeed ReactiveVariable change so my helper re-compute and than is used in {{#each}}.

This would be some pseudo code how I would want it to run if it waits for every render to finish

Tracker.autorun ->
  spinner.set(true)
  showFeed.set(resultFeed.get())
  spinner.set(false)

But I am lost

logged on SO http://stackoverflow.com/questions/34274794/each-and-spinner-dom-timing