Skip to content

#193, #324, #327, #717, #851 Replaced the splash screen with a preload #1287

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 3 commits into from
Aug 9, 2022
Merged

#193, #324, #327, #717, #851 Replaced the splash screen with a preload #1287

merged 3 commits into from
Aug 9, 2022

Conversation

@kittaakos
Copy link
Contributor

@kittaakos kittaakos commented Aug 4, 2022 •
edited
Loading

Motivation

Removes the splash screen and replaces the loading animation with a Theia preload. This PR does not contain the final design, in fact, I just copied the first Arduino SVG I found on the Internet and prepared the stub of the change.

Change description

  • Removed the splash screen (status assets, services, etc.),
  • Added an HTML preload example.

In Action:

light IDE2, light OS theme:

light-ide2-theme-light-os-theme.mp4

light IDE2, dark OS theme:

light-ide2-theme-dark-os-theme.mp4

dark IDE2, light OS theme:

dark-ide2-theme-light-os-theme.mp4

dark IDE2, dark OS theme:

dark-ide2-theme-dark-os-theme.mp4

Other information

Noteworthy things:

  • This PR depends on #1070 Can check if the current window is the first one. #1282 (I can make it independent if required) Done ✅ ,
  • When loading the preload, the IDE2 app, the themes, and the user-selected theme are unavailable, but the preload must have a background color. This example uses the hard-coded color values of the editor.background and editor.foreground theme constants. If the OS theme is dark, the dark editor colors will be used for the preload. Otherwise, the light one.

Closes #193
Closes #324
Closes #327
Closes #717
Closes #851

Reviewer checklist

  • PR addresses a single concern.
  • The PR has no duplicates (please search among the Pull Requests before creating one)
  • PR title and description are properly filled.
  • Docs have been added / updated (for bug fixes / features)

@kittaakos kittaakos added type: enhancement Proposed improvement topic: code Related to content of the project itself topic: theme Related to GUI theming labels Aug 4, 2022
Base automatically changed from #1070 to main August 4, 2022 09:11
kittaakos
kittaakos commented Aug 4, 2022
View reviewed changes
kittaakos
kittaakos commented Aug 4, 2022
View reviewed changes
kittaakos
kittaakos commented Aug 4, 2022
View reviewed changes
@kittaakos kittaakos changed the title #324, #327, #717, #851 Replaced the splash screen with a preload #193, #324, #327, #717, #851 Replaced the splash screen with a preload Aug 4, 2022
@kittaakos kittaakos force-pushed the theia-preload branch 4 times, most recently from 0adde9a to db9037d Compare August 4, 2022 10:28
@per1234 per1234 linked an issue Aug 4, 2022 that may be closed by this pull request
Splash Screen Can be Clicked and Dragged as an Image #325
Closed
per1234
per1234 approved these changes Aug 4, 2022
View reviewed changes
Copy link
Contributor

@per1234 per1234 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I tested this on Windows and Linux and it fixes #193, #324, #325, #327 for me

Thanks so much Akos!

AlbyIanna
AlbyIanna approved these changes Aug 5, 2022
View reviewed changes
Copy link
Contributor

@AlbyIanna AlbyIanna left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I tested it on MacOS and it works as expected 👍
LGTM ✅

@kittaakos
Copy link
Contributor Author

I had an offline chat with @91volt, and we agreed that I enhance this PoC to enable lottie for the preload in case we want to support a more sophisticated solution than an SVG.

@kittaakos kittaakos force-pushed the theia-preload branch 2 times, most recently from 4324475 to ebe2e3b Compare August 5, 2022 21:02
@kittaakos
Copy link
Contributor Author

I had an offline chat with @91volt, and we agreed that I enhance this PoC to enable lottie for the preload in case we want to support a more sophisticated solution than an SVG.

I have pushed the updated version. Please review.

@kittaakos kittaakos force-pushed the theia-preload branch 2 times, most recently from 686336e to f37fc13 Compare August 5, 2022 21:09
per1234
per1234 approved these changes Aug 5, 2022
View reviewed changes
Copy link
Contributor

@per1234 per1234 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Updated version looks great. Excellent work Ernesto and Akos!

@kittaakos
Copy link
Contributor Author

As requested offline, I switched to a preload GIF. Please review.

kittaakos
kittaakos commented Aug 8, 2022
View reviewed changes
electron-app/preload/index.js Outdated
@@ -0,0 +1,3 @@
// TODO: use `lottie` to load the animation from JSON.
// Add `lottie-web` as a `devDependency` and here do `require('lottie-web').loadAnimation`
// Currently IDE2 uses a GIF to render the preload. No newline at end of file
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

add newlinw

@91volt
Copy link

91volt commented Aug 8, 2022

With the gif In term of smoothness of the animation is much better, thank you @kittaakos.
The only problem I see is the stretched aspect ratio of the gif:
Schermata 2022-08-08 alle 14 51 32

@ubidefeo
Copy link

ubidefeo commented Aug 8, 2022

@91volt
I have the same stretch issue
CleanShot 2022-08-08 at 18 59 49@2x

@kittaakos kittaakos force-pushed the theia-preload branch 3 times, most recently from 252892a to 7bd4479 Compare August 9, 2022 10:09
Akos Kitta added 3 commits August 9, 2022 14:28
Replaced the splash screen with a preload.
18f2ff6 
Added a bare minimum example.

Closes #193
Closes #324
Closes #327
Closes #717
Closes #851

Signed-off-by: Akos Kitta <a.kitta@arduino.cc>
Defer settings/certificates load until app ready.
b9ceb3d 
Signed-off-by: Akos Kitta <a.kitta@arduino.cc>
Defer notification area rendering until app ready.
7034939 
Signed-off-by: Akos Kitta <a.kitta@arduino.cc>
ubidefeo
ubidefeo approved these changes Aug 9, 2022
View reviewed changes
Copy link

@ubidefeo ubidefeo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Works as expected
thank you

@kittaakos kittaakos merged commit 8a1cabd into main Aug 9, 2022
@kittaakos kittaakos deleted the theia-preload branch August 9, 2022 15:23
@per1234 per1234 mentioned this pull request Aug 16, 2022
Closed
@ckuethe
Copy link

ckuethe commented Aug 17, 2022

This is lovely. Nice fast startup, and the little bouncy animation make it feel like the startup is doing something.

@per1234 per1234 mentioned this pull request Sep 22, 2022
Closed
3 tasks
@kittaakos kittaakos mentioned this pull request Sep 26, 2022
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@ubidefeo ubidefeo ubidefeo approved these changes

@per1234 per1234 per1234 approved these changes

@91volt 91volt Awaiting requested review from 91volt

+1 more reviewer

@AlbyIanna AlbyIanna AlbyIanna approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

topic: code Related to content of the project itself topic: theme Related to GUI theming type: enhancement Proposed improvement

Projects

None yet

Milestone

No milestone

6 participants

@kittaakos @91volt @ubidefeo @ckuethe @AlbyIanna @per1234