Faster searching with Fuse.js

[jthemphill]

• Resolves Improve script search performance #15.

Unlike match-sorter, Fuse.js creates an index which is cached in between renders. This drastically cuts down on the time spent writing queries. We can also debounce so we don't overload the CPU while the user is typing.

These videos are taken with the CPU throttled to 25% capacity!

Before:

prod.mov

After:

dev.mov

[tchajed]

What's blocking this? Does it rely on the vite build, or something else broken about the build?

[jthemphill]

What's blocking this? Does it rely on the vite build, or something else broken about the build?

It doesn't rely on the vite build. It works as-is, though page loads are slower. To fix that, we need to either cache the indices in localstorage or build the indices on the server during fetch-assets.

I've tried to create the character search index during fetch-assets on the server, but every attempt to do so winds up being more invasive than this PR should probably be. It looks like we'd either need to restructure the character search logic, or copy/paste all the character search logic, to do so. The project doesn't seem to be set up to share code between the frontend and backend right now.

I personally kind of want to remove the character search. It seems extremely niche to me, because we don't execute a character search unless we generate a search query that produces fewer than 10 title-based matches. And this isn't documented anywhere. I think this might have made sense when there were fewer scripts, and when fewer of the scripts had the names of characters in their titles.

Of course, character search would be a lot more useful if we make it more accessible in the UI, via a separate tab or explicit option, so that a user can explicitly choose to run a search by character.