Added CSS upload loader

[oskarwrobel]

Suggested merge commit message (convention)

Feature: Added CSS upload loader. Closes ckeditor/ckeditor5#5150.

---

Additional information

Required ckeditor5-theme-lark/t/ckeditor5-image/207

Hardcoded text Uploading image... has been replaced by a nice looking CSS spinner.

SVG file is still used as an image source while the upload is in progress because:

1. image can't have an empty source
2. svg file sets the size of the image and this size is scalable (e.g. when switching image to side image)

Preview

[coveralls]

Coverage remained the same at 100.0% when pulling 308c834 on t/207 into 30ea1c6 on master.

[oskarwrobel]

@dkonopka

https://github.com/ckeditor/ckeditor5-image/pull/219/files#diff-1dd60618d87727a52cc7ebc65fbaa2eeR26

[oleq]

Styles like width, height, belong to Lark. position, top, content, flex should stay here.

[oleq]

BTW, why do we need that SVG? It's displaying a gray area, that's what it does? Couldn't we use a CSS element instead?

[oskarwrobel]

SVG file is still used as an image source while the upload is in progress because:

1. image can't have an empty source
2. svg file sets the size of the image and this size is scalable (e.g. when switching image to side image)

[oleq]

I can see 2 scenarios:

1. I upload the image
   • the horizontal bar on the top is displaying the progress,
   • I can see the image immediately so there's no need to display the spinner
2. Someone else is uploading
   • the horizontal bar on the top is moving,
   • I can see the spinner until the actual image comes from the server

The first scenario looks great:

But the later looks as follows

and I find this double indicator an overkill. Too much movement, pure redundancy. Let's stick to the spinner in that situation, WDYT?

cc @dkonopka @oskarwrobel @pjasiun

[dkonopka]

☝️ Good catch!

"Infinite progress top bar" should be removed if someone else is uploading image, I just completely forgot to get rid of it.

[pjasiun]

I also did notice it and agree that 2 "spinners" (center and top) is redundancy. But it is not a big issue for me.

[oskarwrobel]

I upload the image

• the horizontal bar on the top is displaying the progress,
• I can see the image immediately so there's no need to display the spinner

The spinner is displayed during reading state. When the image is huge then FileReader may need a while to load this image.