Improve loading screens

[matthiaskern]

Loading screens should resemble the actual UI it is "morphing" to better.

[thangngoc89]

Are we talking about the loading screens created with ReactContentLoader?

[matthiaskern]

Thinking about these:

Could be adjusted to look more like the screen it is loading,e.g.:

[thangngoc89]

yep. that's good ideas. Morphing only works when it looks exactly like the final screen

[nimish-gupta]

@thangngoc89 can i go forward with this issue?

[thangngoc89]

@matthiaskern yeah sure. take a look at this thread https://twitter.com/_chenglou/status/1034530454597062656 :P

I found this library with css only approach https://github.com/zalog/placeholder-loading . It looks very promising and we can put the block inside sketch's css to have the exact sizes/spacing

[nimish-gupta]

@thangngoc89 can you tell me on which of the screen you want loading screen? And provide a little bit more context for the issue?

[thangngoc89]

@nimish-gupta there is currently 2 loading screens. 1 is the sketch viewer with editor.

https://github.com/Sketch-sh/sketch-sh/blob/9a0b0011d06da4f33b171b806126e13a780ad54b/client/src_editor/Editor_NotePlaceholder.re

And the other one is SketchList (homepage when logined)

sketch-sh/client/src/components/UI_SketchList.re

Line 94 in 4c7fafe

module Placeholder = {

I would like to improve them first because currently they are not correct with the final shape (and it's worst then no loading screen at all)

[nimish-gupta]

ok got it