When translating templates (T139332), some templates are complex and it takes time to render their information. These delays are long enough to break the fluency of interaction for the user.

This ticket is intended to provide detail on how to present the loading of template information in the following contexts:

• First time a template is added to the translation.
• When a template gets updated after editing it.
• When template fields are rendered as rich text.

Proposed solution

First time a template is added to the translation.
Similar to what happens with regular paragraphs or images, the standard loading indicator ("three dots") can be shown as a placeholder until the content is available:

When a template gets updated after editing it.

When users finish editing a template and they exit the editing mode the expectation is to view the updated template. If the rendered template is not available immediately we want to (a) keep the template presentation (to avoid giving the impression that the template is completely gone) but (b) indicate that it is loading (to avoid giving the impression that the changes had no effect). In order to achieve that, we can keep the template disabled (e.g., reducing opacity to 25%) until it gets updated. For block templates where there is enough room, we can also show the loading indicator on top of it for extra clarity. In this way we communicate that the template is being updated.

When template fields are rendered as rich text.

When users edit a template, the expectation is for content to be presented in rich text. Since content needs to be rendered from wikitext into rich text, it will take some time to render especially for templates with lots of parameters. We want to provide the information as soon as possible, so we should not delay the presentation of information until the rendering is complete. The proposed approach is to try reducing the chances of loading to be exposed to the user and show loading indicators on a per field basis.

We want to optimise the rendering to improve the perceived performance by (a) consider preloading some information in advance, and (b) adjust the order of loading so that items that are more likely to be in the user viewport load first.

That should reduce the likelihood of users to wait for fields to load. However, it may still be possible for users to view a field that has not been rendered yet. For those cases, keeping the fields disabled (non-editable and text in lighter grey) and showing a loading indicator in the bottom-right corner will indicate that a given piece of information is not ready to be edited yet.