core: update default loading animation

[vince-fugnitto]

What it does

Fixes: #6463.
Closes: #7513.

The pull-request updates the default loading animation on startup to instead use the existing codicon icon for consistency with the rest of the framework.

The pull-request contains the minimal changes from #7513 without the need to replace the existing icon, or preload template not to break downstream applications.

preload-2.mov

How to test

1. build the example-browser or example-electron application
2. start the application - the new codicon icon should be used
3. verify the changes with different themes - both light and dark

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 vincent.fugnitto@ericsson.com
Co-authored-by: Dmitry Sharshakov d3dx12.xx@gmail.com

[vince-fugnitto]

Unfortunately we cannot re-use a variable here like var(theia-foreground since it is not ready and would cause a flicker. Instead we can use a color which should work for most themes.

[JonasHelming]

Looks nice, thanks for taking care of this!

[msujew]

I believe using the load codicon (\eb19) would be a better fit here perhaps? At least to me, it looks more visually pleasing for this use case.

[vince-fugnitto]

I believe using the load codicon (\eb19) would be a better fit here perhaps? At least to me, it looks more visually pleasing for this use case.

Sounds good! I updated it and agree it looks better in this case:

preload-2.mov

[msujew]

Thanks, looks great!

[kittaakos]

@vince-fugnitto, thanks for the change. It looks excellent 😍 However, I want to keep the old spinner for a while but use the latest Theia. How can I customize it? In my extension, I can override the .theia-preload selector, but this is hardcoded here:

theia/dev-packages/application-manager/src/generator/frontend-generator.ts

Line 56 in 70466bb

<div class="theia-preload">${this.compileIndexPreload(frontendModules)}</div>

So at app startup, I can see the new Theia spinner for a second or two if I add these selectors to my styles:

/* restore the old Theia spinner */
.theia-preload {
  background-image: var(--theia-preloader) !important;
  display: unset;
  justify-content: unset;
  align-items: unset;
}

.theia-preload::after {
  animation: none;
  color: unset;
  content: none;
  font: unset;
}

custom_spinner.mp4

I also tried to customize it on the code level here add replaced the CSS selectors on the DOM, but it's too late. How does one change the app spinner? Thank you!

I also noticed that the old spinner is still in the app and used by the mini-browser? Why is this difference in the Theia UI?

I appreciate your support.

[vince-fugnitto]

@kittaakos you can provide your own custom preload element similar to eclipse-theia/theia-ide#73 (the actual splash screen can be whatever you'd like, and could be the old spinner if you require it).

I also noticed that the old spinner is still in the app and used by the mini-browser? Why is this difference in the Theia UI?

At the time I wanted to keep the changes minimal to only the splash screen and also make that loading animation different than regular loading within the app. We can of course update so that both are consistent if we want.

[kittaakos]

Thank you so much for your time and help, @vince-fugnitto. 🙏 I was unaware of the custom preload option.

Finally, I ended up patching the generated index.html after the app build.

---

I wanted to keep the changes minima

I see. It makes sense.