1151464 - Reading View needs a loading interstitial

Status: RESOLVED FIXED

(Firefox for iOS :: Reader View, defect)

Description

[Stefan Arentz | :st3fan | ⏰ EST | he/him]

When you add a page to the reading list via the share extension, we do not yet have have the readerized content for that page. So when you open it in Firefox, we curretnly show a 'TODO Needs loading interstitial' message while we grab the page in the background.

What we need here is some really basic (in-content) UI that shows a message like 'Loading page in Reading View' or something similar. We actually show this in HTML but we can still display an image or dynamic content there. We just don't have access to the iOS native controls.

Comment 2

[Darrin Henein [:darrin]]

We should maybe have a threshold before showing this, to avoid creating and flashing a new view for a half second when the connection is fast.

Comment 3

[Robin Andersen [:tecgirl]]

What's the expected range of lag before the list is loaded? I have a simple loading animation, but I'm concerned it wouldn't really be seen for long and it would be odd to see something for maybe half a second—not long enough to notice what it actually is and may cause confusion. My list shows up pretty fast (even on 4G) since it's not syncing with anything...it's local. I'm thinking maybe we just have a blank screen. Thoughts?

WIP: http://c.tecgirl.com/bXNy

Comment 4

[Richard Newman [:rnewman]]

Robin: this is about reader view, not the reading list. When it's a new item added from the share extension, we have to load the page from the network from scratch then readerize it, which can take anywhere from a few hundred milliseconds to a few seconds.

Comment 5

[Robin Andersen [:tecgirl]]

Doh! You'd think *I* wouldn't mix the two up, but—I did. 

Will update accordingly.

Comment 6

[Robin Andersen [:tecgirl]]

we're going with the native spinner for this interaction.

Comment 7

[Stefan Arentz | :st3fan | ⏰ EST | he/him]

Reopening this. We can't show a native spinner.

It is complicated :-/

This loading screen has to live in a web page. We can put a spinner in a web page though :-)

I'm taking this bug and turning it into a bug to implement this.

Comment 8

[Darrin Henein [:darrin]]

Animating a spinner with CSS is actually pretty simple. Happy to help if needed.

Comment 9

[Stefan Arentz | :st3fan | ⏰ EST | he/him]

Attachment: Screenshot 2015-07-14 14.04.02.png

Screenshots for localizers

Comment 10

[Stefan Arentz | :st3fan | ⏰ EST | he/him]

Attachment: PR: https://github.com/mozilla/firefox-ios/pull/733

Work in progress. Still needs an image / spinner. And maybe quick look at strings / terminology.

Comment 12

[Brian Nicholson (:bnicholson)]

Hey Darrin, is Stefan's screenshot along the lines of what UX wanted? Do you have mockups/assets you could share? We need to land this ASAP (preferably by this Friday) since this has string changes, and we're (hopefully!) about to go into string freeze.

If needed, we could pre-land an incomplete version of this with all of the strings if UX needs more time to polish the visuals.

Comment 13

[Darrin Henein [:darrin]]

The screenshot I see seems to be of an error/failed state, not a loading state (and the strings seem that way too). Is this supposed to show while we load the page, or when it fails for some reason? Robin, what was your plan here? 

Regardless, if we can't use the native spinner, I don't think we need one for now. Probably some simple language like "Loading content..." will suffice (if it's just during loading, this will *hopefully* be no longer than a few seconds in most cases).

Comment 14

[Brian Nicholson (:bnicholson)]

(In reply to Darrin Henein [:darrin] from comment #13)
> The screenshot I see seems to be of an error/failed state, not a loading
> state (and the strings seem that way too). Is this supposed to show while we
> load the page, or when it fails for some reason? Robin, what was your plan
> here? 

Yeah, this bug actually has two parts: show some kind of loading page while we wait, and show some kind of error page if we fail.

> Regardless, if we can't use the native spinner, I don't think we need one
> for now. Probably some simple language like "Loading content..." will
> suffice (if it's just during loading, this will *hopefully* be no longer
> than a few seconds in most cases).

OK -- that should be simple enough to throw together. Mostly just concerned about the strings we want to use at this point.

Comment 15

[Brian Nicholson (:bnicholson)]

Attachment: Link to Github pull-request: https://github.com/mozilla/firefox-ios/pull/805

Simple text-only loading/error page with a fade-in transition. Mostly concerned about strings right now as mentioned earlier since we're on the verge of a string freeze, but happy to address any UI polish, too.

Comment 16

[Robin Andersen [:tecgirl]]

Comment on attachment 8638833 [details] [review]
Link to Github pull-request: https://github.com/mozilla/firefox-ios/pull/805

Looks good. One nit: can we pull it up to anchor the top like the empty panels?

Comment 17

[Brian Nicholson (:bnicholson)]

Merged without vertical centering.

https://github.com/mozilla/firefox-ios/commit/99f2c601a5b706c7b9758d690f0ecc31e101c841