Page MenuHomePhabricator

Standardize "Loading..." animation
Closed, DuplicatePublic

Description

To represent "Loading more topics..." Flow's <div class="flow-load-more"> rotates a gear icon:

.flow-loading {
    &:before {
            content: "\e018";
            font-family: 'WikiFont-Glyphs';
            animation: spin infinite 2s linear;

The gear icon in WikiFont-Glyphs appears much the same as the "Advanced" OOUI icon (see it on the demo page), oo-ui-iconElement-icon oo-ui-icon-advanced. But neither icon is called "loading", so Flow is borrowing unrelated semantics. I assume Flow intentionally doesn't use mw-spinner, feedback-spinner, or mw-spinner-small already in resources/src , perhaps because this is a heavier-weight operation than e.g. "Saving...". There were earlier proposals for Flow to use a pulsing ellipsis or an animating topics icon for "Loading more topics"

Someone Be Bold and write guidance in http://livingstyleguide.wmflabs.org/wiki/Progress_and_loading_indicators , it lacks any specifics or examples.

Event Timeline

Spage raised the priority of this task from to Medium.
Spage updated the task description. (Show Details)
Restricted Application added a subscriber: Aklapper. · View Herald Transcript

The loading indicator for Flow was not supposed to be a gear. It was just added by developers as a temporary placeholder. The ticket for fixing it (T76587) is still pending.

Details on the proposed indeterminate loading indicator are available here