Fix complex displays not loading

src/api/telemetry/TelemetryAPI.js

@@ -253,6 +253,10 @@ export default class TelemetryAPI {
       options.domain = this.openmct.time.getTimeSystem().key;
     }
 
+    if (!Object.hasOwn(options, 'timeContext')) {
+      options.timeContext = this.openmct.time;
+    }
+
     return options;
   }
 

src/plugins/plan/components/PlanView.vue

@@ -69,7 +69,6 @@ const INNER_TEXT_PADDING = 15;
 const TEXT_LEFT_PADDING = 5;
 const ROW_PADDING = 5;
 const SWIMLANE_PADDING = 3;
-const RESIZE_POLL_INTERVAL = 200;
 const ROW_HEIGHT = 22;
 const MAX_TEXT_WIDTH = 300;
 const MIN_ACTIVITY_WIDTH = 2;
@@ -143,13 +142,15 @@ export default {
     this.canvasContext = canvas.getContext('2d');
     this.setDimensions();
     this.setTimeContext();
-    this.resizeTimer = setInterval(this.resize, RESIZE_POLL_INTERVAL);
     this.handleConfigurationChange(this.configuration);
     this.planViewConfiguration.on('change', this.handleConfigurationChange);
     this.loadComposition();
+
+    this.resizeObserver = new ResizeObserver(this.resize);
+    this.resizeObserver.observe(this.$refs.plan);
   },
   beforeUnmount() {
-    clearInterval(this.resizeTimer);
+    this.resizeObserver.disconnect();
     this.stopFollowingTimeContext();
     if (this.unlisten) {
       this.unlisten();

src/plugins/remoteClock/RemoteClock.js

@@ -152,15 +152,18 @@
    */
   #waitForReady() {
     const waitForInitialTick = (resolve) => {
-      if (this.lastTick > 0) {
-        const offsets = this.openmct.time.getClockOffsets();
-        resolve({
-          start: this.lastTick + offsets.start,
-          end: this.lastTick + offsets.end
-        });
-      } else {
-        setTimeout(() => waitForInitialTick(resolve), 100);
-      }
+      const tickListener = () => {
+        if (this.lastTick > 0) {
+          const offsets = this.openmct.time.getClockOffsets();
+          this.openmct.time.off('tick', tickListener); // Unregister the tick listener
+          resolve({
+            start: this.lastTick + offsets.start,
+            end: this.lastTick + offsets.end
+          });
+        }
+      };
+
+      this.openmct.time.on('tick', tickListener);
     };
 
     return new Promise(waitForInitialTick);

src/plugins/remoteClock/requestInterceptor.js

@@ -20,16 +20,43 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
+/**
+ * Intercepts requests to ensure the remote clock is ready.
+ *
+ * @param {import('../../openmct').OpenMCT} openmct - The OpenMCT instance.
+ * @param {import('../../openmct').Identifier} _remoteClockIdentifier - The identifier for the remote clock.
+ * @param {Function} waitForBounds - A function that returns a promise resolving to the initial bounds.
+ * @returns {Object} The request interceptor.
+ */
 function remoteClockRequestInterceptor(openmct, _remoteClockIdentifier, waitForBounds) {
   let remoteClockLoaded = false;
 
   return {
-    appliesTo: () => {
+    /**
+     * Determines if the interceptor applies to the given request.
+     *
+     * @param {Object} _ - Unused parameter.
+     * @param {import('../../api/telemetry/TelemetryAPI').TelemetryRequestOptions} request - The request object.
+     * @returns {boolean} True if the interceptor applies, false otherwise.
+     */
+    appliesTo: (_, request) => {
       // Get the activeClock from the Global Time Context
+      /** @type {import("../../api/time/TimeContext").default} */
       const { activeClock } = openmct.time;
+      const timeContext = request?.timeContext ?? openmct.time;
+
+      if (request.strategy === 'latest' && timeContext.isRealTime()) {
+        return false;
+      }
 
       return activeClock?.key === 'remote-clock' && !remoteClockLoaded;
     },
+    /**
+     * Invokes the interceptor to modify the request.
+     *
+     * @param {Object} request - The request object.
+     * @returns {Promise<Object>} The modified request object.
+     */
     invoke: async (request) => {
       const timeContext = request?.timeContext ?? openmct.time;
 

src/plugins/timeConductor/ConductorInputsRealtime.vue

@@ -150,7 +150,7 @@ export default {
   mounted() {
     this.handleNewBounds = _.throttle(this.handleNewBounds, 300, {
       leading: true,
-      trailing: false
+      trailing: true
     });
     this.setTimeSystem(this.copy(this.openmct.time.getTimeSystem()));
     this.openmct.time.on(TIME_CONTEXT_EVENTS.timeSystemChanged, this.setTimeSystem);
@@ -181,6 +181,8 @@ export default {
       }
     },
     stopFollowingTime() {
+      this.handleNewBounds.cancel();
+
       if (this.timeContext) {
         this.timeContext.off(TIME_CONTEXT_EVENTS.boundsChanged, this.handleNewBounds);
         this.timeContext.off(TIME_CONTEXT_EVENTS.clockOffsetsChanged, this.setViewFromOffsets);

src/ui/components/progress-bar.scss

@@ -1,16 +1,13 @@
 /******************************************************** PROGRESS BAR */
 @keyframes progressIndeterminate {
   0% {
-    left: 0;
-    width: 0;
+    transform:scaleX(0);
   }
-  70% {
-    left: 0;
-    width: 100%;
+  90% {
+    transform:scaleX(1);
     opacity: 1;
   }
   100% {
-    left: 100%;
     opacity: 0;
   }
 }
@@ -24,11 +21,10 @@
 
   &__bar {
     background: $colorProgressBar;
-    height: 100%;
-    min-height: $progressBarMinH;
+    transform-origin: left;
 
     &.--indeterminate {
-      position: absolute;
+      @include abs();
       animation: progressIndeterminate 1.5s ease-in infinite;
     }
   }