MM-36696: global threads list now virtualized #8350

koox00 · 2021-07-06T14:13:56Z

Summary

Global threads list is virtualized to avoid rendering all thread
items at once.
This reduces the time needed to enter the threads route.

Ticket Link

https://mattermost.atlassian.net/browse/MM-36696

Release Note

NONE

Global threads list now is virtualized to avoid rendering all thread items at once. This reduces the time needed to enter the threads route.

Willyfrog

non-blocking comments

Willyfrog · 2021-07-07T09:45:28Z

components/threading/global_threads/thread_list/virtualized_thread_list.tsx

+const OVERSCAN_COUNT_BACKWARD = 4;
+const OVERSCAN_COUNT_FORWARD = 4;
+
+const virtListStyles = {


do we need to have the style inline?

DynamicSizeList accepts a style prop and not a class one.
My guess would be that since there are no stylesheets included in the module, there are only inline styles,
we pass inline styles so we can properly override if needed(?).

Willyfrog · 2021-07-07T09:55:30Z

components/threading/global_threads/thread_list/thread_list.tsx

+                    selectedThreadId={selectedThreadId}
+                />
+                {currentFilter === ThreadFilter.unread && !someUnread && isEmpty(unreadIds) ? (
+                    <NoResultsIndicator


shouldn't this be either the threadlist or the noresults? why nesting the no result indicator inside a list that won't be populated?

@Willyfrog it's the noresults for the unreads tab. So it's not like nesting in the list, but nesting in the left pane.
Would renaming the component from thread_list to thread_list_pane make it clearer?

PS:
We have 3 "noresults" cases:

whole global threads page (when not following any thread)

right pane (when there is no selected thread)

left pane (threads list) unreads tab (when we have no unread threads) <--- the case we are discussing

Willyfrog · 2021-07-07T09:56:37Z

components/threading/global_threads/thread_list/virtualized_thread_list.tsx

+    // so we need to reverse the ids before feeding the list
+    // so that we get the correct order afterwards.
+    //
+    // TODO: have dynamic-virtualized-list to maybe accept a direction prop


nitpick: this should be an issue in the repo instead of a todo here

Note that the repo was created originally by Sudheer as a fork of react-window, and since he left, I don't think anyone else has been maintaining it.

Edit: Also, that's funny that it works that way since I'm pretty sure the reason it does that is because we send the posts to the client sorted backwards (newest to oldest) which honestly has caused a lot of confusion in the post storage code in the past. I wonder if we should just store posts oldest to newest and then update the list component to never reverse the list.

Edit: Also, that's funny that it works that way since I'm pretty sure the reason it does that is because we send the posts to the client sorted backwards (newest to oldest) which honestly has caused a lot of confusion in the post storage code in the past. I wonder if we should just store posts oldest to newest and then update the list component to never reverse the list.

@hmhealey, it seems that it doesn't work :( I cannot find a way to add items at the top...
items added at the bottom (0 index) are getting rendered, but items added at the top (last index) don't...

I'd like to add back react-window for this case.

matthewbirtch · 2021-07-08T18:02:40Z

@koox00 this seems great to me, but I'm not sure the test server is the best place to test on since it doesn't have a lot of data yet.

Is there anything specific from a UX perspective that I should pay close attention to in the review? I'm not seeing anything glaring

esethna · 2021-07-08T18:08:54Z

@matthewbirtch @koox00 do we want to add a loading indicator at the bottom of the list if you scroll down and threads are still fetching? I throttled my connection to "slow 3G" then scrolled down really fast and there was no indication that more threads were loading in until they were returned. In the center channel we have the three dots pulsing animation

esethna · 2021-07-08T18:09:53Z

This can be important for slow or unstable connections ^

koox00 · 2021-07-08T18:45:17Z

@matthewbirtch @koox00 do we want to add a loading indicator at the bottom of the list if you scroll down and threads are still fetching? I throttled my connection to "slow 3G" then scrolled down really fast and there was no indication that more threads were loading in until they were returned. In the center channel we have the three dots pulsing animation

@esethna the "infinite" loading will be added later on, this PR is just to improve rendering performance of the list so that the time to enter threads view is reduced.

esethna · 2021-07-08T18:53:59Z

Ah got it, thanks @koox00

hmhealey

One non-blocking comment, but otherwise this looks good to me.

components/threading/global_threads/thread_list/virtualized_thread_list.tsx

calebroseland

LGTM overall. Seems some memoization (ThreadItem) may be negated: when you mark as unread/read, there's a brief flash and a slight delay.

1st half current, 2nd half rerendering

…ormance

Mostly refactors the use of selectors to avoid re-rendering much. - Selectors that are not memoized (via let's say createSelector) should pase shallowEqual to useSelector hook - Selectors which take an object as an argument should memo that object so that they don't re-render on every re-render, since the custom object would be created each time regardless if the property at hand hadn't changed Other changes unrelated to performance: - spans should not contain divs ideally - ThreadItem now accepts a style prop to be feeded by Virtualized list - ThreadViewer had shouldComponentUpdate so it can't extend PureComponent in the same time PS: react-dev-tools' profiler showed that a lot of re-renders are happening due to "hooks changed" so I tried to tackle them, but it's not specific on which hooks changed, so it could be useContext which redux uses or the react ones or our custon ones.

koox00 · 2021-07-13T16:29:21Z

@hmhealey, @calebroseland I've added some changes to improve performance, can you take a look?

This commit replaces DynamicSizeList with react-window's FixedSizeList. The reason is mostly dynamic-virtualized-list doesn't support adding lists at the top. The most notable change is that all thread items now have the same height.

koox00 · 2021-07-14T10:35:36Z

/update-branch

matthewbirtch

Not seeing anything glaring from my tests. Seems to work/look great.

calebroseland

LGTM!

jgilliam17

Thanks @koox00
Tested, looks good to merge.

Verified opening long global threads list, list renders as expected.

mm-cloud-bot · 2021-07-16T13:27:16Z

Test server destroyed

jgilliam17 · 2021-07-16T13:46:44Z

@koox00 I didn't merge this due to conflicts, can you please take a look? Thanks.

…ormance

…st-webapp into MM-36696_crt-performance

amyblais · 2021-07-20T13:46:47Z

/cherry-pick cloud

mattermod · 2021-07-20T13:46:49Z

Cherry pick is scheduled.

* MM-36696: global threads virtualized list Global threads list now is virtualized to avoid rendering all thread items at once. This reduces the time needed to enter the threads route. * Fixes tests * Minor fixes * Fixes performance issues in global threads Mostly refactors the use of selectors to avoid re-rendering much. - Selectors that are not memoized (via let's say createSelector) should pase shallowEqual to useSelector hook - Selectors which take an object as an argument should memo that object so that they don't re-render on every re-render, since the custom object would be created each time regardless if the property at hand hadn't changed Other changes unrelated to performance: - spans should not contain divs ideally - ThreadItem now accepts a style prop to be feeded by Virtualized list - ThreadViewer had shouldComponentUpdate so it can't extend PureComponent in the same time PS: react-dev-tools' profiler showed that a lot of re-renders are happening due to "hooks changed" so I tried to tackle them, but it's not specific on which hooks changed, so it could be useContext which redux uses or the react ones or our custon ones. * Uses react-window for virtualized thread list This commit replaces DynamicSizeList with react-window's FixedSizeList. The reason is mostly dynamic-virtualized-list doesn't support adding lists at the top. The most notable change is that all thread items now have the same height. * Revert needless "optimization" Co-authored-by: Mattermod <mattermod@users.noreply.github.com> (cherry picked from commit cafeacf)

* MM-36696: global threads virtualized list Global threads list now is virtualized to avoid rendering all thread items at once. This reduces the time needed to enter the threads route. * Fixes tests * Minor fixes * Fixes performance issues in global threads Mostly refactors the use of selectors to avoid re-rendering much. - Selectors that are not memoized (via let's say createSelector) should pase shallowEqual to useSelector hook - Selectors which take an object as an argument should memo that object so that they don't re-render on every re-render, since the custom object would be created each time regardless if the property at hand hadn't changed Other changes unrelated to performance: - spans should not contain divs ideally - ThreadItem now accepts a style prop to be feeded by Virtualized list - ThreadViewer had shouldComponentUpdate so it can't extend PureComponent in the same time PS: react-dev-tools' profiler showed that a lot of re-renders are happening due to "hooks changed" so I tried to tackle them, but it's not specific on which hooks changed, so it could be useContext which redux uses or the react ones or our custon ones. * Uses react-window for virtualized thread list This commit replaces DynamicSizeList with react-window's FixedSizeList. The reason is mostly dynamic-virtualized-list doesn't support adding lists at the top. The most notable change is that all thread items now have the same height. * Revert needless "optimization" Co-authored-by: Mattermod <mattermod@users.noreply.github.com> (cherry picked from commit cafeacf) Co-authored-by: Kyriakos Z <3829551+koox00@users.noreply.github.com>

MM-36696: global threads virtualized list

d9712c5

Global threads list now is virtualized to avoid rendering all thread items at once. This reduces the time needed to enter the threads route.

mm-cloud-bot added the release-note-none label Jul 6, 2021

koox00 added 2 commits July 6, 2021 17:41

Fixes tests

c4e25c2

Minor fixes

6f432c9

koox00 added 2: Dev Review Requires review by a core commiter Setup Cloud Test Server Setup a test server using Mattermost Cloud labels Jul 6, 2021

koox00 requested review from calebroseland and Willyfrog July 7, 2021 08:50

Willyfrog approved these changes Jul 7, 2021

View reviewed changes

Willyfrog requested a review from hmhealey July 7, 2021 09:58

koox00 mentioned this pull request Jul 7, 2021

DynamicSizeList direction mattermost/dynamic-virtualized-list#25

Open

esethna requested a review from matthewbirtch July 8, 2021 17:57

esethna added the 1: UX Review Requires review by a UX Designer label Jul 8, 2021

esethna added this to the v5.38.0 milestone Jul 8, 2021

esethna removed the request for review from matthewbirtch July 8, 2021 18:54

esethna removed the 1: UX Review Requires review by a UX Designer label Jul 8, 2021

hmhealey approved these changes Jul 9, 2021

View reviewed changes

components/threading/global_threads/thread_list/virtualized_thread_list.tsx Outdated Show resolved Hide resolved

calebroseland reviewed Jul 9, 2021

View reviewed changes

hmhealey self-requested a review July 9, 2021 17:59

koox00 added 2 commits July 13, 2021 16:19

Merge remote-tracking branch 'upstream/master' into MM-36696_crt-perf…

872b646

…ormance

koox00 requested a review from calebroseland July 13, 2021 16:24

Uses react-window for virtualized thread list

5b59cd2

This commit replaces DynamicSizeList with react-window's FixedSizeList. The reason is mostly dynamic-virtualized-list doesn't support adding lists at the top. The most notable change is that all thread items now have the same height.

matthewbirtch approved these changes Jul 14, 2021

View reviewed changes

esethna removed the 1: PM Review Requires review by a product manager label Jul 14, 2021

esethna approved these changes Jul 14, 2021

View reviewed changes

esethna removed the 1: UX Review Requires review by a UX Designer label Jul 14, 2021

esethna requested a review from jgilliam17 July 14, 2021 18:52

esethna added the 3: QA Review Requires review by a QA tester label Jul 14, 2021

calebroseland approved these changes Jul 15, 2021

View reviewed changes

esethna removed the 2: Dev Review Requires review by a core commiter label Jul 15, 2021

esethna removed the request for review from hmhealey July 15, 2021 18:16

jgilliam17 approved these changes Jul 16, 2021

View reviewed changes

jgilliam17 added 4: Reviews Complete All reviewers have approved the pull request and removed 3: QA Review Requires review by a QA tester Setup Cloud Test Server Setup a test server using Mattermost Cloud labels Jul 16, 2021

amyblais assigned koox00 Jul 16, 2021

koox00 added 3 commits July 19, 2021 12:40

Merge remote-tracking branch 'upstream/master' into MM-36696_crt-perf…

36ebfe5

…ormance

Revert needless "optimization"

a204aef

Merge branch 'MM-36696_crt-performance' of github.com:koox00/mattermo…

2cec002

…st-webapp into MM-36696_crt-performance

koox00 merged commit cafeacf into mattermost:master Jul 19, 2021

amyblais added the CherryPick/Approved Meant for the quality or patch release tracked in the milestone label Jul 19, 2021

mattermost-build mentioned this pull request Jul 20, 2021

Automated cherry pick of #8350 #8427

Merged

mattermod added CherryPick/Done Successfully cherry-picked to the quality or patch release tracked in the milestone and removed CherryPick/Approved Meant for the quality or patch release tracked in the milestone labels Jul 20, 2021

amyblais added Changelog/Not Needed Does not require a changelog entry Docs/Not Needed Does not require documentation labels Jul 20, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

MM-36696: global threads list now virtualized #8350

MM-36696: global threads list now virtualized #8350

koox00 commented Jul 6, 2021

Willyfrog left a comment

Willyfrog Jul 7, 2021

koox00 Jul 7, 2021

Willyfrog Jul 7, 2021

koox00 Jul 7, 2021

Willyfrog Jul 7, 2021

hmhealey Jul 9, 2021 •

edited

Loading

koox00 Jul 13, 2021

matthewbirtch commented Jul 8, 2021

esethna commented Jul 8, 2021

esethna commented Jul 8, 2021 •

edited

Loading

koox00 commented Jul 8, 2021 •

edited

Loading

esethna commented Jul 8, 2021

hmhealey left a comment

calebroseland left a comment •

edited

Loading

koox00 commented Jul 13, 2021

koox00 commented Jul 14, 2021

matthewbirtch left a comment

calebroseland left a comment

jgilliam17 left a comment

mm-cloud-bot commented Jul 16, 2021

jgilliam17 commented Jul 16, 2021

amyblais commented Jul 20, 2021

mattermod commented Jul 20, 2021

MM-36696: global threads list now virtualized #8350

MM-36696: global threads list now virtualized #8350

Conversation

koox00 commented Jul 6, 2021

Summary

Ticket Link

Release Note

Willyfrog left a comment

Choose a reason for hiding this comment

Willyfrog Jul 7, 2021

Choose a reason for hiding this comment

koox00 Jul 7, 2021

Choose a reason for hiding this comment

Willyfrog Jul 7, 2021

Choose a reason for hiding this comment

koox00 Jul 7, 2021

Choose a reason for hiding this comment

Willyfrog Jul 7, 2021

Choose a reason for hiding this comment

hmhealey Jul 9, 2021 • edited Loading

Choose a reason for hiding this comment

koox00 Jul 13, 2021

Choose a reason for hiding this comment

matthewbirtch commented Jul 8, 2021

esethna commented Jul 8, 2021

esethna commented Jul 8, 2021 • edited Loading

koox00 commented Jul 8, 2021 • edited Loading

esethna commented Jul 8, 2021

hmhealey left a comment

Choose a reason for hiding this comment

calebroseland left a comment • edited Loading

Choose a reason for hiding this comment

koox00 commented Jul 13, 2021

koox00 commented Jul 14, 2021

matthewbirtch left a comment

Choose a reason for hiding this comment

calebroseland left a comment

Choose a reason for hiding this comment

jgilliam17 left a comment

Choose a reason for hiding this comment

mm-cloud-bot commented Jul 16, 2021

jgilliam17 commented Jul 16, 2021

amyblais commented Jul 20, 2021

mattermod commented Jul 20, 2021

hmhealey Jul 9, 2021 •

edited

Loading

esethna commented Jul 8, 2021 •

edited

Loading

koox00 commented Jul 8, 2021 •

edited

Loading

calebroseland left a comment •

edited

Loading