Stache render delayed until after can-connect update

CanJS
1

I have noticed that my stache template (index.stache, sign.stache) doesn’t render until after not only does it get the cached data from the fall-though-cache, but even not until it gets the updated data from the server and only renders with the new data from the server.

I thought it should render immediately, then get new server data and update the cache and the stache.

I then thought after reading https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/ that perhaps the promise for the update was resolving before the render had a chance to run and since promise thens are microtasks the list update happened before the render, which is a macrotask.

But then I see even the component’s “inserted” event fires before the render, which confuses me, since I thought “inserted” is supposed to be called after the render. And more than that, I have a setTimeout in the “inserted” event which is also executing before the render. I am using Chrome on Ubuntu.

Any thoughts out there?

for reference: index.stache

  <body>
    <can-import from="menuboard-manager/styles.less!" />
    
    <can-import from="menuboard-manager/utils/logger/" />
    <mbm-log></mbm-log>

    <can-import from="menuboard-manager/utils/keypad/" />
    <key-pad></key-pad>

    <can-import from="menuboard-manager/app" export-as="viewModel" />
    <can-import from="menuboard-manager/sign/" />
    <mbm-sign></mbm-sign>

    {{asset "inline-cache"}}

sign.stache

{{#if signPromise.isPending}}
<p>Sign Loading...</p>
{{else}}
{{#with sign.currentPresentation}}
<style type="text/css" media="screen">
	{{#each ./fonts}}
		@font-face {
			font-family: {{fontName(font.id)}}; 
			src: url({{localUrl(font.id, font.url, 'font/')}});
		}	
	{{/each}}
	{{css}}
</style>
<div id="fields">
	{{#each ./fields}}
		<div {$id}="id" {$class}="classes" {$style}="parseCSS('field', cssrule)">{{value}}</div>
	{{/each}}
</div>
<div id="slideshows">
{{#each ./slideshows}}
	<div {$id}="id" {$class}="classes" {$style}="parseCSS('slideshow', cssrule)" data-cycle-slides="> div" >
	{{#each slides}}
		<div {$id}="id" {$data-cycle-timeout}="duration(props.duration)" {$data-cycle-fx}="props.transition">
		{{#eq type 'video'}}
			<video id="video-{{id}}" {$src}="localUrl(id, url, 'media/s')" type="video/mp4" />
		{{else}}
			<img id="img-{{id}}" {$src}="localUrl(id, url, 'media/s')" />
		{{/eq}}
		</div>
	{{/each}}
	</div>
{{/each}}
</div>
{{/with}}
{{/if}}

part of sign.js

    sign: {
      get(last, set) {
        var self = this;
        return this.attr('signPromise').then(function(signs) {
          var sign = signs[0], actpres, curpres;
          if(!sign) {
            self.attr('logger').error('No Signs Retrieved from Server');
            set(sign);
            return;
          }

          // 1st check if there is only 1 active presentation,
          // if only 1 presentation exists at all, use it regardless
          // whether it is marked active or not (better than a blank screen)
          if(sign.presentations.length === 1) {
            // don't need to worry about scheduling or any other multi-presention logic
            //curpres = self.processPresentation(sign.presentations[0]);
            //new Presentation({id: curpres.id, data: curpres}).save();
            self.attr('logger').debug('Only One Presentation found: '+sign.presentations[0].id);
            self.loadPresentation(sign, sign.presentations[0]);
            set(sign);
          }