Ember route loading template only after page refresh

I have a simple application with route named addon which has static template.

When I navigate to it by , page get blank but when I refresh same page template is getting loaded properly.

Same issue is at Route only loads on page refresh - Ember JS but my scenario is different.

router.js

import Ember from 'ember';
import config from './config/environment';

const Router = Ember.Router.extend({
  location: config.locationType
});

Router.map(function() {
    this.mount('ember-engine-addon-demo', {as: 'routable'});
    /*this is only for addon components demo*/
    this.route('addon');
});

export default Router;

routes->addon.js

import Ember from 'ember';

export default Ember.Route.extend({
});

templates->index.hbs

Click here to see routable engine in action
<br><br>
<!--this is only for addon components demo-->
Click here to see ember addon in action

templates->application.hbs

<h2 id="title">This echo is from host app at app/templates/application.hbs</h2>
<!-- load from engine and engine addon -->

templates->addon.hbs

<!--this is only for addon components demo-->
<div style="padding-left:20px; color:green">This echo is from /app/templates/addon.hbs </div>
<div style="padding-left:50px; padding-top:20px; color:red"></div>