wip

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>

frontend/src/hooks/common/use-deferred-state.ts

@@ -7,32 +7,39 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { useInterval } from 'react-use'
 
+const minimumTimeBetweenUpdateInterval = 200
+const forceUpdateAfterTime = 1000
+
 /**
  * Takes a value that changes often and outputs the last value that hasn't been changed in the last interval.
  *
  * @param value The value to defer
  * @param initialValue The initial value that is used until the first update
- * @param checkInterval The interval in ms that is used to check for updates. Default is 200ms.
  * @return The slowed down value
  */
-export const useDeferredState = <T>(value: T, initialValue: T, checkInterval = 200): T => {
+export const useDeferredState = <T>(value: T, initialValue: T): T => {
   const valueRef = useRef<T>(initialValue)
-  const lastTimestamp = useRef<number>(0)
+  const lastIncomingUpdateTimestamp = useRef<number>(0)
+  const lastOutgoingUpdateTimestamp = useRef<number>(0)
   const [deferredValue, setDeferredValue] = useState<T>(initialValue)
 
   useEffect(() => {
     valueRef.current = value
-    lastTimestamp.current = new Date().getTime()
+    lastIncomingUpdateTimestamp.current = new Date().getTime()
   }, [value])
 
   useInterval(
     useCallback(() => {
       const currentTimeStamp = new Date().getTime()
-      if (currentTimeStamp - lastTimestamp.current >= checkInterval) {
+      if (
+        currentTimeStamp - lastIncomingUpdateTimestamp.current >= minimumTimeBetweenUpdateInterval ||
+        currentTimeStamp - lastOutgoingUpdateTimestamp.current >= forceUpdateAfterTime
+      ) {
+        lastOutgoingUpdateTimestamp.current = currentTimeStamp
         setDeferredValue(valueRef.current)
       }
-    }, [checkInterval]),
+    }, []),
-    checkInterval
+    100
   )
 
   return deferredValue