fix: Improve clock accuracy

Instead of using setInterval to get a tick every second, starting at a
random point an slowly drifting a ms or 2 every few updates, set a 
timeout for the number of ms until the next update is due.

For example, if we have an interval of 1000ms (1s), and we start at
12:00:00.123, we will set a timeout of 877ms so that the next update
should be at exactly 12:00:01.000.

In practice, depending on how busy the browser’s event loop is etc. it
might be at e.g. 12:00:01.002, in which case the next update will set a timeout of 998ms.

Author: rjmunro

packages/webui/src/client/lib/lib.tsx

@@ -178,16 +178,33 @@ export function useDebounce<K>(value: K, delay: number, shouldUpdate?: (oldVal:
 	return debouncedValue
 }
 
+/**
+ * This hook returns the current time and updates it at the specified refresh period.
+ * It uses a timeout to schedule the next update based on the refresh period.
+ * The time is calculated as the current time in milliseconds since the Unix epoch.
+ * The hook also cleans up the timeout when the component using it unmounts.
+ *
+ * @param refreshPeriod - The period in milliseconds at which the current time should be refreshed.
+ * @returns The current time in milliseconds since the Unix epoch.
+ */
 export function useCurrentTime(refreshPeriod = 1000): number {
 	const [time, setTime] = useState(getCurrentTime())
+	const timeoutId = useRef<ReturnType<typeof setTimeout> | null>(null)
 
 	useEffect(() => {
-		const interval = setInterval(() => {
-			setTime(getCurrentTime())
-		}, refreshPeriod)
+		function updateTime() {
+			const current = getCurrentTime()
+			setTime(current)
+			const delay = refreshPeriod - (current % refreshPeriod)
+			timeoutId.current = setTimeout(updateTime, delay)
+		}
+
+		updateTime() // Initial call to start the timer
 
 		return () => {
-			clearInterval(interval)
+			if (timeoutId.current) {
+				clearTimeout(timeoutId.current) // Cleanup on unmount
+			}
 		}
 	}, [refreshPeriod])