spinner: add custom loading animation

[vince-fugnitto]

What it does

Fixes: #72

The following pull-request introduces a preloadTemplate to the application to provide a custom loading animation (splash screen) which is different than upstream, and can be used as an example for others:

Videos

spinner.mp4

spinner-light.mp4

I am open to suggestions on what we might want the svg to be 👍

How to test

Start or package the application, the new loading screen should take effect.

Review checklist

• as an author, I have thoroughly tested my changes and carefully followed the review guidelines

Reminder for reviewers

• as a reviewer, I agree to behave in accordance with the review guidelines

Signed-off-by: vince-fugnitto [email protected]

[marcdumais-work]

How about adding "Blueprint" as part of the spinner svg? Or make something re-using the Blueprint logo?

[vince-fugnitto]

How about adding "Blueprint" as part of the spinner svg? Or make something re-using the Blueprint logo?

I tried adding blueprint to the spinner itself (locally), in theory we can have anything :)

spinner-custom.mp4

[brianking]

Idea: An animated gif of the blueprint logo, with lines being drawn on it.

[vince-fugnitto]

Idea: An animated gif of the blueprint logo, with lines being drawn on it.

@brianking I like the idea. but unfortunately I do not have the experience or knowledge on how to make more complex animations. Perhaps there is someone at the foundation who can make such animations?

[brianking]

@vince-fugnitto Sure, I will followup.

What are the size specifications?

[vince-fugnitto]

@vince-fugnitto Sure, I will followup.
What are the size specifications?

Given it is an animated svg like I have proposed we can resize it without issues and it would be responsive.
Else, we might want to keep it relatively modest (I'm not sure about the specifics).

[marcdumais-work]

an animated svg like I have proposed we can resize it without issues

Correct. So the question might be more like: what's the lower range in size, we might use, so that the details are visible? I don't personally think we necessarily need it to be postage-stamp small.

[croundy]

Please see if any of these resemble the direction you are thinking
[Theia_logo_and_icon_animations_2 (1).zip] (https://github.com/eclipse-theia/theia-blueprint/files/6394189/Theia_logo_and_icon_animations_2.1.zip)

[marcdumais-work]

Please see if any of these resemble the direction you are thinking
[Theia_logo_and_icon_animations_2 (1).zip] (https://github.com/eclipse-theia/theia-blueprint/files/6394189/Theia_logo_and_icon_animations_2.1.zip)

@croundy Nice start. I suggest a quicker animation. This will be displayed while Blueprint loads, which can be relatively fast. Maybe a couple of seconds, typically. So, most users may never see the best parts of a ~8s animation :)

Maybe we try to get to this point within a second:

[koegel]

@croundy I like option B. I agree with @marcdumais-work that it should be much faster though. Also the transition between the separated parts and the final logo could be smoother if possible.

[croundy]

Here's the update from Mehrnaz, as well as a new option she put together. Theia_Logo_Motion (1).zip

[vince-fugnitto]

Here's the update from Mehrnaz, as well as a new option she put together. Theia_Logo_Motion (1).zip

@croundy I don't think the filetypes provided will work (mp4), it should be an animated svg.

[croundy]

@vince-fugnitto we will have Mehrnaz create whatever file type is needed. For now, just looking for feedback on the actual animation and if either of these options are in line with what you guys are thinking

[vince-fugnitto]

@vince-fugnitto we will have Mehrnaz create whatever file type is needed. For now, just looking for feedback on the actual animation and if either of these options are in line with what you guys are thinking

Thank you for clarifying, I wouldn't want Mehrnaz to perform unnecessary work 👍

I don't have the strongest opinion on the latest animation, but I do not get the sense of loading or progression.
We must remember that applications can either start quickly or take some time. In both cases we should have an animation which displays the logo, and can be properly looped. Unfortunately I do not believe this animation can be looped cleanly for longer startup times.

[koegel]

New Option (inline for easy access)

Theia.New.option.mp4

[koegel]

Option 1

TheiaDownloader.mp4

[koegel]

I would be OK with Option 1 if we cut the first second where the logo is still separated into layers. Maybe we can just make the second part longer where the logo is just moving towards the text.

[marcdumais-work]

@koegel I want warp-jump blueprint now :)
(new option 1)

[croundy]

@koegel I want warp-jump blueprint now :)
(new option 1)

