Page MenuHomePhabricator

Better article loading experience
Closed, ResolvedPublic

Description

Why are we doing this?

We need a way to show users that a page is loading

User story

As a user I want a response from the system when page loading is slow

Proposed design

This short term proposal is to utilize a similar design as was created on iOS: https://phabricator.wikimedia.org/T225545
If this feels too heavy we can simply utilize a loading bar underneath the header.

Design details

The outer ring trail and cluster of planets should circle around the larger planet


After choosing an article in the search results page, and while it is loading, we could use a nicer UI.

This is what is currently looks like:

Screen Shot 2019-12-16 at 14.10.50.png (580×480 px, 5 KB)

Event Timeline

Oof, yeah...let's add this to the list for early January?

@cmadeo can you tell where can we find the gif file for this planet? or should we use svg and rotate it?

@cmadeo can you provide either one?

  1. Complete GIF file including group-4 (moon), group-5 (earth), group-6 (galaxy)?

OR

  1. provide the group-4 (moon) having the same radius as earth, so it can be circle perfectly, otherwise It looks like below

chrome-capture.gif (377×384 px, 702 KB)
(click to see the gif)

no worry, I got it from iOS repo =)

@hueitan when the phone doesn't have an internet connection and we try to go to a new article, the gif shows and doesn't disappear.
Although this is not entirely bad, maybe in this case we should put a different message?

@hueitan when the phone doesn't have an internet connection and we try to go to a new article, the gif shows and doesn't disappear.
Although this is not entirely bad, maybe in this case we should put a different message?

Could we use the 'unable to load article' screen if there is no internet connection: https://phabricator.wikimedia.org/T236897

@hueitan when the phone doesn't have an internet connection and we try to go to a new article, the gif shows and doesn't disappear.
Although this is not entirely bad, maybe in this case we should put a different message?

Could we use the 'unable to load article' screen if there is no internet connection: https://phabricator.wikimedia.org/T236897

Sure, Close can go back to previous article page, so user can read the previous article without the internet connection.

@hueitan when the phone doesn't have an internet connection and we try to go to a new article, the gif shows and doesn't disappear.
Although this is not entirely bad, maybe in this case we should put a different message?

Could we use the 'unable to load article' screen if there is no internet connection: https://phabricator.wikimedia.org/T236897

Sure, Close can go back to previous article page, so user can read the previous article without the internet connection.

is this going to be fixed on this task or another one?

is this going to be fixed on this task or another one?

No, this task in only having the loading experience on article page when loading it.


@cmadeo note that the loading experience design still require from you side - Article Preview loading, Article Language list loading

@hueitan I'm not sure what ticket these would belong on but here are the loading states you requested:

Loading language listLoading page preview
11e - change language in article - loading languages.png (640×480 px, 41 KB)
10d - Link preview - Loading.png (640×480 px, 44 KB)
https://zpl.io/aR7rkzvnhttps://zpl.io/VQ7m3Qm

@hueitan @Jpita Please confirm that the loading language screen was implemented? I have seen the page preview one...

confirm implemented

the loading experience has a bit different than the above design, that's the discussion with design personally in chat.

let me know if you want to change the loading experience design.

No changes! Got to see it too :-) Thanks @hueitan