1
0
REI-Fixed/app/javascript/mastodon/features
Matt Panaro 31f7c3fc5d Summary: fix slowness due to layout thrashing when reloading a large … (#12661)
* Summary: fix slowness due to layout thrashing when reloading a large set of status updates

in order to limit the maximum size of a status in a list view (e.g. the home timeline), so as to avoid having to scroll all the way through an abnormally large status update (see https://github.com/tootsuite/mastodon/pull/8205), the following steps are taken:
•the element containing the status is rendered in the browser
•its height is calculated, to determine if it exceeds the maximum height threshold.
Unfortunately for performance, these steps are carried out in the componentDidMount(/Update) method, which also performs style modifications on the element.  The combination of  height request and style modification during javascript evaluation in the browser leads to layout-thrashing, where the elements are repeatedly re-laid-out (see https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing & https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Performance_best_practices_for_Firefox_fe_engineers).
The solution implemented here is to memoize the collapsed state in Redux the first time the status is seen (e.g. when fetched as part of a small batch, to populate the home timeline) , so that on subsequent re-renders, the value can be queried, rather than recalculated.  This strategy is derived from https://github.com/tootsuite/mastodon/pull/4439 & https://github.com/tootsuite/mastodon/pull/4909, and should resolve https://github.com/tootsuite/mastodon/issues/12455.

Andrew Lin (https://github.com/onethreeseven) is thanked for his assistance in root cause analysis and solution brainstorming

* remove getSnapshotBeforeUpdate from status

* remove componentWillUnmount from status

* persist last-intersected status update and restore when ScrollableList is restored

e.g. when navigating from home-timeline to a status conversational  thread and <Back again

* cache currently-viewing status id to avoid calling redux with identical value

* refactor collapse toggle to pass explicit boolean
2019-12-29 05:39:48 +01:00
..
account/components Add basic support for group actors (#12071) 2019-12-04 20:36:33 +01:00
account_gallery Add noopener and/or noreferrer (#12202) 2019-10-24 22:44:42 +02:00
account_timeline Add missing back button header for invalid account (#12094) 2019-10-07 04:33:31 +02:00
audio Add download button to audio and video players (#12179) 2019-10-25 11:48:20 +02:00
blocks Fix scroll to top in single column UI (#11463) 2019-08-01 19:17:17 +02:00
bookmarked_statuses Add bookmarks (#7107) 2019-11-13 23:02:10 +01:00
community_timeline Fix unread toot indicator not honoring onlyMedia in public and community timelines (#12330) 2019-11-11 00:05:02 +02:00
compose Fix tooltip messages of multiple poll switcher are reversed (#12616) 2019-12-16 23:55:02 +01:00
direct_timeline Fix conversations not having an unread indicator in web UI (#12506) 2019-12-01 07:06:20 +01:00
directory Fix custom emoji animation on hover in WebUI directory bios (#11716) 2019-09-01 20:04:35 +02:00
domain_blocks Fix scroll to top in single column UI (#11463) 2019-08-01 19:17:17 +02:00
emoji Fix emoji search not showing custom emoji when none are uncategorized (#11920) 2019-09-23 00:48:43 +02:00
favourited_statuses Fix scroll to top in single column UI (#11463) 2019-08-01 19:17:17 +02:00
favourites Add refresh button to list of rebloggers/favouriters in web UI (#12031) 2019-10-01 04:57:27 +02:00
follow_requests Fix scroll to top in single column UI (#11463) 2019-08-01 19:17:17 +02:00
followers Fix follower/following lists resetting on back-navigation in web UI (#11986) 2019-09-29 16:27:00 +02:00
following Fix follower/following lists resetting on back-navigation in web UI (#11986) 2019-09-29 16:27:00 +02:00
generic_not_found Fix performance of home feed regeneration (#12084) 2019-10-06 22:11:17 +02:00
getting_started Add bookmarks (#7107) 2019-11-13 23:02:10 +01:00
hashtag_timeline Bump react-select from 2.4.4 to 3.0.5 (#11930) 2019-10-22 01:31:27 +09:00
home_timeline Fix scroll to top in single column UI (#11463) 2019-08-01 19:17:17 +02:00
introduction change "finish tutorial" text to "finish toot-orial" (#9905) 2019-02-04 04:45:29 +01:00
keyboard_shortcuts Add hotkey for opening media files (#12498) 2019-11-29 17:02:35 +01:00
list_adder Refactor icons in web UI to use Icon component (#9951) 2019-02-01 00:14:05 +01:00
list_editor Disable list title validation button when list title is empty (#11475) 2019-08-03 19:10:39 +02:00
list_timeline Fix scroll to top in single column UI (#11463) 2019-08-01 19:17:17 +02:00
lists Disable list title validation button when list title is empty (#11475) 2019-08-03 19:10:39 +02:00
mutes Fix scroll to top in single column UI (#11463) 2019-08-01 19:17:17 +02:00
notifications Add follow_request notification type (#12198) 2019-12-01 17:25:29 +01:00
pinned_statuses Fix scroll to top in single column UI (#11463) 2019-08-01 19:17:17 +02:00
public_timeline Fix unread toot indicator not honoring onlyMedia in public and community timelines (#12330) 2019-11-11 00:05:02 +02:00
reblogs Add refresh button to list of rebloggers/favouriters in web UI (#12031) 2019-10-01 04:57:27 +02:00
report Add blurhash (#10630) 2019-04-27 03:24:09 +02:00
search Add responsive panels to the single-column layout (#10820) 2019-05-25 21:27:00 +02:00
standalone Disable real-time updates on public pages to improve readability (#10260) 2019-03-18 18:34:56 +01:00
status Fix media open hotkey (#12546) 2019-12-05 00:50:51 +01:00
ui Summary: fix slowness due to layout thrashing when reloading a large … (#12661) 2019-12-29 05:39:48 +01:00
video Add hotkey for opening media files (#12498) 2019-11-29 17:02:35 +01:00