MM-31275 New sidebar performance improvements

[hmhealey]

Here are some performance improvements around the new sidebar when the user is a member of many channels. I focused on two areas:

1. The new sidebar and some other components re-rendering when the user clicks anywhere. This is new to 5.30.
2. The sidebar lags heavily when scrolling. This existed in 5.29, and it may have gotten worse, but my master test server was in dev mode, so that may have made the lag worse.

When investigating the re-rendering:

1. The new sidebar would entirely re-render when clicking anywhere in the app because that would trigger a MULTISELECT_CHANNEL_CLEAR action which caused state.views.channel_sidebar.multiselectedChannelIds to change even when it was already empty. That's fixed now.

2. Similarly, some other random components would also re-render when clicking anywhere because of the same action. That happened because:

   1. Some selectors are not memoized properly, so they return new objects on every call.
   2. redux-offline makes every dispatched action trigger the store state to change, so mapStateToProps is called for all components on every action.

   Because of both of those, dispatching the MULTISELECT_CHANNEL_CLEAR on every click was causing some older components to re-render. Those should be fixed eventually (I have a list of tickets to write), but in the mean time, we just won't dispatch that action when it's not necessary.

When investigating the scrolling lag:

1. I added a debounce to the onScroll handlers used by both the new and old sidebars to show the More Unreads Above/Below indicators. This didn't have a huge effect, but it might be helpful anyways.
2. After a bunch of commenting out stuff, I found that the main source of the sidebar lag was the SidebarMenu components because they attached their own scroll handlers to the sidebar so that they could close the menu when the user scrolls. As you get more channels in the sidebar, more handlers were added, and the lag got worse. I remove those, although that does mean that those menus will stay open and won't scroll with the sidebar, but I think that's an acceptable defect since they caused a ton of lag.

I also spent a bit of time investigating the sidebar re-rendering when the user was typing because the sidebar listens to local storage where drafts are saved, but that didn't seem to change anything.

Ticket Link

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

[devinbinnie]

Are these just not needed anymore?

[hmhealey]

This is breaking the functionality that closes the menus when you scroll the sidebar, but I couldn't come up with a quick, low-risk way to do that with how the menus are written. I think the performance improvements of this removal heavily outweigh the slight UX degredation.

[enahum]

Can you file a ticket so this can be revisited?

[jgilliam17]

Thank @hmhealey
Tested, looks good to merge.

• Verified sidebar More Unreads indicator works as before. Verified multi-selected drag and drop group of channels can be cleared.

[mm-cloud-bot]

Test server destroyed

[mattermod]

Will try to auto merge this PR once all tests and checks are passing. This might take up to an hour.

[mattermod]

Trying to auto merge this PR.

[mattermod]

Pull Request successfully merged
SHA: fd1d088

[mattermod]

Cherry pick is scheduled.

[mattermod]

Error trying doing the automated Cherry picking. Please do this manually

+++ Updating remotes...
Fetching upstream
Failed to add the RSA host key for IP address '140.82.114.3' to the list of known hosts (/app/.ssh/known_hosts).
From github.com:mattermost/mattermost-webapp
 * [new branch]          MM-20401_marketplace-ts -> upstream/MM-20401_marketplace-ts
 * [new branch]          MM-27209              -> upstream/MM-27209
   b3d918c05..7325feaf2  MM-27222-2            -> upstream/MM-27222-2
   c1da972ba..5ee0283a3  MM-27834-collapse-on-5-plugin-buttonss -> upstream/MM-27834-collapse-on-5-plugin-buttonss
   866adfe78..9b3dc9dc9  MM-27927              -> upstream/MM-27927
   37bd73a0a..b17c3233d  MM-28155-custom-links -> upstream/MM-28155-custom-links
 * [new branch]          MM-28184_user-mgmt-deactivation -> upstream/MM-28184_user-mgmt-deactivation
 + 0d694b7c6...81cd02d27 MM-28256              -> upstream/MM-28256  (forced update)
   407ee4ecc..11a092ba4  MM-28259-custom-slash-commands -> upstream/MM-28259-custom-slash-commands
 * [new branch]          MM-30349-demo-plugin-webhooks -> upstream/MM-30349-demo-plugin-webhooks
 * [new branch]          MM-30357              -> upstream/MM-30357
 * [new branch]          MM-30361              -> upstream/MM-30361
 * [new branch]          MM-30379              -> upstream/MM-30379
 * [new branch]          MM-30383              -> upstream/MM-30383
   cec0f665f..1947e8de8  MM-30444              -> upstream/MM-30444
 * [new branch]          MM-31327_typescript-eslint -> upstream/MM-31327_typescript-eslint
   f635879a7..8f10cbd13  cloud                 -> upstream/cloud
 * [new branch]          dependabot/npm_and_yarn/e2e/ini-1.3.8 -> upstream/dependabot/npm_and_yarn/e2e/ini-1.3.8
 * [new branch]          e2e-account-settings  -> upstream/e2e-account-settings
 * [new branch]          hack-20-cr-css        -> upstream/hack-20-cr-css
   22793b4cb..fd1d088e1  master                -> upstream/master
 * [new branch]          new-quck-switch       -> upstream/new-quck-switch
   4a5ce873b..d63a96e4c  release-5.30          -> upstream/release-5.30
   e76e2e311..f5bf48079  sysconsolecypress     -> upstream/sysconsolecypress
 * [new tag]             cloud-2020-12-08      -> cloud-2020-12-08
Fetching origin
Failed to add the RSA host key for IP address '140.82.114.3' to the list of known hosts (/app/.ssh/known_hosts).
+++ Updating remotes done...
+++ Creating local branch automated-cherry-pick-of-mattermost-webapp-#7207-upstream-release-5.30-1607980523
Switched to a new branch 'automated-cherry-pick-of-mattermost-webapp-#7207-upstream-release-5.30-1607980523'
Branch 'automated-cherry-pick-of-mattermost-webapp-#7207-upstream-release-5.30-1607980523' set up to track remote branch 'release-5.30' from 'upstream'.

+++ About to attempt cherry pick of PR #7207 with merge commit fd1d088e14ea29b1a60646e1907ce9740f71f921.

error: could not apply fd1d088e1... MM-31275 New sidebar performance improvements (#7207)
hint: after resolving the conflicts, mark the corrected paths
hint: with 'git add <paths>' or 'git rm <paths>'
hint: and commit the result with 'git commit'

+++ Conflicts detected:

UU actions/views/channel_sidebar.ts
UU components/sidebar/index.ts
UU reducers/views/channel_sidebar.ts
Aborting.

+++ Aborting in-progress git cherry-pick.

+++ Returning you to the master branch and cleaning up.

[jespino]

Lgtm

[amyblais]

@hmhealey Seems to need a manual cherry-pick.

[hmhealey]

@amyblais Yeah, I realized when talking to Jelena that some of the stuff I fixed wasn't in 5.30. The major performance improvement around scrolling will still have an effect though

[amyblais]

/cherry-pick cloud

[mattermod]

Cherry pick is scheduled.