From eefebb9b0286658901319f3f2fc8d5bc77eec30f Mon Sep 17 00:00:00 2001
From: Kevin Ngo <me@ngokevin.com>
Date: Fri, 12 Oct 2018 18:09:04 -0700
Subject: [PATCH] initial loading indicator (ring)

---
 src/components/song.js   | 5 ++++-
 src/templates/score.html | 2 +-
 src/templates/stage.html | 8 ++++++++
 3 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/components/song.js b/src/components/song.js
index 8a90ccf..c00a9c4 100644
--- a/src/components/song.js
+++ b/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);
   }
 });
diff --git a/src/templates/score.html b/src/templates/score.html
index 3f2dc1c..a892857 100644
--- a/src/templates/score.html
+++ b/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"
diff --git a/src/templates/stage.html b/src/templates/stage.html
index a422d45..fbdd548 100644
--- a/src/templates/stage.html
+++ b/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"