Function useStableFlag

apps/sim/hooks/use-stable-flag.ts:101–129

(value: boolean, options: StableFlagOptions = {})

 * connection/loading indicators that would otherwise flicker on sub-second changes.
 */
export function useStableFlag(value: boolean, options: StableFlagOptions = {}): boolean {
  const [active, setActive] = useState(false)
  const { delayMs = 0, minVisibleMs = 0 } = options
  const valueRef = useRef(value)
  valueRef.current = value
  const controllerRef = useRef<ReturnType<typeof createStableFlagController> | null>(null)

  useEffect(() => {
    // Reset to the fresh controller's baseline. Without this, recreating the
    // controller on an options change while `active` is true and `value` is
    // already false would strand the React state at true — the new controller
    // starts internally false, so its `setValue(false)` early-returns and never
    // emits `onChange(false)`.
    setActive(false)
    const controller = createStableFlagController(setActive, { delayMs, minVisibleMs })
    controllerRef.current = controller
    controller.setValue(valueRef.current)
    return () => {
      controller.dispose()
      controllerRef.current = null
    }
  }, [delayMs, minVisibleMs])

  useEffect(() => {
    controllerRef.current?.setValue(value)
  }, [value])

  return active
}