@wandelbots/wandelbots-js-react-components 2.34.2-pr.feature-robot-precondition-list.372.9dfd57e → 2.34.2

package/src/components/CycleTimer.tsx

@@ -1,4 +1,4 @@
-import { Box, Fade, Typography, useTheme } from "@mui/material"
+import { Box, Typography, useTheme } from "@mui/material"
 import { Gauge } from "@mui/x-charts/Gauge"
 import { observer } from "mobx-react-lite"
 import { useCallback, useEffect, useRef, useState } from "react"
@@ -9,13 +9,13 @@ import { useInterpolation } from "./utils/interpolation"
 export interface CycleTimerProps {
   /**
    * Callback that receives the timer control functions:
-   * - `startNewCycle(maxTimeSeconds?, elapsedSeconds?)` - Start a new timer cycle (if maxTimeSeconds is omitted, runs as count-up timer)
+   * - `startNewCycle(maxTimeSeconds, elapsedSeconds?)` - Start a new timer cycle
    * - `pause()` - Pause the countdown while preserving remaining time
    * - `resume()` - Resume countdown from where it was paused
    * - `isPaused()` - Check current pause state
    */
   onCycleComplete: (controls: {
-    startNewCycle: (maxTimeSeconds?: number, elapsedSeconds?: number) => void
+    startNewCycle: (maxTimeSeconds: number, elapsedSeconds?: number) => void
     pause: () => void
     resume: () => void
     isPaused: () => boolean
@@ -30,23 +30,18 @@ export interface CycleTimerProps {
   compact?: boolean
   /** Additional CSS classes */
   className?: string
-  /** Whether the timer is in an error state (pauses timer and shows error styling) */
-  hasError?: boolean
 }
 
 /**
- * A circular gauge timer component that shows the remaining time of a cycle or counts up
+ * A circular gauge timer component that shows the remaining time of a cycle
  *
  * Features:
  * - Circular gauge with 264px diameter and 40px thickness
- * - Two modes: count-down (with max time) or count-up (without max time)
- * - Count-down mode: shows remaining time prominently, counts down to zero
- * - Count-up mode: shows elapsed time, gauge progresses in minute steps
- * - Displays appropriate labels based on mode
- * - Automatically counts down/up and triggers callback when reaching zero (count-down only)
+ * - Shows remaining time prominently in the center (60px font)
+ * - Displays "remaining time" label at top and total time at bottom
+ * - Automatically counts down and triggers callback when reaching zero
  * - Full timer control: start, pause, resume functionality
  * - Support for starting with elapsed time (resume mid-cycle)
- * - Error state support: pauses timer and shows error styling (red color)
  * - Smooth spring-based progress animations for all state transitions
  * - Fully localized with i18next
  * - Material-UI theming integration
@@ -58,44 +53,32 @@ export interface CycleTimerProps {
  * @param variant - Visual variant: "default" (large gauge) or "small" (animated icon with text)
  * @param compact - For small variant: whether to hide remaining time details
  * @param className - Additional CSS classes
- * @param hasError - Whether the timer is in an error state (pauses timer and shows error styling)
  *
  * Usage:
  * ```tsx
- * // Count-down timer (with max time)
  * <CycleTimer
  *   onCycleComplete={(controls) => {
- *     // Start a 5-minute countdown cycle
+ *     // Start a 5-minute cycle
  *     controls.startNewCycle(300)
  *
  *     // Or start a 5-minute cycle with 2 minutes already elapsed
  *     controls.startNewCycle(300, 120)
- *   }}
- *   onCycleEnd={() => console.log('Cycle completed!')}
- * />
  *
- * // Count-up timer (no max time)
- * <CycleTimer
- *   onCycleComplete={(controls) => {
- *     // Start count-up timer
- *     controls.startNewCycle()
+ *     // Pause the timer
+ *     controls.pause()
  *
- *     // Or start count-up timer with some elapsed time
- *     controls.startNewCycle(undefined, 120)
- *   }}
- * />
+ *     // Resume the timer
+ *     controls.resume()
  *
- * // Timer with error state
- * <CycleTimer
- *   hasError={errorCondition}
- *   onCycleComplete={(controls) => {
- *     controls.startNewCycle(300)
+ *     // Check if paused
+ *     const paused = controls.isPaused()
  *   }}
+ *   onCycleEnd={() => console.log('Cycle completed!')}
  * />
  * ```
  *
  * Control Functions:
- * - `startNewCycle(maxTimeSeconds?, elapsedSeconds?)` - Start a new timer cycle (omit maxTimeSeconds for count-up mode)
+ * - `startNewCycle(maxTimeSeconds, elapsedSeconds?)` - Start a new timer cycle
  * - `pause()` - Pause the countdown while preserving remaining time
  * - `resume()` - Resume countdown from where it was paused
  * - `isPaused()` - Check current pause state
@@ -109,29 +92,17 @@ export const CycleTimer = externalizeComponent(
       variant = "default",
       compact = false,
       className,
-      hasError = false,
     }: CycleTimerProps) => {
       const theme = useTheme()
       const { t } = useTranslation()
       const [remainingTime, setRemainingTime] = useState(0)
-      const [maxTime, setMaxTime] = useState<number | null>(null)
+      const [maxTime, setMaxTime] = useState(0)
       const [isRunning, setIsRunning] = useState(false)
       const [isPausedState, setIsPausedState] = useState(false)
       const [currentProgress, setCurrentProgress] = useState(0)
       const animationRef = useRef<number | null>(null)
       const startTimeRef = useRef<number | null>(null)
       const pausedTimeRef = useRef<number>(0)
-      const [wasRunningBeforeError, setWasRunningBeforeError] = useState(false)
-
-      // Brief animation states for pause and error visual feedback
-      const [showPauseAnimation, setShowPauseAnimation] = useState(false)
-      const [showErrorAnimation, setShowErrorAnimation] = useState(false)
-      const pauseAnimationTimeoutRef = useRef<NodeJS.Timeout | null>(null)
-      const errorAnimationTimeoutRef = useRef<NodeJS.Timeout | null>(null)
-
-      // Track mode changes for fade transitions
-      const [showLabels, setShowLabels] = useState(true)
-      const prevMaxTimeRef = useRef<number | null | undefined>(undefined)
 
       // Spring-based interpolator for smooth gauge progress animations
       // Uses physics simulation to create natural, smooth transitions between progress values
@@ -143,78 +114,37 @@ export const CycleTimer = externalizeComponent(
         },
       })
 
-      // Handle mode changes with fade transitions for labels only
-      useEffect(() => {
-        const currentIsCountUp = maxTime === null
-        const prevMaxTime = prevMaxTimeRef.current
-        const prevIsCountUp = prevMaxTime === null
-
-        // Check if mode actually changed (not just first render)
-        if (
-          prevMaxTimeRef.current !== undefined &&
-          prevIsCountUp !== currentIsCountUp
-        ) {
-          // Mode changed - labels will fade based on the Fade component conditions
-          // We just need to ensure showLabels is true so Fade can control visibility
-          setShowLabels(true)
-        } else {
-          // No mode change or first time - set initial state
-          setShowLabels(true)
-        }
-
-        prevMaxTimeRef.current = maxTime
-      }, [maxTime])
-
       const startNewCycle = useCallback(
-        (maxTimeSeconds?: number, elapsedSeconds: number = 0) => {
-          setMaxTime(maxTimeSeconds ?? null)
+        (maxTimeSeconds: number, elapsedSeconds: number = 0) => {
+          setMaxTime(maxTimeSeconds)
+          const remainingSeconds = Math.max(0, maxTimeSeconds - elapsedSeconds)
+          setRemainingTime(remainingSeconds)
           setIsPausedState(false)
           pausedTimeRef.current = 0
 
-          if (maxTimeSeconds !== undefined) {
-            // Count-down mode: set remaining time
-            const remainingSeconds = Math.max(
-              0,
-              maxTimeSeconds - elapsedSeconds,
-            )
-            setRemainingTime(remainingSeconds)
-
-            // Animate progress smoothly to starting position
-            const initialProgress =
-              elapsedSeconds > 0 ? (elapsedSeconds / maxTimeSeconds) * 100 : 0
-            if (elapsedSeconds === 0) {
-              progressInterpolator.setTarget([0])
-            } else {
-              progressInterpolator.setTarget([initialProgress])
-            }
-
-            if (remainingSeconds === 0) {
-              setIsRunning(false)
-              startTimeRef.current = null
-              // Trigger completion callback immediately if time is already up
-              if (onCycleEnd) {
-                setTimeout(() => onCycleEnd(), 0)
-              }
-            } else if (autoStart) {
-              startTimeRef.current = Date.now() - elapsedSeconds * 1000
-              setIsRunning(true)
-            } else {
-              startTimeRef.current = null
-            }
+          // Animate progress smoothly to starting position
+          // For new cycles (no elapsed time), animate from current position to 0%
+          // For resumed cycles, animate to the appropriate progress percentage
+          const initialProgress =
+            elapsedSeconds > 0 ? (elapsedSeconds / maxTimeSeconds) * 100 : 0
+          if (elapsedSeconds === 0) {
+            progressInterpolator.setTarget([0])
           } else {
-            // Count-up mode: start from elapsed time
-            setRemainingTime(elapsedSeconds)
-
-            // For count-up mode, progress is based on minute steps
-            const initialProgress = ((elapsedSeconds / 60) % 1) * 100
             progressInterpolator.setTarget([initialProgress])
+          }
 
-            if (autoStart) {
-              startTimeRef.current = Date.now() - elapsedSeconds * 1000
-              setIsRunning(true)
-            } else {
-              startTimeRef.current = null
+          if (remainingSeconds === 0) {
+            setIsRunning(false)
+            startTimeRef.current = null
+            // Trigger completion callback immediately if time is already up
+            if (onCycleEnd) {
+              setTimeout(() => onCycleEnd(), 0)
             }
+          } else if (autoStart) {
+            startTimeRef.current = Date.now() - elapsedSeconds * 1000
+            setIsRunning(true)
+          } else {
+            startTimeRef.current = null
           }
         },
         [autoStart, onCycleEnd, progressInterpolator],
@@ -229,32 +159,11 @@ export const CycleTimer = externalizeComponent(
           // Calculate exact progress position and smoothly animate to it when pausing
           // This ensures the visual progress matches the actual elapsed time
           const totalElapsed = pausedTimeRef.current / 1000
-
-          if (maxTime !== null) {
-            // Count-down mode
-            const exactProgress = Math.min(100, (totalElapsed / maxTime) * 100)
-            progressInterpolator.setTarget([exactProgress])
-          } else {
-            // Count-up mode: progress based on minute steps
-            const exactProgress = ((totalElapsed / 60) % 1) * 100
-            progressInterpolator.setTarget([exactProgress])
-          }
+          const exactProgress = Math.min(100, (totalElapsed / maxTime) * 100)
+          progressInterpolator.setTarget([exactProgress])
         }
         setIsRunning(false)
         setIsPausedState(true)
-
-        // Trigger brief pause animation
-        setShowPauseAnimation(true)
-
-        // Clear any existing timeout
-        if (pauseAnimationTimeoutRef.current) {
-          clearTimeout(pauseAnimationTimeoutRef.current)
-        }
-
-        // Reset animation after longer duration
-        pauseAnimationTimeoutRef.current = setTimeout(() => {
-          setShowPauseAnimation(false)
-        }, 800) // 800ms smooth animation
       }, [isRunning, maxTime, progressInterpolator])
 
       const resume = useCallback(() => {
@@ -269,49 +178,6 @@ export const CycleTimer = externalizeComponent(
         return isPausedState
       }, [isPausedState])
 
-      // Handle error state changes
-      useEffect(() => {
-        if (hasError) {
-          // Error occurred - pause timer if running and remember state
-          if (isRunning && !isPausedState) {
-            setWasRunningBeforeError(true)
-            pause()
-          }
-
-          // Trigger brief error animation
-          setShowErrorAnimation(true)
-
-          // Clear any existing timeout
-          if (errorAnimationTimeoutRef.current) {
-            clearTimeout(errorAnimationTimeoutRef.current)
-          }
-
-          // Reset animation after longer duration
-          errorAnimationTimeoutRef.current = setTimeout(() => {
-            setShowErrorAnimation(false)
-          }, 600) // 600ms smooth animation
-        } else {
-          // Error resolved - resume if was running before error
-          if (wasRunningBeforeError && isPausedState) {
-            setWasRunningBeforeError(false)
-            resume()
-          }
-
-          // Clear error animation if error is resolved
-          setShowErrorAnimation(false)
-          if (errorAnimationTimeoutRef.current) {
-            clearTimeout(errorAnimationTimeoutRef.current)
-          }
-        }
-      }, [
-        hasError,
-        isRunning,
-        isPausedState,
-        wasRunningBeforeError,
-        pause,
-        resume,
-      ])
-
       // Call onCycleComplete immediately to provide the timer control functions
       useEffect(() => {
         let isMounted = true
@@ -336,39 +202,30 @@ export const CycleTimer = externalizeComponent(
         if (isRunning) {
           // Single animation frame loop that handles both time updates and progress
           const updateTimer = () => {
-            if (startTimeRef.current) {
+            if (startTimeRef.current && maxTime > 0) {
               const now = Date.now()
               const elapsed =
                 (now - startTimeRef.current + pausedTimeRef.current) / 1000
-
-              if (maxTime !== null) {
-                // Count-down mode
-                const remaining = Math.max(0, maxTime - elapsed)
-                setRemainingTime(Math.ceil(remaining))
-
-                // Smoothly animate progress based on elapsed time for fluid visual feedback
-                const progress = Math.min(100, (elapsed / maxTime) * 100)
-                progressInterpolator.setTarget([progress])
-
-                if (remaining <= 0) {
-                  setIsRunning(false)
-                  startTimeRef.current = null
-                  setRemainingTime(0)
-                  // Animate to 100% completion with smooth spring transition
-                  progressInterpolator.setTarget([100])
-                  // Call onCycleEnd when timer reaches zero to notify about completion
-                  if (onCycleEnd) {
-                    setTimeout(() => onCycleEnd(), 0)
-                  }
-                  return
+              const remaining = Math.max(0, maxTime - elapsed)
+
+              // Update remaining time based on timestamp calculation
+              setRemainingTime(Math.ceil(remaining))
+
+              // Smoothly animate progress based on elapsed time for fluid visual feedback
+              const progress = Math.min(100, (elapsed / maxTime) * 100)
+              progressInterpolator.setTarget([progress])
+
+              if (remaining <= 0) {
+                setIsRunning(false)
+                startTimeRef.current = null
+                setRemainingTime(0)
+                // Animate to 100% completion with smooth spring transition
+                progressInterpolator.setTarget([100])
+                // Call onCycleEnd when timer reaches zero to notify about completion
+                if (onCycleEnd) {
+                  setTimeout(() => onCycleEnd(), 0)
                 }
-              } else {
-                // Count-up mode
-                setRemainingTime(Math.floor(elapsed))
-
-                // For count-up mode, progress completes every minute (0-100% per minute)
-                const progress = ((elapsed / 60) % 1) * 100
-                progressInterpolator.setTarget([progress])
+                return
               }
 
               // Continue animation loop while running
@@ -412,31 +269,12 @@ export const CycleTimer = externalizeComponent(
         }
       }, [progressInterpolator])
 
-      // Cleanup animation timeouts on unmount
-      useEffect(() => {
-        return () => {
-          if (pauseAnimationTimeoutRef.current) {
-            clearTimeout(pauseAnimationTimeoutRef.current)
-          }
-          if (errorAnimationTimeoutRef.current) {
-            clearTimeout(errorAnimationTimeoutRef.current)
-          }
-        }
-      }, [])
-
       // Keep interpolator synchronized with static progress when timer is stopped
       // Ensures correct visual state when component initializes or timer stops
       useEffect(() => {
-        if (!isRunning && !isPausedState) {
-          if (maxTime !== null && maxTime > 0) {
-            // Count-down mode
-            const staticProgress = ((maxTime - remainingTime) / maxTime) * 100
-            progressInterpolator.setTarget([staticProgress])
-          } else if (maxTime === null) {
-            // Count-up mode
-            const staticProgress = ((remainingTime / 60) % 1) * 100
-            progressInterpolator.setTarget([staticProgress])
-          }
+        if (!isRunning && !isPausedState && maxTime > 0) {
+          const staticProgress = ((maxTime - remainingTime) / maxTime) * 100
+          progressInterpolator.setTarget([staticProgress])
         }
       }, [
         isRunning,
@@ -463,92 +301,92 @@ export const CycleTimer = externalizeComponent(
             sx={{
               display: "flex",
               alignItems: "center",
-              m: 0,
-              gap: 1, // 8px gap between circle and text
+              gap: 0.125, // Minimal gap - 1px
             }}
           >
-            {/* Animated progress ring icon */}
+            {/* Animated progress gauge icon */}
             <Box
               sx={{
-                width: 20,
-                height: 20,
+                position: "relative",
+                width: 40,
+                height: 40,
                 display: "flex",
                 alignItems: "center",
                 justifyContent: "center",
-                opacity: showPauseAnimation || showErrorAnimation ? 0.6 : 1,
-                transition: "opacity 0.5s ease-out",
+                borderRadius: "50%",
+                overflow: "visible",
               }}
             >
-              <svg
-                width="20"
-                height="20"
-                viewBox="0 0 20 20"
-                style={{ transform: "rotate(-90deg)" }}
-                role="img"
-                aria-label="Timer progress"
-              >
-                {/* Background ring */}
-                <circle
-                  cx="10"
-                  cy="10"
-                  r="8"
-                  fill="none"
-                  stroke={
-                    hasError
-                      ? theme.palette.error.light
-                      : theme.palette.success.main
-                  }
-                  strokeWidth="2"
-                  opacity={0.3}
-                  style={{
-                    transition: "stroke 0.5s ease-out",
-                  }}
-                />
-                {/* Progress ring */}
-                <circle
-                  cx="10"
-                  cy="10"
-                  r="8"
-                  fill="none"
-                  stroke={
-                    hasError
-                      ? theme.palette.error.light
-                      : theme.palette.success.main
-                  }
-                  strokeWidth="2"
-                  strokeLinecap="round"
-                  strokeDasharray={`${2 * Math.PI * 8}`}
-                  strokeDashoffset={`${2 * Math.PI * 8 * (1 - progressValue / 100)}`}
-                  style={{
-                    transition:
-                      "stroke-dashoffset 0.1s ease-out, stroke 0.5s ease-out",
-                  }}
-                />
-              </svg>
+              <Gauge
+                width={40}
+                height={40}
+                value={progressValue}
+                valueMin={0}
+                valueMax={100}
+                innerRadius="70%"
+                outerRadius="95%"
+                skipAnimation={true}
+                sx={{
+                  opacity: isPausedState ? 0.6 : 1,
+                  transition: "opacity 0.2s ease",
+                  [`& .MuiGauge-valueArc`]: {
+                    fill: theme.palette.success.main,
+                  },
+                  [`& .MuiGauge-referenceArc`]: {
+                    fill: theme.palette.success.main,
+                    opacity: 0.3,
+                  },
+                  [`& .MuiGauge-valueText`]: {
+                    display: "none",
+                  },
+                  [`& .MuiGauge-text`]: {
+                    display: "none",
+                  },
+                  [`& text`]: {
+                    display: "none",
+                  },
+                  // Hide any inner circle elements that might flash
+                  [`& .MuiGauge-referenceArcBackground`]: {
+                    display: "none",
+                  },
+                  [`& .MuiGauge-valueArcBackground`]: {
+                    display: "none",
+                  },
+                  [`& circle`]: {
+                    display: "none",
+                  },
+                }}
+              />
+
+              {/* Inner circle overlay to prevent flashing */}
+              <Box
+                sx={{
+                  position: "absolute",
+                  top: "50%",
+                  left: "50%",
+                  transform: "translate(-50%, -50%)",
+                  width: 13,
+                  height: 13,
+                  borderRadius: "50%",
+                  backgroundColor: theme.palette.background?.paper || "white",
+                  pointerEvents: "none",
+                }}
+              />
             </Box>
 
             {/* Timer text display */}
             <Typography
               variant="body2"
               sx={{
-                color: hasError
-                  ? theme.palette.error.light
-                  : theme.palette.text.primary,
+                color: theme.palette.text.primary,
                 fontSize: "14px",
-                transition: "color 0.5s ease-out",
               }}
             >
-              {hasError
-                ? t("CycleTimer.Error.lb", "Error")
-                : maxTime !== null
-                  ? // Count-down mode: show remaining time
-                    compact
-                    ? // Compact mode: show remaining time with "min." suffix
-                      `${formatTime(remainingTime)} ${t("CycleTimer.Time.lb", { time: "" }).replace(/\s*$/, "")}`
-                    : // Full mode: show "remaining / of total min." format
-                      `${formatTime(remainingTime)} / ${t("CycleTimer.Time.lb", { time: formatTime(maxTime) })}`
-                  : // Count-up mode: show elapsed time only
-                    formatTime(remainingTime)}
+              {compact
+                ? // Compact mode: show only remaining time
+                  formatTime(remainingTime)
+                : // Full mode: show "remaining / of total min." format
+                  `${formatTime(remainingTime)} / ${t("CycleTimer.Time.lb", { time: formatTime(maxTime) })}`}
             </Typography>
           </Box>
         )
@@ -577,13 +415,10 @@ export const CycleTimer = externalizeComponent(
             outerRadius="90%"
             skipAnimation={true}
             sx={{
-              opacity: showPauseAnimation || showErrorAnimation ? 0.6 : 1,
-              transition: "opacity 0.5s ease-out",
+              opacity: isPausedState ? 0.6 : 1,
+              transition: "opacity 0.2s ease",
               [`& .MuiGauge-valueArc`]: {
-                fill: hasError
-                  ? theme.palette.error.light
-                  : theme.palette.success.main,
-                transition: "fill 0.5s ease-out",
+                fill: theme.palette.success.main,
               },
               [`& .MuiGauge-referenceArc`]: {
                 fill: "white",
@@ -611,102 +446,42 @@ export const CycleTimer = externalizeComponent(
               gap: 1,
             }}
           >
-            {/* "remaining time" label - always reserves space to prevent layout shift */}
-            <Box
+            {/* "remaining time" label */}
+            <Typography
+              variant="body2"
               sx={{
-                height: "16px", // Fixed height to prevent layout shift
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
+                fontSize: "12px",
+                color: theme.palette.text.secondary,
                 marginBottom: 0.5,
               }}
             >
-              <Fade
-                in={showLabels && maxTime !== null && !hasError}
-                timeout={300}
-              >
-                <Typography
-                  variant="body2"
-                  sx={{
-                    fontSize: "12px",
-                    color: theme.palette.text.secondary,
-                  }}
-                >
-                  {t("CycleTimer.RemainingTime.lb")}
-                </Typography>
-              </Fade>
-            </Box>
+              {t("CycleTimer.RemainingTime.lb")}
+            </Typography>
 
-            {/* Main timer display with error state transition */}
-            <Box
+            {/* Main timer display */}
+            <Typography
+              variant="h1"
               sx={{
-                position: "relative",
-                height: "48px", // Fixed height to prevent layout shift
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
+                fontSize: "48px",
+                fontWeight: 500,
+                color: theme.palette.text.primary,
+                lineHeight: 1,
                 marginBottom: 0.5,
               }}
             >
-              {/* Error text */}
-              <Fade in={hasError} timeout={500}>
-                <Typography
-                  variant="h3"
-                  sx={{
-                    position: "absolute",
-                    fontSize: "40px",
-                    fontWeight: 400,
-                    color: "#FFFFFF",
-                    lineHeight: "116.7%",
-                  }}
-                >
-                  {t("CycleTimer.Error.lb", "Error")}
-                </Typography>
-              </Fade>
-
-              {/* Normal timer text */}
-              <Fade in={!hasError} timeout={500}>
-                <Typography
-                  variant="h1"
-                  sx={{
-                    position: "absolute",
-                    fontSize: "48px",
-                    fontWeight: 500,
-                    color: theme.palette.text.primary,
-                    lineHeight: 1,
-                  }}
-                >
-                  {formatTime(remainingTime)}
-                </Typography>
-              </Fade>
-            </Box>
+              {formatTime(remainingTime)}
+            </Typography>
 
-            {/* Total time display - always reserves space to prevent layout shift */}
-            <Box
+            {/* Total time display */}
+            <Typography
+              variant="body2"
               sx={{
-                height: "16px", // Fixed height to prevent layout shift
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
+                fontSize: "12px",
+                color: theme.palette.text.secondary,
               }}
             >
-              <Fade
-                in={showLabels && maxTime !== null && !hasError}
-                timeout={300}
-              >
-                <Typography
-                  variant="body2"
-                  sx={{
-                    fontSize: "12px",
-                    color: theme.palette.text.secondary,
-                  }}
-                >
-                  {maxTime !== null
-                    ? t("CycleTimer.OfTime.lb", { time: formatTime(maxTime) })
-                    : ""}
-                </Typography>
-              </Fade>
-            </Box>
+              {t("CycleTimer.OfTime.lb", { time: formatTime(maxTime) })}
+            </Typography>
           </Box>
         </Box>
       )