Conductor performance improvements (#3622)

* Throttle conductor updates

* Tweak to animation steps

- Changed `steps(12)`` to 15 to align better with clock index positions;

Co-authored-by: charlesh88 <charlesh88@gmail.com>
Co-authored-by: Deep Tailor <deep.j.tailor@nasa.gov>

src/plugins/timeConductor/Conductor.vue

@@ -157,6 +157,7 @@
 </template>
 
 <script>
+import _ from 'lodash';
 import ConductorMode from './ConductorMode.vue';
 import ConductorTimeSystem from './ConductorTimeSystem.vue';
 import DatePicker from './DatePicker.vue';
@@ -220,7 +221,7 @@ export default {
         document.addEventListener('keydown', this.handleKeyDown);
         document.addEventListener('keyup', this.handleKeyUp);
         this.setTimeSystem(JSON.parse(JSON.stringify(this.openmct.time.timeSystem())));
-        this.openmct.time.on('bounds', this.handleNewBounds);
+        this.openmct.time.on('bounds', _.throttle(this.handleNewBounds, 300));
         this.openmct.time.on('timeSystem', this.setTimeSystem);
         this.openmct.time.on('clock', this.setViewFromClock);
         this.openmct.time.on('clockOffsets', this.setViewFromOffsets);

src/plugins/timeConductor/conductor-mode-icon.scss

@@ -56,7 +56,7 @@
         $handW: 2px;
         $handH: $d * 0.4;
         animation-iteration-count: infinite;
-        animation-timing-function: linear;
+        animation-timing-function: steps(12);
         transform-origin: bottom;
         position: absolute;
         height: $handW;