HomePhabricator
Diffusion Comm f61bf372c059

[web] Use react-window

Description

[web] Use react-window

Summary:
Part of ENG-3976
This diff uses react-window package to render only visible threads. react-virtualized-auto-sizer is the recommended utility to automatically set height of the VariableSizeList. react-window works by applying a style to each element with an absolute position that it calculated.

There's one issue that I'm aware of: if you scroll down, the search bar will stop rendering and lose focus (but it will keep it's contents). On 1-1 with @ashoat we decided that's good enough for now. I will create an issue explaining a possible solution with docking the search bar before landing this diff.

Adding ashoat as reviewer because of new dependencies.

Test Plan: Check if thread list looks the same, and scrolls correctly. Try searching chat and check if everything works correctly. Check if an empty background tab renders correctly.

Reviewers: inka, kuba, kamil, ashoat

Reviewed By: ashoat

Subscribers: tomek, ashoat

Differential Revision: https://phab.comm.dev/D8234

Details

Provenance
Michal Gniadek <michal.gniadek@swmansion.com>Authored on May 31 2023, 2:23 AM
Reviewer
ashoat
Differential Revision
D8234: [web] Use react-window
Parents
rCOMM5092f6ecd961: [Keyserver] Attempt login to identity service
Branches
Unknown
Tags
Unknown

Event Timeline

Michal Gniadek <michal.gniadek@swmansion.com> committed rCOMMf61bf372c059: [web] Use react-window (authored by Michal Gniadek <michal.gniadek@swmansion.com>).Jul 17 2023, 3:47 AM