Discussion on: Search as you type at 60fps with js-coroutines

[Anurag Hazra]

This is really awesome mike. great work.

btw can we also show a spinner or loading text while the calculations are happening in the background because UX wise i didn't feel right because as a user i did not get any feedback after typing on the input box

[Mike Talbot ⭐]

Yes for sure, I've added it to the demo. Basically you just need to set and remove the searching element - you could even have "real" progress I guess. I changed the app to look like this:

export default function App() {
    const [value, setValue] = React.useState("")
    const [list, setList] = React.useState([])
    const [searching, setSearching] = React.useState(false)
    React.useEffect(() => {
        setSearching(true)
        find(value, results => {
            setList(results)
            setSearching(false)
        })
    }, [value])
    return (
        <div className="App">
            <h1>
                <a href="http://js-coroutines.com">js-coroutines</a> and
                1,000,000 entries <CircularProgress color="secondary" />
            </h1>
            <div
                style={{ display: "flex", alignItems: "center", width: "100%" }}
            >
                <div style={{ flexGrow: 1 }} />
                <input
                    style={{ marginRight: 8 }}
                    value={value}
                    placeholder="type a search"
                    onChange={({ target: { value } }) => setValue(value)}
                />
                <div style={{ opacity: searching ? 1 : 0 }}>
                    <CircularProgress size="1.2em" color="primary" />
                    <em
                        style={{
                            marginLeft: 8,
                            fontSize: "80%",
                            color: "#ccc"
                        }}
                    >
                        Searching...
                    </em>
                </div>
                <div style={{ flexGrow: 1 }} />
            </div>
            {!!list.length && <h3>Recommendations</h3>}
            <ul>
                {list.map((item, index) => {
                    return <li key={index}>{item}</li>
                })}
            </ul>
        </div>
    )
}