initial loading indicator (ring)

src/components/song.js

@@ -19,6 +19,7 @@ AFRAME.registerComponent('song', {
     this.analyserSetter = {buffer: true};
     this.audioAnalyser = this.data.analyserEl.components.audioanalyser;
     this.context = this.audioAnalyser.context;
+    this.songLoadingIndicator = document.getElementById('songLoadingIndicator');
 
     this.victory = this.victory.bind(this);
 
@@ -118,6 +119,8 @@ AFRAME.registerComponent('song', {
   },
 
   onFetchProgress: function (evt) {
-
+    const progress = evt.loaded / evt.total;
+    this.songLoadingIndicator.setAttribute(
+      'geometry', 'thetaLength', progress * 360);
   }
 });

src/templates/score.html

@@ -1,6 +1,6 @@
 <a-entity
   id="scoreContainer"
-  bind__visible="!menu.active && !!challenge.id && !challenge.isLoading">
+  bind__visible="isPlaying || isPaused">
   <a-entity position="0 0.01 -1.3">
     <a-entity
       id="score"

src/templates/stage.html

@@ -73,6 +73,14 @@
 
   <a-entity id="beams" bind__beams="isPlaying: isPlaying"></a-entity>
 
+  <a-entity
+    id="songLoadingIndicator"
+    bind__visible="isSongLoading"
+    geometry="primitive: ring; radiusInner: 0.05; radiusOuter: 0.08"
+    material="shader: flat; color: #FAFAFA; opacity: 0.75"
+    position="0 1.4 -2.5">
+  </a-entity>
+
   <a-entity
     mixin="textFont"
     bind__animation__opacity="enabled: challenge.isLoading || isSongLoading"