(Part 1 was c9bfc97)
Wow. After these two commits, this feels like a completely different
app. It’s so speedy!
Background
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.
Changelog
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.