Page MenuHomePhabricator

Immediately open template dialog and show progress bar
Open, Needs TriagePublic5 Estimated Story Points

Description

Background

Large templates and multi-part template content with many templates can take a very long time to load and in usability tests users thought that something was broken, clicking on the edit button many times.

This is the follow up to the investigation: T296386: Measure potential performance regression between the old and new VE template dialog sidebar

Requirements

  • Open dialog immediately after user clicks on edit or double clicks on an existing template
  • When content needs time to load, show the header and blank overlay with OOUI widget Progress bar (indeterminate). Determine loading time for which it makes sense to show loading bar to assure user that loading is in progress vs adding to visual noise (if loading happens quickly).
  • Replace overlay with template content when it's fully loaded.

Nice to have

  • The overlay is 90% opacity and shows the elements behind as they load

Mocks and specs

Progress bar is 70% width of the dialog and is centered in both directions
100% Opacity:

100% Opacity.png (900×918 px, 25 KB)

Specs:
Specs.png (900×918 px, 19 KB)

90% Opacity (Nice to have):
90% Opacity.png (900×918 px, 104 KB)

Event Timeline

The overlay is 90% opacity and shows the elements behind as they load

@ECohen_WMDE, note this probably can't happen because of the way the code is structured. The dialog's content is created in the background and only added when it's all done (a best practice exactly for performance reasons). The same moment the progress bar is removed. There is no time to see that overlay effect.

But I might be wrong about this. We will see.

A much bigger concern is that we can't really estimate how long it will take. I mean, we can try, but this is pretty much guaranteed to cause frustration on both the dev's as well as user's side. Progress bars just don't work. Can we please use a spinner instead of a progress bar? Maybe with a piece of text that says something like "Loading part 1 of 200…" when it's a multi-part template?

Another reason I bring this up is because this can only be a band-aid. What we really need to do is to fix these unacceptable loading times. Still some kind of loading spinner is useful. But I would not invest to much time into this.

note this probably can't happen because of the way the code is structured. The dialog's content is created in the background and only added when it's all done (a best practice exactly for performance reasons). The same moment the progress bar is removed. There is no time to see that overlay effect.

Good to know. I wasn't sure about this, which is why I put it as a nice to have. It's not possible, that's 100% fine. I think the rest will already be a big improvement. Feel free to remove from the task description if it doesn't make sense there.

A much bigger concern is that we can't really estimate how long it will take. I mean, we can try, but this is pretty much guaranteed to cause frustration on both the dev's as well as user's side. Progress bars just don't work. Can we please use a spinner instead of a progress bar? Maybe with a piece of text that says something like "Loading part 1 of 200…" when it's a multi-part template?

I don't think it's necessary to show how much is done/how much more there is to load. I think what matters is that it is shown that something is happening. This is why I specified the Progress bar (indeterminate) widget. If you look at the demo page, you'll see that it's essentially the same as a spinner.

Oh, I missed that. Sorry. Yes, that's a spinner.

I got confused because of the following sentence: "Determine loading time for which it makes sense to show loading bar to assure user that loading is in progress vs adding to visual noise (if loading happens quickly)." That should be something like 500ms, in my experience.

Ah makes sense! That sentence is because Lena and I were discussing if it would be weird to see the progress bar for so short a time it is essentially a flicker and wanted to avoid that situation. 500ms sounds good to me.

thiemowmde set the point value for this task to 5.Wed, Dec 1, 2:23 PM

Change 743218 had a related patch set uploaded (by WMDE-Fisch; author: WMDE-Fisch):

[mediawiki/extensions/VisualEditor@master] [WIP] Progressbar for loading the template dialog

https://gerrit.wikimedia.org/r/743218