Ya, I kind of like warp jump too, but I will leave it to you guys to decide. Mr. LaForge.....engage

[koegel]

I do not have a strong opinion on either options but I share @vince-fugnitto concerns how to loop any of the two for longer startup times. Any ideas for this?

[croundy]

See what you think of these options:

A1_.mp4

B.mp4

D.mp4

[brianking]

I like the 3rd one the best.

[koegel]

I like the 3rd one the best.

So do I!

[marcdumais-work]

Personally I'd like to have the name "Theia Blueprint" present, from the beginning until the end. I'll go with what the majority likes.

[jfaltermeier]

@vince-fugnitto This is part of the Beta 1 milestone. We plan to move from Alpha to Beta end of June. Shall we move this ticket?

[vince-fugnitto]

@vince-fugnitto This is part of the Beta 1 milestone. We plan to move from Alpha to Beta end of June. Shall we move this ticket?

@jfaltermeier if you are referring to updating the milestone for the pull-request then please go ahead! :)

[brianking]

I have requested an SVG version. Would an animated GIF work as well?

[vince-fugnitto]

I have requested an SVG version. Would an animated GIF work as well?

@brianking an animated gif can possibly work but it would not be of high quality, clear, or as responsive as an svg would.

[marcdumais-work]

@brianking I think this fell between the cracks. Can you see if it's still possible to get an svg version of the selected animation?

[brianking]

Here is the animated GIF version, is that acceptable?

The Theia Blueprint logo is a raster image (with pattern) and not a vector file, converting a raster pattern file to SVG is not good practice, as patterns needs lots of attributes and Id to define on both html5, and css files. Some information will be lost in the process.

[marcdumais-work]

Thanks @brianking - let's try with this.

[marcdumais-work]

@vince-fugnitto I briefly tried to update this PR to use the provided GIF but was unsuccessful. Would you have a try at it?

[vince-fugnitto]

@marcdumais-work the pull-request is rebased so it should now work 👍
@brianking I do not believe the #73 (comment) would work, for instance it has a white background that would not look well on dark themes, and would not scale well like an svg.

[brianking]

We have made another gif animation with lighter pattern's color that works good both on dark and light platforms. As well, we made an svg animation from the theia icon as it is a vector image and can be converted to svg well. ( As discussed the logo is a raster image since it has a pattern. Raster images when converting to svgs created several faulty codes) The new svg animation have been saved on a root folder that attached here. Please review and open the index.html in a browser. let us know your thoughts.

theiaSvg.zip

[vince-fugnitto]

@marcdumais-work I updated the pull-request to use the latest animation provided, let me know what you think :)

[marcdumais-work]

Thanks @vince-fugnitto !

I think I like the simplicity. Is there a way to make the movement smoother? Here's how it looks on my machine:

[marcdumais-work]

I discussed with Vince offline. The jerkiness of the animation is a known issue (1). Thinking of it, it's displayed at startup, when the browser app is very busy setting everything up and loading the workspace and so on. As noted by Thomas, the JSON-RPC communication currently suffers a pretty big encoding/decoding overhead, the price of which is probably very high right at startup.

TL;DR: in the short term we have to live with startup animation slowdowns. We can try for an animation, such that the effect of slowdowns will be less visually prominent, probably by having the logo stay static and limiting the animation to secondary element(s). Vince might have an additional idea or two.

(1): eclipse-theia/theia#9287

[vince-fugnitto]

@marcdumais-work I updated the pull-request to go a different route which should not have the same low frame rates on startup (using @keyframes):

blueprint-spinner.mp4

[marcdumais-work]

Here I composed a busy workbench, which means lots to restore when I reload (CTRL-R), so we can observe the latest version of the animation. I quite like it, it's pulsating like it's alive, breathing.

@vince-fugnitto should we try bigger?

[vince-fugnitto]

The pull-request should be ready for anyone interested in reviewing :)

[jfaltermeier]

I've testing on Linux. Looks very nice. I could not observe any lags during the animation.