@wandelbots/wandelbots-js-react-components 2.37.0-pr.feature-states-for-cycle-timer.379.4ca80c1 → 2.37.0-pr.feature-states-for-cycle-timer.379.6ceb08e

package/src/components/CycleTimer/useTimerLogic.ts

@@ -56,25 +56,27 @@ export const useTimerLogic = ({
       remainingTime: 0,
       isRunning: false,
       isPausedState: false,
+      currentProgress: 0, // Immediately reset progress to 0
     }))
     pausedTimeRef.current = 0
     startTimeRef.current = null
-    progressInterpolator.setTarget([0])
+    progressInterpolator.setImmediate([0]) // Use setImmediate for instant reset
   }, [progressInterpolator])
 
   const startMeasuring = useCallback(
     (elapsedSeconds: number = 0) => {
+      const initialProgress = ((elapsedSeconds / 60) % 1) * 100
       setTimerState((prev) => ({
         ...prev,
         currentState: "measuring",
         maxTime: null,
         remainingTime: elapsedSeconds,
         isPausedState: false,
+        currentProgress: initialProgress, // Immediately set progress
       }))
       pausedTimeRef.current = 0
 
-      const initialProgress = ((elapsedSeconds / 60) % 1) * 100
-      progressInterpolator.setTarget([initialProgress])
+      progressInterpolator.setImmediate([initialProgress]) // Use setImmediate for instant reset
 
       if (autoStart) {
         startTimeRef.current = Date.now() - elapsedSeconds * 1000
@@ -88,17 +90,18 @@ export const useTimerLogic = ({
 
   const startCountUp = useCallback(
     (elapsedSeconds: number = 0) => {
+      const initialProgress = ((elapsedSeconds / 60) % 1) * 100
       setTimerState((prev) => ({
         ...prev,
         currentState: "countup",
         maxTime: null,
         remainingTime: elapsedSeconds,
         isPausedState: false,
+        currentProgress: initialProgress, // Immediately set progress
       }))
       pausedTimeRef.current = 0
 
-      const initialProgress = ((elapsedSeconds / 60) % 1) * 100
-      progressInterpolator.setTarget([initialProgress])
+      progressInterpolator.setImmediate([initialProgress]) // Use setImmediate for instant reset
 
       if (autoStart) {
         startTimeRef.current = Date.now() - elapsedSeconds * 1000
@@ -128,19 +131,22 @@ export const useTimerLogic = ({
       if (maxTimeSeconds !== undefined) {
         // Count-down mode
         const remainingSeconds = Math.max(0, maxTimeSeconds - elapsedSeconds)
-        setTimerState((prev) => ({ ...prev, remainingTime: remainingSeconds }))
-
         const initialProgress =
           elapsedSeconds > 0 ? (elapsedSeconds / maxTimeSeconds) * 100 : 0
 
-        progressInterpolator.setTarget([initialProgress])
-        progressInterpolator.update(1)
+        setTimerState((prev) => ({
+          ...prev,
+          remainingTime: remainingSeconds,
+          currentProgress: initialProgress, // Immediately set progress
+        }))
+
+        progressInterpolator.setImmediate([initialProgress]) // Use setImmediate for instant reset
 
         if (remainingSeconds === 0) {
           setTimerState((prev) => ({ ...prev, isRunning: false }))
           startTimeRef.current = null
           if (onCycleEnd) {
-            setTimeout(() => onCycleEnd(), 0)
+            queueMicrotask(() => onCycleEnd())
           }
         } else if (autoStart) {
           setTimeout(() => {
@@ -152,11 +158,14 @@ export const useTimerLogic = ({
         }
       } else {
         // Count-up mode
-        setTimerState((prev) => ({ ...prev, remainingTime: elapsedSeconds }))
-
         const initialProgress = ((elapsedSeconds / 60) % 1) * 100
-        progressInterpolator.setTarget([initialProgress])
-        progressInterpolator.update(1)
+        setTimerState((prev) => ({
+          ...prev,
+          remainingTime: elapsedSeconds,
+          currentProgress: initialProgress, // Immediately set progress
+        }))
+
+        progressInterpolator.setImmediate([initialProgress]) // Use setImmediate for instant reset
 
         if (autoStart) {
           setTimeout(() => {
@@ -296,7 +305,7 @@ export const useTimerLogic = ({
               startTimeRef.current = null
               progressInterpolator.setTarget([100])
               if (onCycleEnd) {
-                setTimeout(() => onCycleEnd(), 0)
+                queueMicrotask(() => onCycleEnd())
               }
               return
             }

package/src/components/jogging/PoseCartesianValues.tsx

@@ -2,6 +2,7 @@ import { Button, Stack, Typography } from "@mui/material"
 import { poseToWandelscriptString } from "@wandelbots/nova-js"
 import type {
   ConnectedMotionGroup,
+  MotionGroupStateResponse,
   MotionStreamConnection,
 } from "@wandelbots/nova-js/v1"
 import { observer } from "mobx-react-lite"
@@ -9,6 +10,28 @@ import { useRef, useState } from "react"
 import { CopyableText } from "../CopyableText"
 import { useAnimationFrame } from "../utils/hooks"
 
+/** Minimal interface for what PoseCartesianValues needs from motion stream */
+type MotionStateProvider = {
+  rapidlyChangingMotionState: MotionGroupStateResponse
+}
+
+/** Creates a motion state provider from either a MotionStreamConnection or ConnectedMotionGroup */
+function createMotionStateProvider(
+  motionStream?: MotionStreamConnection,
+  connectedMotionGroup?: ConnectedMotionGroup,
+): MotionStateProvider | undefined {
+  if (motionStream) {
+    return motionStream
+  }
+  if (connectedMotionGroup) {
+    return {
+      rapidlyChangingMotionState:
+        connectedMotionGroup.rapidlyChangingMotionState,
+    }
+  }
+  return undefined
+}
+
 export type PoseCartesianValuesProps = {
   /** Either a MotionStreamConnection or ConnectedMotionGroup */
   motionStream?: MotionStreamConnection
@@ -25,15 +48,10 @@ export const PoseCartesianValues = observer(
     const poseHolderRef = useRef<HTMLDivElement>(null)
     const [copyMessage, setCopyMessage] = useState("")
 
-    // Use the provided motionStream or create a mock-like object from connectedMotionGroup
-    const activeMotionStream =
-      motionStream ||
-      (connectedMotionGroup
-        ? ({
-            rapidlyChangingMotionState:
-              connectedMotionGroup.rapidlyChangingMotionState,
-          } as MotionStreamConnection)
-        : undefined)
+    const activeMotionStream = createMotionStateProvider(
+      motionStream,
+      connectedMotionGroup,
+    )
 
     if (!activeMotionStream) {
       throw new Error(

package/src/components/jogging/PoseJointValues.tsx

@@ -1,6 +1,7 @@
 import { Button, Stack, Typography } from "@mui/material"
 import type {
   ConnectedMotionGroup,
+  MotionGroupStateResponse,
   MotionStreamConnection,
 } from "@wandelbots/nova-js/v1"
 import { observer } from "mobx-react-lite"
@@ -8,6 +9,28 @@ import { useRef, useState } from "react"
 import { CopyableText } from "../CopyableText"
 import { useAnimationFrame } from "../utils/hooks"
 
+/** Minimal interface for what PoseJointValues needs from motion stream */
+type MotionStateProvider = {
+  rapidlyChangingMotionState: MotionGroupStateResponse
+}
+
+/** Creates a motion state provider from either a MotionStreamConnection or ConnectedMotionGroup */
+function createMotionStateProvider(
+  motionStream?: MotionStreamConnection,
+  connectedMotionGroup?: ConnectedMotionGroup,
+): MotionStateProvider | undefined {
+  if (motionStream) {
+    return motionStream
+  }
+  if (connectedMotionGroup) {
+    return {
+      rapidlyChangingMotionState:
+        connectedMotionGroup.rapidlyChangingMotionState,
+    }
+  }
+  return undefined
+}
+
 export type PoseJointValuesProps = {
   /** Either a MotionStreamConnection or ConnectedMotionGroup */
   motionStream?: MotionStreamConnection
@@ -24,15 +47,10 @@ export const PoseJointValues = observer(
     const poseHolderRef = useRef<HTMLDivElement>(null)
     const [copyMessage, setCopyMessage] = useState("")
 
-    // Use the provided motionStream or create a mock-like object from connectedMotionGroup
-    const activeMotionStream =
-      motionStream ||
-      (connectedMotionGroup
-        ? ({
-            rapidlyChangingMotionState:
-              connectedMotionGroup.rapidlyChangingMotionState,
-          } as MotionStreamConnection)
-        : undefined)
+    const activeMotionStream = createMotionStateProvider(
+      motionStream,
+      connectedMotionGroup,
+    )
 
     if (!activeMotionStream) {
       throw new Error(