Add loading animation, closes #1

javascript/src/app.tsx

@@ -2,7 +2,7 @@ import React, {FunctionComponent, render} from "preact"
 import habitat from "preact-habitat"
 import Omnibar, {buildItemStyle} from "omnibar2"
 import {Globals} from "csstype"
-import {useItemAction, useOmnibarExtensions} from "./hooks"
+import {useDelayedLoadingStyle, useItemAction, useOmnibarExtensions} from "./hooks"
 import {useHotkey, useModal, useToggleFocus} from "./hooks"
 import {AppArgs, INPUT_DATA_ID, Item, ModalArg} from "./types"
 import {iconClass} from "./icon"
@@ -27,6 +27,7 @@ const App: FunctionComponent<AppArgs> = (args) => {
 const RailsOmnibar: FunctionComponent<AppArgs & ModalArg> = (args) => {
   const extensions = useOmnibarExtensions(args)
   const itemAction = useItemAction(args.itemModal)
+  const loadingStyle = useDelayedLoadingStyle();
 
   return (
     <>
@@ -35,10 +36,12 @@ const RailsOmnibar: FunctionComponent<AppArgs & ModalArg> = (args) => {
         extensions={extensions}
         maxResults={args.maxResults}
         onAction={itemAction}
+        onQueryStart={() => loadingStyle.startTimer()}
+        onQueryEnd={() => loadingStyle.stop()}
         placeholder={args.placeholder}
         children={(props) => renderItem({...props, modal: args.modal})}
         showEmpty
-        style={args.modal ? MODAL_ROW_STYLE : ROW_STYLE}
+        style={{...(args.modal ? MODAL_ROW_STYLE : ROW_STYLE), ...loadingStyle.style}}
       />
       {args.itemModal.modal}
     </>

javascript/src/hooks/index.ts

@@ -1,3 +1,4 @@
+export * from "./use_delayed_loading_style"
 export * from "./use_hotkey"
 export * from "./use_item_action"
 export * from "./use_modal"

javascript/src/hooks/use_delayed_loading_style.tsx

@@ -0,0 +1,26 @@
+import {useState} from "preact/hooks"
+
+export const useDelayedLoadingStyle = () => {
+  const [enabled, setEnabled] = useState(false)
+  const [timer, setTimer] = useState<NodeJS.Timer | null>(null)
+
+  const startTimer = () => {
+    if (timer) clearTimeout(timer)
+    setTimer(setTimeout(() => setEnabled(true), 100))
+  }
+
+  const stop = () => {
+    if (timer) clearTimeout(timer)
+    setEnabled(false)
+  }
+
+  return { style : enabled ? LOADING_STYLE : {}, startTimer, stop }
+}
+
+const LOADING_STYLE = {
+  background: "repeating-linear-gradient(90deg, #000F, #0004 50%, #000F)",
+  backgroundClip: "text",
+  backgroundPosition: "40000px",
+  color: "#0001",
+  transition: "background 100s ease-out, color 0.15s ease-in",
+}

package.json

@@ -6,7 +6,7 @@
   "dependencies": {
     "@heroicons/react": "^2.0.14",
     "fuzzysort": "^2.0.4",
-    "omnibar2": "^2.4.5",
+    "omnibar2": "^2.5.0",
     "preact": "^10.11.3",
     "preact-habitat": "^3.3.0",
     "react-modal": "^3.16.1",