755395 - Tabs list should indicate which tabs are still loading

Status: RESOLVED INCOMPLETE

(Firefox for Android Graveyard :: General, defect, P2)

Description

[Wesley Johnston (:wesj)]

I often open a bunch of stories from nyt at once. Then I open the tabs list and start reading them. It would be nice if there was some visual indication there which stories had finished loading.

Tab thumbnail helps with this somewhat, but something more throbberish (although that's going away...) seems more clear and informative.

Comment 1

[Andrzej Hunt :ahunt]

Attachment: Standalone ProgessBar screenshot (current state of patch)

I've started working on this, I'm just not sure what the best way of displaying progress is though. Based on the discussion in bug 1066251 (the equivalent bug for the tab strip) I've decided to go with a simple progress bar for now. I think this looks OK, but it does take up additional vertical space. (Screenshot is attached.)

I've been thinking it might be worth instead painting the progress bar at the top of the thumbnail (i.e. similarly to how the progress bar is painted at the top of the current page when loading) - however this didn't look particularly nice when I painted a prototype.

Comment 2

[Andrzej Hunt :ahunt]

Attachment: Prototype of ProgressBar above thumbnail

Here's what having the ProgressBar as part of the thumbnail could look like. (I personally find this a lot harder to see / user.)

Comment 3

[Andrzej Hunt :ahunt]

Attachment: Preliminary patch - progressbar for loading status

(Also attached a draft patch in case anyone wants to have a look at the code)

Comment 5

[Sebastian Kaspari (:sebastian; :pocmo)]

That's cool! :)

NI-ing antlam for some UX feedback and mhaigh who is also working on the tabs tray (just so that you don't get in each others way)

Comment 6

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

Accidentally cleared my NI.

Comment 7

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

This seems like its going to be a more visible issue soon with features like "Send tab to device" and "Open in background/ Tab queues".

Knowing our concerns around adding animations here, I tried to use something we looked at for Search Activity. That is, utilizing grey box "placeholders" as a visual indicators of "something will be here soon". 

I've posted a mock here: https://invis.io/ZK4LU548P if you'd like to click through to see a rough idea of how I have this working in my head.

If we have time, I'd like to see if we can experiment with this. The idea here is that in the "spinning" state, we show the grey boxes, but fade in the title, tab preview, and 'x' icon as we get them. Yes, the user can still swipe to dismiss these before they're loaded.

Thoughts?

Comment 8

[:Margaret Leibovic]

(In reply to Anthony Lam (:antlam) from comment #7)
> This seems like its going to be a more visible issue soon with features like
> "Send tab to device" and "Open in background/ Tab queues".
> 
> Knowing our concerns around adding animations here, I tried to use something
> we looked at for Search Activity. That is, utilizing grey box "placeholders"
> as a visual indicators of "something will be here soon". 
> 
> I've posted a mock here: https://invis.io/ZK4LU548P if you'd like to click
> through to see a rough idea of how I have this working in my head.
> 
> If we have time, I'd like to see if we can experiment with this. The idea
> here is that in the "spinning" state, we show the grey boxes, but fade in
> the title, tab preview, and 'x' icon as we get them. Yes, the user can still
> swipe to dismiss these before they're loaded.
> 
> Thoughts?

I worry that this would be a lot of effort to implement, and I'm not sure it's worth it. Also, we at least know the URL that's going to load in a tab, and I think that's more useful than showing a title placeholder, in case the user wants to switch to that tab before it's done loading.

Comment 9

[Sebastian Kaspari (:sebastian; :pocmo)]

(In reply to Anthony Lam (:antlam) from comment #7)
> Thoughts?

I like that it is static and has no animation (performance). It's also not intrusive. Using the URL as title is definitely a good idea for selecting/swiping away before the tab is loaded. And to cement the idea of "This is a tab. It's just not ready".

Another option would be to play with a static throbber icon (no animation). It still transports the message of "loading" but maybe it looks like something is frozen.

Comment 10

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

(In reply to :Margaret Leibovic from comment #8)
> I worry that this would be a lot of effort to implement, and I'm not sure
> it's worth it. Also, we at least know the URL that's going to load in a tab,
> and I think that's more useful than showing a title placeholder, in case the
> user wants to switch to that tab before it's done loading.

Yes that's my plan too! My bad, I should've been more clear. 

If we have the Title, we can fade that in first. But the idea here is to have something in place ASAP. The rest can fade in as we get it. 

The problem I see now is two-fold:
1) There's no "loading" or "hey I'm working" indicator when a user is in the tabs tray, So, I often find myself sitting in the Tabs tray just waiting for my tabs to "crash in" abruptly.

2) There's no indicator on the individual tabs that they're "loading" or "not ready" once they do "crash in". So, they look as though they're frozen, or worse.

Comment 11

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

I recently came across a nice article about the successful use of these "skeleton screens" [1], I think it's still worth doing since we do come across this more often now with a feature like Tab queue in release.

[1] http://www.lukew.com/ff/entry.asp?1797

Comment 12

[Andrzej Hunt :ahunt]

Unassigning since I'm unlikely to get to this anytime or soon.

Comment 13

[Wesley Huang [:wesley_huang] (EPM) (NI me)]

Setting importance to P1 per inputs from Taipei UX folks

Comment 14

[BMO Automation]

We have completed our launch of our new Firefox on Android. The development of the new versions use GitHub for issue tracking. If the bug report still reproduces in a current version of [Firefox on Android nightly](https://play.google.com/store/apps/details?id=org.mozilla.fenix) an issue can be reported at the [Fenix GitHub project](https://github.com/mozilla-mobile/fenix/). If you want to discuss your report please use [Mozilla's chat](https://wiki.mozilla.org/Matrix#Connect_to_Matrix) server https://chat.mozilla.org and join the [#fenix](https://chat.mozilla.org/#/room/#fenix:mozilla.org) channel.