1378746 - [meta] Provide and populate a skeleton screen for each tool's startup

Status: RESOLVED WONTFIX

(DevTools :: General, enhancement, P2)

Description

[Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe]]

The following video clearly illustrates the use of skeleton screens: https://www.youtube.com/watch?v=Rehw8L5Cl8M

Filter on EdgarMallory

Comment 1

[Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe]]

All Tools

  - Going white -> grey -> dark grey -> white -> dark grey is bad and should be fixed before we add the skeleton:
    34ms  Toolbox Loads (blank white) with black top border
    100ms Toolbox turns grey
    400ms Toolbox goes darker and the main toolbar appears
    433ms Toolbar icons and buttons appear
    500ms Panel main area turns white.
    ...
    ???ms Back to dark grey

Comment 2

[Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe]]

Attachment: A skeleton screen used for add-ons

It's possible to create skeleton screens using only CSS background properties and color gradients that simulate solids. The shimmer animation can be a regular CSS animation that moves one of the background layers, which is a color gradient with white in the middle, over the other layers.

As a bonus, you can use :empty pseudo-class selector so that the skeleton screen backgrounds only applies while the DOM element is empty, for example while fetching data to inject.

Here's an example:
http://codepen.io/oslego/pen/XdvWmd

This method does not require mutating the DOM with placeholder elements, therefore it keeps the code cleaner.

Comment 3

[Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe]]

Attachment: compare-skeleton-loading-screens.gif

A skeleton screen done well is great in that the user doesn't realize there was a skeleton... they just think the page loads instantly.

Comment 4

[Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe]]

Here is a codepen that has an example using empty:
http://linkis.com/codepen.io/oslego/pe/5dSlG

Obviously, each section should be able to contain :empty so the skeleton can be progressively populated but it is a good starting point.

Comment 5

[Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe]]

There is also a way to do this with React components:
http://www.callumhart.com/blog/building-interface-previews-with-react

Comment 6

[Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe]]

Facebook's markup:
https://codepen.io/devinmcinnis/pen/jbZQZX

Comment 7

[Patrick Brosset <:pbro>]

This bug has not been updated in the last 6 months. Resetting the assignee field.
Please, feel free to pick it up again and add a comment outlining your plans for it if you do still intend to work on it.
This is just trying to clean our backlog of bugs and make bugs available for people.

Comment 8

[BugBot [:suhaib / :marco/ :calixte]]

The meta keyword is there, the bug doesn't depend on other bugs and there is no activity for 12 months.
:pbro, maybe it's time to close this bug?

Comment 9

[Patrick Brosset <:pbro>]

Fair to say that we're not going to be working on this now. This is, in theory, a good idea but there are no concrete plans to implement a solution for this right now. We can always re-open the bug later.