search

Sketch-sh / sketch-sh

Sketch.sh - Online Code Editor and ReasonML community
https://sketch.sh
Other
425 stars 37 forks source link

Improve loading screens #133

Open matthiaskern opened 6 years ago

matthiaskern commented 6 years ago

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

thangngoc89 commented 6 years ago

Are we talking about the loading screens created with ReactContentLoader?

matthiaskern commented 6 years ago

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

thangngoc89 commented 6 years ago

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

nimish-gupta commented 6 years ago

@thangngoc89 can i go forward with this issue?

thangngoc89 commented 6 years ago

@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 commented 6 years ago

@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 commented 6 years ago

@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) https://github.com/Sketch-sh/sketch-sh/blob/4c7fafec4784a4b8a9dda290f9ad3a0df2561857/client/src/components/UI_SketchList.re#L94

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 commented 6 years ago

ok got it