New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add guidance for a loading state to the Card View #467

Closed
serenamarie125 opened this Issue Oct 26, 2017 · 9 comments

Comments

Projects
None yet
3 participants
@serenamarie125
Member

serenamarie125 commented Oct 26, 2017

This is an enhancement to an existing pattern to add a loading state note to the card view.

When there are performance issues, users have to wait for the view to load. We should give guidance around using a loading state ( which would likely be a Large Spinner control with the "Loading" text below it).

Note that on the design page of this pattern, we are already giving guidance around if the view is empty http://www.patternfly.org/pattern-library/content-views/card-view/#/design.

@mcarrano @maryclarke @catrobson do you support this suggestion?

Associated Issues:
#468
#469

@serenamarie125 serenamarie125 self-assigned this Oct 26, 2017

@mcarrano mcarrano added this to New / Needs Info in PatternFly Contributions Oct 26, 2017

@mcarrano mcarrano moved this from New / Needs Info to Accepted-In Progress in PatternFly Contributions Oct 26, 2017

@mcarrano mcarrano moved this from Detailed Design & Document to Accepted-ToDo/Backlog in PatternFly Contributions Dec 15, 2017

@serenamarie125

This comment has been minimized.

Member

serenamarie125 commented Feb 13, 2018

@mcarrano the proposed design is to use the same solutions we give for the base card. Display a Large Spinner control with the "Loading" text below it. Loading would be the default text ( with no ellipses ), but should be customizable from an implementation perspective.

Note that this suggestion is consistent with the loading state of the card shown here: http://www.patternfly.org/pattern-library/cards/base-card/#design

@serenamarie125

This comment has been minimized.

Member

serenamarie125 commented Feb 14, 2018

pageloading
FYI - here are some examples of how inconsistent we are between products and within products now
screen shot 2018-02-14 at 7 52 30 am
screen shot 2018-02-14 at 7 52 49 am
screen shot 2018-02-14 at 7 52 25 am
screen shot 2018-02-14 at 7 48 39 am 2

@terezanovotna terezanovotna self-assigned this Feb 14, 2018

@mcarrano

This comment has been minimized.

Member

mcarrano commented Feb 14, 2018

I think one of the questions might be whether the toolbar controls appear while the view is loaded and what state they are in, i.e. everything disabled?

@serenamarie125

This comment has been minimized.

Member

serenamarie125 commented Feb 14, 2018

Good point @mcarrano
IMO, the toolbar should be displayed
I'm not sure if things should be disabled, as if someone wants to change the filter criteria during load time, I'd imagine they should be able to ...

@mcarrano mcarrano moved this from Accepted-ToDo/Backlog to Discovery & Concept Design in PatternFly Contributions Feb 14, 2018

@mcarrano mcarrano removed the Help Wanted label Feb 14, 2018

@terezanovotna

This comment has been minimized.

Contributor

terezanovotna commented Feb 16, 2018

@terezanovotna

This comment has been minimized.

Contributor

terezanovotna commented Feb 16, 2018

@serenamarie125 had a great comment that Load state is a very similar pattern as Empty state.

Can we remove Loading from [Cards - > Base Card], and add it to [Communication -> Loading State]?

Loading state
description of loading state
loading-state-html

The loading state pattern is most often used in conjunction with one of the content views (e.g. List View, Table View, and Card View).

card-view-load

Spinner Size
If spinner is <h1> then text “Loading” is <h1> as well.

@terezanovotna

This comment has been minimized.

Contributor

terezanovotna commented Feb 16, 2018

This makes it straightforward and we don't need to specify visuals for all List, Table and Card View.

@serenamarie125 @mcarrano Thoughts?

@mcarrano

This comment has been minimized.

Member

mcarrano commented Feb 16, 2018

I like this idea, @terezanovotna . Always looking for opportunities to not duplicate materials. If we do that, we should include examples of what this would look like in a card vs. a table or list.

@serenamarie125 @LHinson what do you think?

@terezanovotna

This comment has been minimized.

Contributor

terezanovotna commented Feb 20, 2018

@mcarrano please review this doc, thanks!

@terezanovotna terezanovotna referenced this issue Feb 21, 2018

Merged

Adding new loading pattern #574

6 of 6 tasks complete

@mcarrano mcarrano removed this from Discovery & Concept Design in PatternFly Contributions Feb 22, 2018

@terezanovotna terezanovotna reopened this Feb 27, 2018

@mcarrano mcarrano closed this in #584 Mar 8, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment