Page MenuHomePhabricator

Load the cards skeleton and then load the content.
Closed, InvalidPublic

Description

User Story
As a user, i do not want a abrupt experience when i scroll to the bottom of the page.

Problem
Related pages being inserted after they have been fetched causes a slight jerk when reader scrolls to the bottom of the page

Solution
Reserve the space for related pages IF related pages exist for this particular article. the space will denote and manage expectation of users of the asyncronous content. this will improve the perceived performance and

Prototype
Wait for 1second and the related pages will load
https://dl.dropboxusercontent.com/spa/tuyaic6q75gkcv4/Exports/related-pages-skeleton/related-pages-skeleton.html

Mocks
While loading

After loading

Zeplin Spec
https://zpl.io/Z1fYDWi

Event Timeline

Nirzar claimed this task.
Nirzar raised the priority of this task from to Needs Triage.
Nirzar updated the task description. (Show Details)

We are purposely limiting the amount of HTML we serve to users so we'd have to think about this carefully. It might be okay on desktop but probably not mobile. How much of the jerkiness is down to slowness of the API query?

How would this proposed change work for non-JS users?

What if the API doesn't return any related articles? We'd have to remove HTML then. How about adding a spinner instead?

We are purposely limiting the amount of HTML we serve to users so we'd have to think about this carefully. It might be okay on desktop but probably not mobile. How much of the jerkiness is down to slowness of the API query?

@Jdlrobson the size of html for this is ~800 bytes and with compression it will be even lesser. on a 2g connection it would take additional 0.1 second to load this upfront which i think is okay.

How would this proposed change work for non-JS users?

This is for a better experience and not something that stops users from doing something. we should be okay if this does not work on non-JS users.

Jdlrobson triaged this task as Medium priority.Dec 28 2015, 6:13 PM

I'm with Baha on this; I think a spinner is a better idea.

okay.. i think that's a valid comment. let me re-describe the task to say "remove the jerky insertion of html"

Jhernandez added a subscriber: Jhernandez.

I think this is a great idea to fix T135044 and we can add this with javascript if the feature is enabled when the page loads, no need to ship it from the backend.

Are there any cons of adding the skeleton on page load?

Jdlrobson lowered the priority of this task from Medium to Low.May 19 2016, 5:12 PM
Jdlrobson added a project: Readers-Web-Backlog.
dr0ptp4kt raised the priority of this task from Low to High.Aug 18 2016, 6:09 PM

We have to figure out if the related pages exist for current page before loading them? is that possible? because we also want to avoid the case where the related pages don't exist and the skeleton disappears instead of populating the content

We have to figure out if the related pages exist for current page before loading them? is that possible? because we also want to avoid the case where the related pages don't exist and the skeleton disappears instead of populating the content

It will most likely receive the same treatment as the page action bar, so yes, we can figure out if Related Pages exists beforehand.

Nirzar updated the task description. (Show Details)

@jhobs that sounds great!

If I remember correctly, we won't retrieve related pages until after the user has scrolled past half of the page. We did it because we didn't want to hit the API unnecessarily. We need to investigate whether we really want to figure out whether a page has related pages on each page load. Will we overload the API?

That's a good point. there are two parts "knowing related pages is there or not" and "the actual content of related pages"

I'm guessing our api is not sophisticated to get these two things separately? if not we will have to find an alternative.

Knowing how many related pages are available is also important in this case.

Isn't that constant? 3. haven't seen any articles with only 1 related page

I don't think it's constant. Take a look at https://en.wikipedia.org/wiki/Jondor. We show at most 3 though.

wow. okay. i think this is very small case. correct me if i'm wrong in this assumption. but a little jerk in this case is okay. so we would show a skeleton with 3 articles and then after the api call it will show only one article. it's still better than 1 article getting inserted.

this ticket will solve most cases and the problem with the edge case will persist if not getting a little better.

dr0ptp4kt added a subscriber: dr0ptp4kt.

Untagging from sprint for the time being, the thinking being that the other tasks that speed up the API and more pre-emptively fetch will largely address the symptoms.

dr0ptp4kt lowered the priority of this task from High to Low.Aug 24 2016, 4:48 PM
Nirzar changed the task status from Open to Stalled.Sep 8 2016, 6:51 PM

Stalled for now. We will close this if T144822 will resolve the issue.

ovasileva raised the priority of this task from Low to High.Sep 8 2016, 6:52 PM
jhobs changed the task status from Open to Stalled.Sep 9 2016, 3:38 PM

It looks like the change back from Stalled to Open may have been an accident, given T122212#2620370.

@jhobs it happened co incidentally while there was a grooming session and me not being there. decided to keep it open after the discussion. should have added a comment.

Nirzar changed the task status from Stalled to Open.Sep 9 2016, 3:46 PM

@Nirzar - I think we should close this. Thoughts?

Ping @Nirzar - please also resolve the epic task T135044 too

@ovasileva yeah i guess so. the threshold solves the problem for now. we can reopen if it's absolutely necessary.

I agree - resolving both for now, we can get back to them later if necessary.