New Docs site - Search bar performance

[DrewML]

Howdy!

First want to congratulate y'all on the launch of the new docs site - it's nice and fast!

I did notice an issue with the search bar I wanted to make y'all aware of. Both on a MacBook Pro and an iPhone, keystrokes start getting pretty heavily delayed and frames start dropping heavily (problem is likely more severe on slower devices).

It looks like there's a search lib called Fuse.js that's running a search on an ~800kb payload every keystroke (via the useSearch hook in gatsby-theme-doctornpm), and then triggering (what looks like) a bunch of subsequent React renders.

While typing, the frame rate drops to around 1fps

[ethomson]

This is good feedback. And - it looks like something that's already been fixed upstream - primer/doctocat#178

I'll pull this change in to our theme and see how it helps.

[ethomson]

We pushed the change to get the search running in the background, and it looks like a significant improvement to me.

However, we may still want to do some work to get the size of the index down.

[DrewML]

Nice work @ethomson! This helped a lot on my devices. Looks like, on my MBP, the blocking went from 200ms+ to about ~60ms blocking.

It seems like a lot of the leftover CPU time is styled-components doing a ton of work. Not super familiar with Styled Components internals, so don't know if there's anything else there to optimize.