Message loading experience is a multi-step process and feels slow and not solid as a result

[jancborchardt]

This is how message loading looks right now:

The HTML message viewing experience is currently a 4-step process:

1. The envelope view goes blank first
2. A small row/envelope appears, with a loading spinner cutting through the bottom, looking broken
3. It extends to a container which looks of a more proper height, still with spinner
4. The mail content loads fully and expands (or if very little text, retracts) to full height

To improve this, could we do the following, or some of it?

1. Completely cut step 1 with the blank view. We do have the avatar and sender data from the message list, the rest is generic controls, so it could all be shown directly?
2. Skip this step with the small row/envelope → can we directly go to step 3 where the envelope has a reasonable default height?
3. Several things possible here:
   • Instead of a simple spinner, we can use a skeleton view here – just like we do for Talk conversations, which makes the experience feel much quicker than a generic spinner.
   • The height in this step (new default height) could be reduced a tad to be the exact height it would be if the message had no content (e.g. if only a subject), or only 1 line of text.
   • Sometimes in this step the read/unread state of the mail toggles (see animation, unbolding and bolding of sender name) and goes back again, making it look a bit off.
4. Have a very quick expand animation (100ms quick or so) to the full height once the content is fully loaded so that it looks less jarring.