Pwa-studio: Remove Venia logo from loading state

[soumya-ashok]

It is not best practice to have brand elements associated with any potentially negative scenarios such as loading states that may or may not lead to a successful and quick page load.

The recommendation is to remove the logo from all loading states and to either use a generic icon or just plain text.

Scope:

• Replace existing Venia branded logo with provided asset (SVG or CSS icon)

PO would prefer something simple in this scope, something along the lines of: https://loading.io/spinner/rolling/-bar-circle-curve-round-rotate. Try to following existing branding for color selection, --venia-orange would be fine or --venia-grey-dark.
Nice to have:

• Research adding extension point to existing logo configuration

[sirugh]

Oh wow. Didn't know that!

Any suggestions for what these should look like now? Are you talking about the spinner?

[soumya-ashok]

@sirugh I recently learned this myself! Yes, I mean the spinner. We can keep just the text for now until we land on a more elegant solution. Would that work?

[supernova-at]

It'll work but "perceived performance" wants some sort of indication that _something_ is happening. A think a simple animation is better than static text in that regard.

[sirugh]

How about spinning text :D

[soumya-ashok]

@supernova-at Could we use the 3 blinking dots?
@sirugh :P

[zetlen]

@soumya-ashok Too bad about the spinner being a worst practice--it's very attractive.

This might be an opportunity to introduce the emerging best practice of page skeletons. There's a ready-made React component to implement it quickly. This could be an exploratory ticket for implementing a generic one...

[LucasCalazans]

Hey guys, I'm working on this.

Should I add the Skeleton or update the spinner?

[zetlen]

Why not try the skeleton? If it works and @soumya-ashok likes it, we'll go with it. Otherwise, we can go to a generic spinner. Thanks @LucasCalazans

[brendanfalkowski]

Requesting @soumya-ashok approval:

[soumya-ashok]

@zetlen @brendanfalkowski The page skeleton is what we have been wanting to do for loading state so if that's possible now, then let's try that for sure.

[dani97]

@LucasCalazans https://github.com/danilowoz/react-content-loader.
https://github.com/buildo/react-placeholder
I found these two libraries, you may have already chosen a better library, just check these two.

[larsroettig]

@awilcoxa is this still todo? then will take this

[awilcoxa]

@soumya-ashok can we find a new SVG to replace the logo, we'll keep the scope of this ticket small and specific to logo replacement and can create follow on ticket for page skeleton implementation.

examples of CSS loaders: https://loading.io/css

[koushikch7]

@soumya-ashok this alike would be better which is relative as well,
https://loading.io/spinner/shopping/-e-commerce-purchase-buy-shop-cart-pay-order

[tjwiebell]

@LucasCalazans - This scope has been reduced to just logo replacement, so I removed your assignment from several months back. If you're still interested in fulfilling the reduced scope, let us know, and you can jump on it once we get the new loading asset.

@soumya-ashok - If this requires some time investment and research, please just let us know, and we can plan accordingly.

[soumya-ashok]

@tjwiebell I'm fine with taking the simplest possible route now and using a standard spinner like in the link @awilcoxa above if we're just replacing the logo and not working on the first paint / loading experience in a more comprehensive way.