The performance edit: part 2 rileyjshaw/font-comparison-tool

(Part 1 was c9bfc97)

Wow. After these two commits, this feels like a completely different
app. It’s so speedy!


Last commit, I focused on eliminating unnecessary FontContainer
re-renders. This wasn’t a big priority at first… until I added Google’s
catalog of > 1000 fonts. Ever since, performance has crawled whenever
that category is selected.

I decided to tighten up my own render code first because I knew that
after enclosing the list in a virtual scroller, performance would be
okay enough. And then I’d be less motivated by the sluggish,
practically unusable Google Fonts viewer.

And I'm happy I did! react-window made a huge difference. With the
improved render tree and virtualized scrolling, this app somehow makes
loading, displaying, and live-editing the preview of > 1000 webfonts
pretty smooth.


Specific big changes in this commit:

  • Enclose the preview grid in a virtualized scroller (react-window)
  • Rework the font-loading pipeline to only download new fonts once
    they’re near the viewport
  • Supporting UI and layout changes

There may be a performance edit: part 3, but… there’s not much need for
the time being.