statusbar - show query execution duration

packages/web/src/utility/useTimerLabel.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import _ from 'lodash';
+
+function formatSeconds(duration) {
+  if (duration == null) return '';
+  const hours = _.padStart(Math.floor(duration / 3600).toString(), 2, '0');
+  const minutes = _.padStart((Math.floor(duration / 60) % 60).toString(), 2, '0');
+  const seconds = _.padStart((duration % 60).toString(), 2, '0');
+  return `${hours}:${minutes}:${seconds}`;
+}
+
+export default function useTimerLabel() {
+  const [duration, setDuration] = React.useState(null);
+  const [busy, setBusy] = React.useState(false);
+  React.useEffect(() => {
+    if (busy) {
+      setDuration(0);
+      const handle = setInterval(() => setDuration(x => x + 1), 1000);
+      return () => window.clearInterval(handle);
+    }
+  }, [busy]);
+
+  const start = React.useCallback(() => {
+    setBusy(true);
+  }, []);
+
+  const stop = React.useCallback(() => {
+    setBusy(false);
+  }, []);
+
+  return {
+    start,
+    stop,
+    text: formatSeconds(duration),
+    duration,
+  };
+}