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

Assigned To

Authored By

	• Niedzielski
	Jan 26 2016, 7:07 PM

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

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

Related Objects
Search...

		Status	Subtype	Assigned	Task
		Resolved		Dbrant	T124811 Show skeleton screen when feed is loading
		Resolved		Dbrant	T137514 Feed cards should animate in

Event Timeline

• Niedzielski created this task.Jan 26 2016, 7:07 PM

• Niedzielski raised the priority of this task from to Medium.

• Niedzielski updated the task description. (Show Details)

• Niedzielski added a project: Wikipedia-Android-App-Backlog.

• Niedzielski subscribed.

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJan 26 2016, 7:07 PM

Dbrant moved this task from Needs Triage to Product Backlog on the Wikipedia-Android-App-Backlog board.Jan 27 2016, 8:10 PM

• Niedzielski updated the task description. (Show Details)Jan 27 2016, 8:15 PM

• Niedzielski set Security to None.

@Niedzielski

M130 iOS feed loading

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

MBinder_WMF added a project: Android-app-feature-Feeds.Jul 22 2016, 6:17 PM

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

Related: T146395

RHo closed this task as a duplicate of T146395: Update app launch screen to current app branding.Nov 14 2017, 7:07 PM

Dbrant mentioned this in T146395: Update app launch screen to current app branding.Feb 27 2018, 2:29 AM

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 added a project: Android Design.

RHo moved this task from Product Backlog to UX Debt Backlog on the Wikipedia-Android-App-Backlog board.

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 Medium to High.

RHo mentioned this in T150462: [Navigation] Article tabs should show specific number of tabs open even when >9.Mar 6 2018, 12:31 AM

RHo updated the task description. (Show Details)Mar 6 2018, 5:44 PM

RHo added a subtask: T137514: Feed cards should animate in.Mar 7 2018, 1:15 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

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.

• Charlotte moved this task from UX Debt Backlog to Android-app-release-v2.7.24x-H-Hot-pepper on the Wikipedia-Android-App-Backlog board.

• Charlotte edited projects, added Wikipedia-Android-App-Backlog (Android-app-release-v2.7.24x-H-Hot-pepper); removed Wikipedia-Android-App-Backlog.

Restricted Application edited projects, added Wikipedia-Android-App-Backlog; removed Wikipedia-Android-App-Backlog (Android-app-release-v2.7.24x-H-Hot-pepper). · View Herald TranscriptMar 12 2018, 6:00 PM

• Charlotte moved this task from Needs Triage to Android-app-release-v2.7.24x-H-Hot-pepper on the Wikipedia-Android-App-Backlog board.Mar 12 2018, 6:28 PM

• Charlotte edited projects, added Wikipedia-Android-App-Backlog (Android-app-release-v2.7.24x-H-Hot-pepper); removed Wikipedia-Android-App-Backlog.

Dbrant claimed this task.Mar 13 2018, 3:12 PM

Dbrant moved this task from Backlog to Design signoff on the Wikipedia-Android-App-Backlog (Android-app-release-v2.7.24x-H-Hot-pepper) board.

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

Dbrant closed subtask T137514: Feed cards should animate in as Resolved.Apr 13 2018, 1:21 PM

• Niedzielski mentioned this in T254695: Build a pre-library loading indicator for Vue.js search.Jun 7 2020, 5:34 PM

	F8212312: Android loading animation.mov.gif
	Mar 1 2018, 2:50 PM

	F4451438: screenshot-2016-09-09-11-29-47-883292246.png
	Sep 9 2016, 5:30 PM

	F3283615: Screenshot_20160126-104507.png
	Jan 26 2016, 7:07 PM

	F3283610: Screenshot_20160126-105532.png
	Jan 26 2016, 7:07 PM

	F3283611: Screenshot_20160126-105542.png
	Jan 26 2016, 7:07 PM

Show skeleton screen when feed is loadingClosed, ResolvedPublic3 Estimated Story PointsActions