Loading substates race condition

components.my-component\.js

import { action } from '@ember/object';
import Component from '@glimmer/component';

export default class extends Component {
  willDestroy() {
    super.willDestroy(...arguments);

    console.log('Destroying component...');
  }
}

controllers.application\.js

import Controller from '@ember/controller';
import { inject as service } from '@ember/service';

export default class ApplicationController extends Controller {
  @service router;

  appName = 'Ember Twiddle';

  doClick(event) {
    if (event.srcElement.tagName === 'A') {
		  console.log('Click action recorded');
    }
  }

  handleRouteWillChange(transition) {
    console.log('Route will change...');
    //if (transition.to.find(route => route.name === 'my-route-b'))
    //transition.abort();
  }

  handleRouteDidChange() {
    console.log('Route did change...');
  }

  constructor() {
	  super(...arguments);

    document.body.addEventListener('click', this.doClick);
    this.router.on('routeWillChange', this, this.handleRouteWillChange);

    this.router.on('routeDidChange', this, this.handleRouteDidChange);
  }
}

router\.js

import EmberRouter from '@ember/routing/router';
import config from './config/environment';

const Router = EmberRouter.extend({
  location: 'none',
  rootURL: config.rootURL
});

Router.map(function() {
  this.route('my-route-a');
this.route('my-route-b');
});

export default Router;

routes.my-route-a\.js

import Route from '@ember/routing/route';
import { tracked } from '@glimmer/tracking';

export default Route.extend({
});

routes.my-route-b\.js

import Route from '@ember/routing/route';

export default Route.extend({
  model() {
    // Try removing this function to see what happens
    // when transitioning to a route that doesn't need
    // resolution
    return new Promise(r => setTimeout(r, 2000));
  },

  afterModel() {
    //this.transitionTo('my-route-a');
  }
});

templates.application\.hbs

<h1>hi! Go to /my-route-a</h1>
<br>
<br>

{{outlet}}
<br>
<br>

templates.components.my-component\.hbs

<div> 
  <LinkTo @route='my-route-b'>Click ME!!</LinkTo>
</div>

templates.loading\.hbs

{{log 'Entering loading template..'}}

templates.my-route-a\.hbs

Route A

{{#if this.foo}}
  Something!
{{/if}}

<MyComponent/>

templates.my-route-b\.hbs

Route B

twiddle\.json

{
  "version": "0.17.1",
  "EmberENV": {
    "FEATURES": {},
    "_TEMPLATE_ONLY_GLIMMER_COMPONENTS": false,
    "_APPLICATION_TEMPLATE_WRAPPER": true,
    "_JQUERY_INTEGRATION": true
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js",
    "ember": "3.18.1",
    "ember-template-compiler": "3.18.1",
    "ember-testing": "3.18.1"
  },
  "addons": {
    "@glimmer/component": "1.0.0"  }
}