mastodon/app/javascript/mastodon/actions
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
..
importer Fix notification filters not applying to poll options (#12269) 2019-11-04 13:01:50 +01:00
push_notifications Do not override the default push notification settings (#6037) 2018-05-19 14:45:58 +02:00
accounts.js Optimize the process of following someone (#9220) 2018-11-08 21:05:42 +01:00
alerts.js Add special alert for throttled requests (#11677) 2019-08-27 16:50:39 +02:00
app.js Add indicator of unread content to window title when web UI is out of focus (#11560) 2019-08-13 12:22:16 +02:00
blocks.js Add explanation to mute dialog, refactor and clean up mute/block UI (#11992) 2019-09-29 21:46:05 +02:00
bookmarks.js Add bookmarks (#7107) 2019-11-13 23:02:10 +01:00
bundles.js Lazy load components (#3879) 2017-07-08 00:06:02 +02:00
columns.js Put "Media Only" option in column settings instead of content area headline (#7801) 2018-06-15 11:15:15 +02:00
compose.js Fix pending upload count not being decremented on error (#12499) 2019-11-29 17:02:18 +01:00
conversations.js Change conversations UI (#11896) 2019-09-21 20:01:16 +02:00
custom_emojis.js Fix loading indicator inconsistency (#9252) 2018-11-10 15:04:13 +01:00
directory.js Add profile directory to web UI (#11688) 2019-08-30 00:14:36 +02:00
domain_blocks.js Change account domain block to clear out notifications and follows (#11393) 2019-07-25 04:17:35 +02:00
dropdown_menu.js Only focus first element of dropdown menus if using keyboard (#8679) 2018-09-13 20:31:33 +02:00
emojis.js Track frequently used emojis in web UI (#5275) 2017-10-08 21:47:15 +02:00
favourites.js Fix loading indicator inconsistency (#9252) 2018-11-10 15:04:13 +01:00
filters.js Keyword/phrase filtering (#7905) 2018-06-29 15:34:36 +02:00
height_cache.js Fix height cache (#4909) 2017-09-13 10:24:33 +02:00
identity_proofs.js squashed identity proof updates (#10375) 2019-03-28 18:01:09 +01:00
interactions.js Add bookmarks (#7107) 2019-11-13 23:02:10 +01:00
lists.js Implement adding a user to a list from their profile (#9062) 2018-11-05 18:52:38 +01:00
markers.js Add timeline read markers API (#11762) 2019-09-06 13:55:51 +02:00
modal.js Improve dropdown menu keyboard navigation (#11491) 2019-08-06 11:59:46 +02:00
mutes.js Store objects to IndexedDB (#6826) 2018-03-24 13:06:27 +01:00
notifications.js Add follow_request notification type (#12198) 2019-12-01 17:25:29 +01:00
onboarding.js Add new first-time tutorial (#9531) 2018-12-17 11:07:17 +01:00
pin_statuses.js Store objects to IndexedDB (#6826) 2018-03-24 13:06:27 +01:00
polls.js Fix poll options not rendering text after vote/refresh (#10189) 2019-03-06 05:35:52 +01:00
reports.js Federated reports (#6570) 2018-02-28 06:54:55 +01:00
search.js Add search results pagination to web UI (#11409) 2019-07-27 05:49:50 +02:00
settings.js Improve web api protect (#6343) 2018-04-17 15:23:46 +02:00
statuses.js Summary: fix slowness due to layout thrashing when reloading a large … (#12661) 2019-12-29 05:39:48 +01:00
store.js Store objects to IndexedDB (#6826) 2018-03-24 13:06:27 +01:00
streaming.js Fix public timelines being broken by new toots when they are not mounted (#10131) 2019-03-07 22:17:52 +01:00
suggestions.js Show suggested follows on search screen in mobile layout (#9010) 2018-10-23 00:08:39 +02:00
timelines.js Summary: fix slowness due to layout thrashing when reloading a large … (#12661) 2019-12-29 05:39:48 +01:00
trends.js Add trends UI with admin and user settings (#11502) 2019-08-06 17:57:52 +02:00