OFFLINE: Gravatar fallback for offline

[artpi]

We always load gravatars from CDN and they are not cached for some reason
Also, gravatar does not support CORS so any caching attempts with serviceWorkers have failed.

This is the most straightforward approach to add a gravatar fallback for both APP and WEB.

I'm just hooking into onError event.

@rralian @mtias @johngodley @gziolo

[rralian]

need a leading slash here.

[artpi]

done

[rralian]

So, this is kinda funny, but the intent is to provide a fallback while offline, right? Except... that fallback image is not available offline... at least not in the browser (I believe it would be in the desktop editor). Could we instead provide the fallback via data URI?

[artpi]

that fallback image is not available offline

I was mostly targeting app and broken whole gravatar infrastructure.
I will do that, although if '/calypso' dir does not work we have bigger problems to worry about

[mtias]

@mattmiklic should we take this chance to revisit the default avatar we show in Calypso if we are serving an image ourselves? At least maybe we could adjust the neutral grey?

[mattmiklic]

Yes! I just put together a new default gravatar image for the iOS app, using the user Gridicon. I'll export a version for Calypso.

[mattmiklic]

Here's a direct export in SVG format. If it needs to be resized or in a different format or anything, let me know. (Zipped because GitHub doesn't allow SVGs in comments)

default-gravatar.svg.zip

[folletto]

I'd note that offline we can just drop the avatar and leave just the icon, since that's already a normal behaviour on native apps (showing only the icon). I feel would be a better choice for the masterbar. :)

In other instances of the gravatar tho, we can use a custom offline gravatar alternative. :)

In terms of masterbar specific behaviour it should show the Me icon until an images is loaded, and show it only once it gets loaded. :)

[artpi]

Currently we are showing blinking placeholder unil icon is loaded.
Thanks @mattmiklic, its SVG so I guess we can throw it inline, that will solve @rralian 's concerns beautifully!

[mattmiklic]

I'd note that offline we can just drop the avatar and leave just the icon, since that's already a normal behaviour on native apps (showing only the icon). I feel would be a better choice for the masterbar. :)

Definitely, if the gravatar in the Me link in the masterbar fell back to gridicons-user-circle when the user doesn't have a gravatar, that'd be the best-looking option.

[artpi]

Definitely, if the gravatar in the Me link in the masterbar fell back to gridicons-user-circle when the user doesn't have a gravatar, that'd be the best-looking option.

@mtias , @adambbecker , do you agree? You were unhappy with the design of this icon

[adambbecker]

@artpi: 👍

[artpi]

Now offline gravatar looks like this:

I think this is the cleanest approach, addresses @rralian , @mattmiklic , @folletto 's and @mtias 's concerns ( I hope )

[folletto]

For me that's ideal. 👍

[mattmiklic]

Now offline gravatar looks like this:

Is that gridicons-user-circle? The outside border looks too thick compared to the standard gridicon to me (mocked up for comparison):

[artpi]

I actually didnt touch it :) It was introduced somewhere else
The border looks thick but I would vote for changing it in a different PR

It was there before:

[mattmiklic]

Is it because a border is being drawn around the gravatar image in CSS, maybe?

[mtias]

You were unhappy with the design of this icon

@artpi I don't remember this :)

Is it because a border is being drawn around the gravatar image in CSS, maybe?

Indeed. We should remove it.

[artpi]

@artpi I don't remember this :)

My bad :)

[mtias]

👍