Projects::MergeRequestsController#show is slow (implement skeleton loading)

Resources

FE @psimyn

Description

https://performance.gitlab.net/dashboard/db/rails-controllers?var-action=Projects::MergeRequestsController%23show

Per https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/9546?lineprofiler=true, which is a large MR, we spend a lot of timing highlighting and truncating diff lines for use in discussions:

A lot of time is also in position comparisons, figuring out where we are, etc.:

We could speed this up quite a bit by not rendering the diffs at all on page load for a collapsed discussion, and then getting them async when we expand it (user clicks / anchor auto-expands discussion).

For the backend, we'd need to:

1. Have a way of getting just that diff (should be possible, based on the discussion ID).
2. Create an endpoint for the frontend to use.

For the frontend, we'd need:

1. Some UX to give us a loading state.
2. To call that endpoint provided by the backend when showing a collapsed discussion.\

Design

• Animate content jump when vertical height of actual content is not exactly the same as skeleton loading concept.
• Horizontal skeleton loading pulse animation