From 28185e4cf21e956a4bfc492a7578e329f14c208e Mon Sep 17 00:00:00 2001
From: James Hobin <jhobin@ptc.com>
Date: Fri, 1 Nov 2024 09:44:57 -0400
Subject: [PATCH] Add simple 'loading' indicator for motion study video

---
 css/index.css                  |  4 ++++
 src/gui/ar/videoPlayback.js    |  2 +-
 src/motionStudy/motionStudy.js | 17 +++++++++++++++--
 3 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/css/index.css b/css/index.css
index 1115cb704..ca2945cc2 100755
--- a/css/index.css
+++ b/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 {
diff --git a/src/gui/ar/videoPlayback.js b/src/gui/ar/videoPlayback.js
index 6dc7b7b35..bfd9e6004 100644
--- a/src/gui/ar/videoPlayback.js
+++ b/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);
diff --git a/src/motionStudy/motionStudy.js b/src/motionStudy/motionStudy.js
index 94df6b514..734a37b0e 100644
--- a/src/motionStudy/motionStudy.js
+++ b/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';