0
0
instrumental/app/javascript/mastodon/components
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
..
__tests__ Revert Font Awesome 5 upgrade (#8810) 2018-09-28 02:11:14 +02:00
account.js Replace unlock-alt icon with unlock (#9952) 2019-01-31 13:45:15 +01:00
attachment_list.js Add noopener and/or noreferrer (#12202) 2019-10-24 22:44:42 +02:00
autosuggest_emoji.js Compress and combine emoji data (#5229) 2017-10-06 03:42:34 +02:00
autosuggest_hashtag.js Restore hashtag suggestions from local tag history (#11632) 2019-08-22 04:37:18 +02:00
autosuggest_input.js Fix emoji autosuggestions (#11442) 2019-07-29 15:04:49 +02:00
autosuggest_textarea.js Fix emoji autosuggestions (#11442) 2019-07-29 15:04:49 +02:00
avatar_composite.js Change conversations UI (#11896) 2019-09-21 20:01:16 +02:00
avatar_overlay.js Fix GIF avatars not autoplaying when GIF autoplay is enabled (#6000) 2017-12-13 12:14:03 +01:00
avatar.js Revert Font Awesome 5 upgrade (#8810) 2018-09-28 02:11:14 +02:00
button.js Fix "cancel follow request" button having unreadable text in web UI (#11521) 2019-08-08 08:56:55 +02:00
column_back_button_slim.js Refactor icons in web UI to use Icon component (#9951) 2019-02-01 00:14:05 +01:00
column_back_button.js Fix crash when switching back/from mobile layout (#11655) 2019-08-25 15:49:02 +02:00
column_header.js Fix thread column showing pin button (#11891) 2019-09-19 19:58:26 +02:00
column.js Fix scroll to top in single column UI (#11463) 2019-08-01 19:17:17 +02:00
display_name.js Play animated custom emoji on hover (#11348) 2019-07-21 18:10:40 +02:00
domain.js Replace unlock-alt icon with unlock (#9952) 2019-01-31 13:45:15 +01:00
dropdown_menu.js Add noopener and/or noreferrer (#12202) 2019-10-24 22:44:42 +02:00
error_boundary.js Add noopener and/or noreferrer (#12202) 2019-10-24 22:44:42 +02:00
gifv.js Fix media editing modal changing dimensions when image loads (#12131) 2019-10-10 05:21:38 +02:00
hashtag.js Fix wrong sum of usage in hashtag component in web UI (#11755) 2019-09-04 10:10:18 +02:00
icon_button.js Replace fav icon animation with CSS (#12175) 2019-10-24 22:47:48 +02:00
icon_with_badge.js Improvements to the single column layout (#10835) 2019-05-26 02:55:37 +02:00
icon.js Refactor icons in web UI to use Icon component (#9951) 2019-02-01 00:14:05 +01:00
intersection_observer_article.js Summary: fix slowness due to layout thrashing when reloading a large … (#12661) 2019-12-29 05:39:48 +01:00
load_gap.js Refactor icons in web UI to use Icon component (#9951) 2019-02-01 00:14:05 +01:00
load_more.js Allow clients to fetch statuses made while they were offline (#6876) 2018-03-24 15:25:15 +01:00
load_pending.js Add option to disable real-time updates in web UI (#9984) 2019-07-16 06:30:47 +02:00
loading_indicator.js Add loading indicator animation (#4316) 2017-07-23 20:28:18 +02:00
media_gallery.js Add setting for whether to crop images in unexpanded toots (#12126) 2019-10-24 22:51:41 +02:00
missing_indicator.js Fix performance of home feed regeneration (#12084) 2019-10-06 22:11:17 +02:00
modal_root.js Fix lost focus when modals open/close (#12437) 2019-11-30 18:19:47 +01:00
permalink.js When enabled, always display media in gallery. Also: click to reveal (#6692) 2018-03-08 08:57:21 +01:00
poll.js Fix poll options not being selectable via keyboard (#12538) 2019-12-03 19:53:16 +01:00
radio_button.js Add profile directory to web UI (#11688) 2019-08-30 00:14:36 +02:00
regeneration_indicator.js Fix performance of home feed regeneration (#12084) 2019-10-06 22:11:17 +02:00
relative_timestamp.js Update poll remaining time just like with status timestamps (#10466) 2019-04-03 18:16:55 +02:00
scrollable_list.js Summary: fix slowness due to layout thrashing when reloading a large … (#12661) 2019-12-29 05:39:48 +01:00
setting_text.js Improve accessibility (part 3) (#4405) 2017-07-28 00:54:48 +02:00
status_action_bar.js Fix blocking/unblocking users from status dropdown menu (#12535) 2019-12-02 18:25:24 +01:00
status_content.js Summary: fix slowness due to layout thrashing when reloading a large … (#12661) 2019-12-29 05:39:48 +01:00
status_list.js Summary: fix slowness due to layout thrashing when reloading a large … (#12661) 2019-12-29 05:39:48 +01:00
status.js Summary: fix slowness due to layout thrashing when reloading a large … (#12661) 2019-12-29 05:39:48 +01:00