Page MenuHomePhabricator

Show skeleton screen when feed is loading
Closed, ResolvedPublic3 Story Points

Description

Problem

On slow connections, users are seeing a blank feed screen while it's loading and given little indication of what content they expect to see.

Proposed solution

Showing the underlying UI as a skeleton screen soon as the Explore feed launches allows users to better anticipate what is occurring and provides a greater sense of speed and progress.

Notes on design:

  • Skeleton cards only for content that users have customized to appear on their feed.
  • Cards should animate in per T137514
  • Updated design should also work across all display modes (light, dark, black).

Open to see example animated gif:


Else see prototype here:
https://cdn.rawgit.com/reetssydney/prototypes/c8a28766/Wiki%20Android%20loading/index.html

Related:

T146395: Update app launch screen to current app branding
T137514: Feed cards should animate in

Event Timeline

Niedzielski raised the priority of this task from to Normal.
Niedzielski updated the task description. (Show Details)
Niedzielski added a subscriber: Niedzielski.
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJan 26 2016, 7:07 PM
Niedzielski updated the task description. (Show Details)Jan 27 2016, 8:15 PM
Niedzielski set Security to None.

@Niedzielski

  • This is for feed but is a very similar design to the top of articles.

    Niedzielski renamed this task from Content placeholders should be shown while we wait for the page to load to The Feed should show content placeholder cards while loading.Jun 10 2016, 2:13 AM

    Implementing this would probably also fix T140841: Fast flick down on explore feed causes it to temporarily get stuck loading previous day's results. It might be good to merge that task into this one.

    Niedzielski updated the task description. (Show Details)Sep 9 2016, 5:30 PM
    Niedzielski updated the task description. (Show Details)Sep 28 2016, 9:11 PM
    RHo renamed this task from The Feed should show content placeholder cards while loading to Show skeleton screen when feed is loading.Mar 1 2018, 2:50 PM
    RHo reopened this task as Open.
    RHo updated the task description. (Show Details)
    RHo renamed this task from Show skeleton screen when feed is loading to [HIGH] Show skeleton screen when feed is loading.Mar 2 2018, 1:42 PM
    RHo renamed this task from [HIGH] Show skeleton screen when feed is loading to Show skeleton screen when feed is loading.Mar 2 2018, 3:50 PM
    RHo raised the priority of this task from Normal to High.
    RHo updated the task description. (Show Details)Mar 6 2018, 5:44 PM
    RHo updated the task description. (Show Details)Mar 7 2018, 3:52 PM
    RHo updated the task description. (Show Details)Mar 7 2018, 4:54 PM
    RHo added subscribers: Dbrant, RHo.Mar 7 2018, 5:01 PM

    hi @Dbrant - just added some design notes on the implementation in the task description, and I'm hoping rather we can start work on this task by exploring effort involved in some of the different ways to this shimmer/skeleton loading effect could be introduced:

    Charlotte raised the priority of this task from High to Needs Triage.Mar 12 2018, 6:00 PM
    Charlotte set the point value for this task to 3.

    LGTM testing on Nexus 5 (6.0.1) on v2.7.231-alpha-2018-04-05

    Dbrant closed this task as Resolved.Apr 13 2018, 1:18 PM