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:

Event Timeline

SBisson created this task.Dec 16 2019, 7:13 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptDec 16 2019, 7:13 PM
cmadeo added a subscriber: cmadeo.Dec 17 2019, 8:30 PM

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

cmadeo updated the task description. (Show Details)Dec 19 2019, 9:09 PM
hueitan added a subscriber: hueitan.EditedDec 22 2019, 3:30 PM

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

hueitan claimed this task.Jan 3 2020, 10:14 AM
hueitan moved this task from Ready for Dev to Dev on the Inuka-Team (Kanban) board.
hueitan added a comment.EditedJan 5 2020, 11:31 PM

@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

(click to see the gif)

no worry, I got it from iOS repo =)

hueitan moved this task from Dev to Code Review on the Inuka-Team (Kanban) board.Jan 6 2020, 10:34 AM
SBisson moved this task from Code Review to QA on the Inuka-Team (Kanban) board.Jan 7 2020, 7:21 PM
Jpita added a subscriber: Jpita.Jan 10 2020, 6:18 PM

@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.

Okay, sounds good!

@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
https://zpl.io/aR7rkzvnhttps://zpl.io/VQ7m3Qm
AMuigai added a subscriber: AMuigai.EditedFeb 6 2020, 11:17 AM

@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

AMuigai closed this task as Resolved.Feb 6 2020, 8:32 PM
AMuigai moved this task from Backlog to MVP on the KaiOS-Wikipedia-app board.Fri, Mar 27, 12:58 PM
AMuigai edited projects, added KaiOS-Wikipedia-app (MVP); removed KaiOS-Wikipedia-app.