no show song progress ring until preloaded

src/components/song-progress-ring.js

@@ -2,32 +2,23 @@ AFRAME.registerComponent('song-progress-ring', {
   dependencies: ['geometry', 'material'],
 
   schema: {
-    challengeId: {type: 'string'},
     enabled: {default: false}
   },
 
   init: function () {
-    this.tick = AFRAME.utils.throttleTick(this.tick.bind(this), 2000);
+    this.tick = AFRAME.utils.throttleTick(this.tick.bind(this), 1000);
+
+    this.progress = this.el.getObject3D('mesh').material.uniforms.progress;
     this.el.sceneEl.addEventListener('cleargame', () => {
       this.progress.value = 0;
     });
   },
 
   update: function (oldData) {
-    // Reset when changing song.
-    if (oldData.challengeId !== this.data.challengeId && this.progress) {
-      this.progress.value = 0;
-    }
+    this.progress.value = 0;
   },
 
-  play: function () {
-    this.context = this.el.sceneEl.components.song.context;
-    this.progress = this.el.getObject3D('mesh').material.uniforms.progress;
-  },
-
-  tick: function () {
-    if (!this.data.enabled) { return; }
-
+  updateRing: function () {
     const source = this.el.sceneEl.components.song.source;
     if (!source) { return; }
 
@@ -35,5 +26,10 @@ AFRAME.registerComponent('song-progress-ring', {
       this.el.sceneEl.components.song.getCurrentTime() /
       source.buffer.duration;
     this.progress.value = progress;
+  },
+
+  tick: function () {
+    if (!this.data.enabled) { return; }
+    this.updateRing();
   }
 });

src/templates/stage.html

@@ -134,8 +134,8 @@
 
   <a-entity
     id="songProgressRing"
-    bind__song-progress-ring="challengeId: challenge.id; enabled: isPlaying"
-    bind__visible="isPlaying"
+    bind__song-progress-ring="enabled: isPlaying && challenge.isBeatsPreloaded"
+    bind__visible="isPlaying && challenge.isBeatsPreloaded"
     geometry="primitive: plane; width: 0.1; height: 0.1"
     material="shader: ring; progress: 0; transparent: true; radiusInner: 0.5; color: #ABABAB"
     position="0 0.1 -1.5"