Add simple 'loading' indicator for motion study video

Author: hobinjk-ptc

css/index.css

@@ -2110,7 +2110,11 @@ Logic Interface CSS
     cursor: pointer;
 
     pointer-events: all;
+}
 
+.analytics-video-toggle.analytics-video-toggle-loading {
+    color: #777;
+    cursor: progress;
 }
 
 .analytics-export-link-container {

src/gui/ar/videoPlayback.js

@@ -180,7 +180,7 @@ class VideoPlayer extends Followable {
         // this.phone.add(this.debugBox);
 
         this.rvl = null;
-        fetch(urls.rvl).then(res => {
+        this.rvlLoadPromise = fetch(urls.rvl).then(res => {
             return res.arrayBuffer();
         }).then(buf => {
             this.rvl = new RVLParser(buf);

src/motionStudy/motionStudy.js

@@ -791,10 +791,20 @@ export class MotionStudy {
 
     createVideoPlayerShowHideButton() {
         this.videoPlayerShowHideButton = document.createElement('div');
-        this.videoPlayerShowHideButton.classList.add('analytics-video-toggle');
+        this.videoPlayerShowHideButton.classList.add('analytics-video-toggle', 'analytics-video-toggle-loading');
         this.videoPlayerShowHideButton.classList.add('analytics-button-container');
-        this.videoPlayerShowHideButton.textContent = 'Show Spatial Video';
+        this.videoPlayerShowHideButton.textContent = 'Loading Spatial Video';
+
+        this.videoPlayer.rvlLoadPromise.then(() => {
+            this.videoPlayerShowHideButton.textContent = 'Show Spatial Video';
+            this.videoPlayerShowHideButton.classList.remove('analytics-video-toggle-loading');
+        });
+
         this.videoPlayerShowHideButton.addEventListener('pointerup', () => {
+            if (this.videoPlayerShowHideButton.classList.contains('analytics-video-toggle-loading')) {
+                return;
+            }
+
             if (this.videoPlayer.isShown()) {
                 this.humanPoseAnalyzer.setDepthTestEnabled(true);
                 this.videoPlayer.hide();
@@ -811,6 +821,9 @@ export class MotionStudy {
         if (!this.videoPlayerShowHideButton || !this.videoPlayer) {
             return;
         }
+        if (this.videoPlayerShowHideButton.classList.contains('analytics-video-toggle-loading')) {
+            return;
+        }
 
         if (this.videoPlayer.isShown()) {
             this.videoPlayerShowHideButton.textContent = 'Hide Spatial Video';