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.

[ChristophWurst]

Break down of current HTML loading order

Thread loading

Message loading

IFrame loading

Finished loading

[ChristophWurst]

Preliminary todo

1. Fix the thread login screen
   • Center the icon (empty content component?)
   • Add a text
2. Remove the loading thread(emptycontent) as a first step and show the subject/recipient and envelope header directly instead if we have the data Show thread subject while loading thread messages #7607
3. Fix the message loading screen
   • Add minimum height to element so the spinner looks less broken. This should be less than an action message the min-height should be around 500px so when a message has a small body should be shown directly without any jumps/animations Improve thread message loading screen #7609
     After the loading finished, animate that the element grows to the actual message size (especially text messages) Add animation for loading mail content #7615 (we will animate the whole container now, see Add skeleton loading thread messages #7472)
   • Possibly animate the frame too Add skeleton loading thread messages #7472
   • Because of the min-height, the threads will have a lot of space between each other, that should look like before, so the next thread start directly after the envelope header. Improve thread message loading screen #7609
4. Fix the iframe loading screen
   • Either Make HTML body loading a single step experience #7612
     • Load the iframe with v-show=false and show a loading icon while the body loads
     • Remove the loading icon
   • Single/current message can be collapsed in thread view #7214
   • Increase the clickable area, it should be the whole envelope header height Increase the clickable area on envelope thread #7613
5. Add a skeleton view for inner loading view of a thread Add skeleton loading thread messages #7472
6. Add a skeleton for the outer loading view of a thread Add skeleton loading thread messages #7472

[ChristophWurst]

4. Remove the loading thread(emptycontent) as a first step and show the subject/recipient and envelope header directly instead

This is not always possible. If we have no info about the thread but its ID then we have to show some sort of general loading screen. If we have at least one message we can guess the thread subject. The former happen when you load a thread on page load. The latter happens when you open a thread from the loaded envelope list.

#7607 improves those two code paths.

[ChristophWurst]

@GretaD close?

[GretaD]

yeesssss