* 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
* Fix weird scroll-jumping behavior with pending items
* Treat pending items as unread items
* Fix scroll position being altered because of the “X new items” button
The `hasMore` property of timelines in redux store was set whenever an API
request returned only one page of results, *even* if the query only requested
newer statuses (using `since_id`), causing `hasMore` to be incorrectly set to
false whenever fetching new toots in a timeline, which happens each time
an account's timeline or media gallery is visited.
* Nascent tag menu on frontend
* Hook up frontend to search
* Tag intersection backend first pass
* Update yarnlock
* WIP
* Fix for tags not searching correctly
* Make radio buttons function
* Simplify radio buttons with modeOption
* Better naming
* Rearrange options
* Add all/any/none functionality on backend
* Small PR cleanup
* Move to service from scope
* Small cleanup, add proper service tests
* Don't use send with user input :D
* Set appropriate column header
* Handle auto updating timeline
* Fix up toggle function
* Use tag value correctly
* A bit more correct to use 'self' rather than 'all' in status scope
* Fix some style issues
* Fix more code style issues
* Style select dropdown more better
* Only use to_id'ed value to ensure no SQL injection
* Revamp frontend to allow for multiple selects
* Update backend / col header to account for more flexible tagging
* Update brakeman ignore
* Codeclimate suggestions
* Fix presenter tag_url
* Implement initial PR feedback
* Handle additional tag streaming
* CodeClimate tweak
* Fix regeneration marker not being removed after completion
* Return HTTP 206 from /api/v1/timelines/home if regeneration in progress
Prioritize RegenerationWorker by putting it into default queue
* Display loading indicator and poll home timeline while it regenerates
* Add graphic to regeneration message
* Make "not found" indicator consistent with home regeneration
Do NOT send "delete" through streaming API when unmerging from
home timeline. "delete" implies that the original status was
deleted, which is not true!
* Move ancestors/descendants out of timelines reducer
* Refactor timelines reducer
All types of timelines now have a flat structure and use the same
reducer functions and actions
* Reintroduce some missing behaviours
* Fix wrong import in reports
* Fix includes typo
* Fix issue related to "next" pagination in timelines and notifications
* Fix bug with timeline's initial state, expandNotifications
because it may causes flicker on the conversation when it contains blocked/muted user's status.
We use `/api/v1/statuses/{id}/context` to obtain status ids in the
conversation which filters blocked/muted user, but also uses internal
cache constructed from `in_reply_to_id` by `normalizeStatus()` in
`reducers/timelines.js` on each status loading which doesn't filter.
So statuses appears in conversation if those are cached, even those
statuses are from blocked/muted user. Then context cache will be updated
with the result of the context API and those statuses will be removed.
I have left the `normalizeStatus()` function itself which is called many
functions in the file as a placeholder for now, but maybe it should be
removed completely.
This will reduce requests on who have only few statuses.
- Use next link header to detect more items from first request
- Omit next link header if result items are fewer than requested count
(It had omit it only if result was empty before)
* Add load more button for large screens
* Fix `next` state value on the first loading
* Don't load if `isLoading || !hasMore`
* Start load on near the bottom
* Replace browserify with webpack
* Add react-intl-translations-manager
* Do not minify in development, add offline-plugin for ServiceWorker background cache updates
* Adjust tests and dependencies
* Fix production deployments
* Fix tests
* More optimizations
* Improve travis cache for npm stuff
* Re-run travis
* Add back support for custom.scss as before
* Remove offline-plugin and babili
* Fix issue with Immutable.List().unshift(...values) not working as expected
* Make travis load schema instead of running all migrations in sequence
* Fix missing React import in WarningContainer. Optimize rendering performance by using ImmutablePureComponent instead of
React.PureComponent. ImmutablePureComponent uses Immutable.is() to compare props. Replace dynamic callback bindings in
<UI />
* Add react definitions to places that use JSX
* Add Procfile.dev for running rails, webpack and streaming API at the same time
2017-05-03 02:04:16 +02:00
Renamed from app/assets/javascripts/components/reducers/timelines.jsx (Browse further)
