added simple loading template mechanism for music route

app/components/song-list.js

@@ -1,16 +1,6 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
 
 export default class SongListComponent extends Component {
-  @tracked currentlyLoading = false;
-
-  @action
-  async loading(transition) {
-    this.currentlyLoading = true;
-
-    transition.promise.finally(function () {
-      this.currentlyLoading = false;
-    });
-  }
+  @tracked isLoading = false;
 }

app/controllers/music.js

@@ -1,3 +1,6 @@
 import Controller from '@ember/controller';
+import { tracked } from '@glimmer/tracking';
 
-export default class MusicController extends Controller {}
+export default class MusicController extends Controller {
+  @tracked isLoading = false;
+}

app/routes/music.js

@@ -1,9 +1,11 @@
 import Route from '@ember/routing/route';
 import { service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
 
 export default class MusicRoute extends Route {
   @service store;
   @service headData;
+  @tracked isLoading = true;
 
   model() {
     return this.store.findAll('song');

app/templates/music-loading.hbs

@@ -0,0 +1,3 @@
+<div class="loading-spinner">
+  {{t "general.loading"}}
+</div>

app/templates/music.hbs

@@ -1,3 +1,7 @@
 <h2>{{t "layout.headMusic"}}</h2>
 <p>{{t "sections.music.description"}}</p>
-<SongList @songs={{@model}} />
+{{#if this.isLoading}}
+  {{t "general.loading"}}
+{{else}}
+  <SongList @songs={{@model}} />
+{{/if}}