Skip to content

Commit 900bf3a

Browse files
iaincollinsiaincollins
committed
Improve loading to avoid flicker of white window
Uses an loader embedded into the application. The launcher window is now larger to accomodate future UI changes.
1 parent 7ead049 commit 900bf3a

File tree

4 files changed

+266
-8
lines changed

4 files changed

+266
-8
lines changed

‎package-lock.json

+2-2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "icarus",
3-
"version": "0.1.6",
3+
"version": "0.1.7",
44
"description": "",
55
"scripts": {
66
"build": "npm run build:web && npm run build:app && npm run build:service && npm run build:package",

‎src/app/loader.go

+257
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,257 @@
1+
package main
2+
3+
import ("encoding/base64")
4+
5+
func LoadUrl(url string) string {
6+
html := `
7+
<html>
8+
<head>
9+
<meta name="viewport" content="width=device-width, user-scalable=no">
10+
<style>
11+
:root {
12+
--primary-color: rgb(235, 125, 0);
13+
--dark-primary-color: rgb(58, 12, 0);
14+
--background-color: var(--dark-primary-color);
15+
}
16+
17+
html {
18+
zoom: 100%;
19+
}
20+
21+
.not-selectable {
22+
-webkit-touch-callout: none;
23+
-webkit-user-select: none;
24+
-khtml-user-select: none;
25+
-moz-user-select: none;
26+
-ms-user-select: none;
27+
user-select: none;
28+
}
29+
30+
html::after {
31+
content: " ";
32+
display: block;
33+
position: fixed;
34+
top: 0;
35+
left: 0;
36+
bottom: 0;
37+
right: 0;
38+
background: linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.1) 50%), linear-gradient(90deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.05));
39+
z-index: -1;
40+
background-size: 100% 10px;
41+
pointer-events: none;
42+
}
43+
44+
body {
45+
background: black;
46+
color: white;
47+
font-size: 1.5rem;
48+
padding: .5rem;
49+
margin: 0;
50+
text-align: center;
51+
}
52+
53+
html,
54+
body {
55+
-ms-content-zooming: none;
56+
}
57+
58+
#background {
59+
position: absolute !important;
60+
top: 0;
61+
left: 0;
62+
width: 100%;
63+
height: 100%;
64+
content: " ";
65+
background: radial-gradient(circle, var(--background-color) 0%, rgba(0, 0, 0, 1) 100%);
66+
z-index: -1;
67+
opacity: 0.8;
68+
}
69+
70+
#loader {
71+
position: absolute;
72+
top: 25%;
73+
left: 0;
74+
width: 100%;
75+
display: flex;
76+
flex-direction: column;
77+
align-items: center;
78+
font-size: 1em;
79+
zoom: 2;
80+
opacity: .75;
81+
transition: .25s ease-in-out;
82+
z-index: 1;
83+
pointer-events: none;
84+
}
85+
86+
.loader__row {
87+
display: flex;
88+
}
89+
90+
.loader__arrow {
91+
width: 0;
92+
height: 0;
93+
margin: 0 -6px;
94+
border-left: 12px solid transparent;
95+
border-right: 12px solid transparent;
96+
border-bottom: 21.6px solid var(--primary-color);
97+
animation: loader__arrow-blink 1s infinite;
98+
filter: drop-shadow(0 0 18px var(--primary-color));
99+
}
100+
101+
.loader__arrow--down {
102+
transform: rotate(180deg);
103+
}
104+
105+
.loader__arrow--outer-1 {
106+
animation-delay: -0.0555555556s;
107+
}
108+
109+
.loader__arrow--outer-2 {
110+
animation-delay: -0.1111111111s;
111+
}
112+
113+
.loader__arrow--outer-3 {
114+
animation-delay: -0.1666666667s;
115+
}
116+
117+
.loader__arrow--outer-4 {
118+
animation-delay: -0.2222222222s;
119+
}
120+
121+
.loader__arrow--outer-5 {
122+
animation-delay: -0.2777777778s;
123+
}
124+
125+
.loader__arrow--outer-6 {
126+
animation-delay: -0.3333333333s;
127+
}
128+
129+
.loader__arrow--outer-7 {
130+
animation-delay: -0.3888888889s;
131+
}
132+
133+
.loader__arrow--outer-8 {
134+
animation-delay: -0.4444444444s;
135+
}
136+
137+
.loader__arrow--outer-9 {
138+
animation-delay: -0.5s;
139+
}
140+
141+
.loader__arrow--outer-10 {
142+
animation-delay: -0.5555555556s;
143+
}
144+
145+
.loader__arrow--outer-11 {
146+
animation-delay: -0.6111111111s;
147+
}
148+
149+
.loader__arrow--outer-12 {
150+
animation-delay: -0.6666666667s;
151+
}
152+
153+
.loader__arrow--outer-13 {
154+
animation-delay: -0.7222222222s;
155+
}
156+
157+
.loader__arrow--outer-14 {
158+
animation-delay: -0.7777777778s;
159+
}
160+
161+
.loader__arrow--outer-15 {
162+
animation-delay: -0.8333333333s;
163+
}
164+
165+
.loader__arrow--outer-16 {
166+
animation-delay: -0.8888888889s;
167+
}
168+
169+
.loader__arrow--outer-17 {
170+
animation-delay: -0.9444444444s;
171+
}
172+
173+
.loader__arrow--outer-18 {
174+
animation-delay: -1s;
175+
}
176+
177+
.loader__arrow--inner-1 {
178+
animation-delay: -0.1666666667s;
179+
}
180+
181+
.loader__arrow--inner-2 {
182+
animation-delay: -0.3333333333s;
183+
}
184+
185+
.loader__arrow--inner-3 {
186+
animation-delay: -0.5s;
187+
}
188+
189+
.loader__arrow--inner-4 {
190+
animation-delay: -0.6666666667s;
191+
}
192+
193+
.loader__arrow--inner-5 {
194+
animation-delay: -0.8333333333s;
195+
}
196+
197+
.loader__arrow--inner-6 {
198+
animation-delay: -1s;
199+
}
200+
201+
@keyframes loader__arrow-blink {
202+
0% {
203+
opacity: 0.1;
204+
}
205+
206+
30% {
207+
opacity: 1;
208+
}
209+
210+
100% {
211+
opacity: 0.1;
212+
}
213+
}
214+
</style>
215+
</head>
216+
<body oncontextmenu="return false;" class="not-selectable scrollable">
217+
<div id="loader">
218+
<div class="loader__row">
219+
<div class="loader__arrow loader__arrow--outer-18"></div>
220+
<div class="loader__arrow loader__arrow--down lloader__arrow--outer-17"></div>
221+
<div class="loader__arrow loader__arrow--outer-16"></div>
222+
<div class="loader__arrow loader__arrow--down loader__arrow--outer-15"></div>
223+
<div class="loader__arrow loader__arrow--outer-14"></div>
224+
</div>
225+
<div class="loader__row">
226+
<div class="loader__arrow loader__arrow--outer-1"></div>
227+
<div class="loader__arrow loader__arrow--down loader__arrow--outer-2"></div>
228+
<div class="loader__arrow loader__arrow--inner-6"></div>
229+
<div class="loader__arrow loader__arrow--down loader__arrow--inner-5"></div>
230+
<div class="loader__arrow loader__arrow--inner-4"></div>
231+
<div class="loader__arrow loader__arrow--down loader__arrow--outer-13"></div>
232+
<div class="loader__arrow loader__arrow--outer-12"></div>
233+
</div>
234+
<div class="loader__row">
235+
<div class="loader__arrow loader__arrow--down loader__arrow--outer-3"></div>
236+
<div class="loader__arrow loader__arrow--outer-4"></div>
237+
<div class="loader__arrow loader__arrow--down loader__arrow--inner-1"></div>
238+
<div class="loader__arrow loader__arrow--inner-2"></div>
239+
<div class="loader__arrow loader__arrow--down loader__arrow--inner-3"></div>
240+
<div class="loader__arrow loader__arrow--outer-11"></div>
241+
<div class="loader__arrow loader__arrow--down loader__arrow--outer-10"></div>
242+
</div>
243+
<div class="loader__row">
244+
<div class="loader__arrow loader__arrow--down loader__arrow--outer-5"></div>
245+
<div class="loader__arrow loader__arrow--outer-6"></div>
246+
<div class="loader__arrow loader__arrow--down loader__arrow--outer-7"></div>
247+
<div class="loader__arrow loader__arrow--outer-8"></div>
248+
<div class="loader__arrow loader__arrow--down loader__arrow--outer-9"></div>
249+
</div>
250+
</div>
251+
<div id="background"></div>
252+
</body>
253+
<script>setTimeout(() => window.location.href = "`+url+`", 0)</script>
254+
</html>
255+
`
256+
return `data:text/html;base64,`+base64.StdEncoding.EncodeToString([]byte(html))
257+
}

‎src/app/main.go

+6-5
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ const SERVICE_EXECUTABLE = "ICARUS Service.exe"
2424
const TERMINAL_EXECUTABLE = "ICARUS Terminal.exe"
2525
const DEBUGGER = true
2626

27-
const defaultLauncherWindowWidth = int32(640)
27+
const defaultLauncherWindowWidth = int32(960)
2828
const defaultLauncherWindowHeight = int32(480)
2929
const defaultWindowWidth = int32(1024)
3030
const defaultWindowHeight = int32(768)
@@ -163,7 +163,7 @@ func createWindow(LAUNCHER_WINDOW_TITLE string, url string, width int32, height
163163

164164
w.SetTitle(LAUNCHER_WINDOW_TITLE)
165165
w.SetSize(int(width), int(height), hint)
166-
w.Navigate(url)
166+
w.Navigate(LoadUrl(url))
167167
w.Run()
168168
}
169169

@@ -191,17 +191,18 @@ func createNativeWindow(LAUNCHER_WINDOW_TITLE string, url string, width int32, h
191191
}
192192

193193
// Center window
194+
hwnd := win.HWND(hwndPtr)
194195
screenWidth := int32(win.GetSystemMetrics(win.SM_CXSCREEN))
195196
screenHeight := int32(win.GetSystemMetrics(win.SM_CYSCREEN))
196197
windowX := int32((screenWidth / 2) - (width / 2))
197198
windowY := int32((screenHeight / 2) - (height / 2))
198-
win.MoveWindow(win.HWND(hwndPtr), windowX, windowY, width, height, false)
199-
199+
win.MoveWindow(hwnd, windowX, windowY, width, height, false)
200+
200201
// Pass the pointer to the window as an unsafe reference
201202
webViewInstance = webview.NewWindow(DEBUGGER, unsafe.Pointer(&hwndPtr))
202203
defer webViewInstance.Destroy()
203204
bindFunctionsToWebView(webViewInstance)
204-
webViewInstance.Navigate(url)
205+
webViewInstance.Navigate(LoadUrl(url))
205206
webViewInstance.Run()
206207
}
207208

0 commit comments

Comments
 (0)