Consider changing image upload placeholder

[dkonopka]

At this moment we are using svg as placeholder with plain text Uploading image... and progress bar animation. The problem is there is no way to translate this text, because it's hardcoded in the svg file.

We should think about something like centered spinner instead of plain text.

cc @oleq @Reinmar

[dkonopka]

I've made research and there is no perfect solution to change current placeholder. I was thinking about two possibilities:

1. Inline SVG animation

It is so simple and perfect solution to display inline SVG animations (SMIL), but sadly there is no Edge support 😠

2. CSS Animation

That was also a solution, but in our case where svg is transformed to base64 in img[src] we can't control it via CSS.

3. New element inside <figure>

I don't know if it is ok to create new element inside figure while uploading.

Proposal

Let's use animated SVG and create nice-looking first frame of loader (which will be displayed as static on Edge). Note: placeholder has grey background, it's about screencast quality and it's not final proposal, we just need to decide about loader.

Every browser (Chrome, Safari, FF)

...and Edge 😢

Question

If we'll decide to go with animated, centered loader, should we remove infinite progress bar for the user?

[oleq]

I don't know if it is ok to create new element inside figure while uploading.

I think that would be the easiest way because it allows CSS animations to create some beautiful placeholders. What about the engine side, though? cc @scofalik

[oskarwrobel]

I think that would be the easiest way because it allows CSS animations to create some beautiful placeholders. What about the engine side, though? cc @scofalik

We already do it to show upload progress bar or upload complete icon. ez.
See https://github.com/ckeditor/ckeditor5-engine/blob/master/src/view/uielement.js.

[oleq]

Let's switch to CSS then. You can create awesome animated stuff with it.

@dkonopka can you come up with the right, subtle style for us, maybe (?) together with some text (which will be localizable in that situation) and propose something?

[dkonopka]

So, you can find here proposals of loaders based on single div or span (except text container).
https://codepen.io/k0n0pka/full/KeKdbd/

By the way, exists a lot of beautiful CSS-only loaders, but based on plenty of spans, I'm not so sure about performance in that case.

WDYT guys, should we go with default "spinner" or choose something modern like moving balls?