Skip to content

Commit a57fa9a

Browse files
mistrickymistricky
committed
[Feat] add loading screen
1 parent aa0c8eb commit a57fa9a

File tree

4 files changed

+178
-11
lines changed

4 files changed

+178
-11
lines changed

‎app/index.html‎

Lines changed: 108 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,5 +10,112 @@
1010
<link data-trunk rel="rust" data-bin="zzhack-v6" data-type="main" />
1111
<link data-trunk rel="rust" data-bin="highlight_worker" data-type="worker" />
1212
</head>
13-
<body></body>
13+
<body style="margin:0;min-height:100vh;display:flex;flex-direction:column;align-items:center;background:#000000;color:#e2e8f0;">
14+
<div style="flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;">
15+
<svg width="64" height="46" viewBox="0 0 40 29" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Loading logo" style="display:block;overflow:visible;">
16+
<style>
17+
.shape {
18+
transform-box: fill-box;
19+
transform-origin: center;
20+
animation: jump 1.8s infinite;
21+
}
22+
23+
.circle {
24+
animation-delay: 0s;
25+
}
26+
27+
.triangle {
28+
animation-delay: 0.6s;
29+
}
30+
31+
.square {
32+
animation-delay: 1.2s;
33+
}
34+
35+
@keyframes jump {
36+
0% {
37+
transform: translateY(0) scaleY(1) rotate(0deg);
38+
}
39+
12% {
40+
transform: translateY(2px) scaleY(0.88) rotate(0deg);
41+
}
42+
35% {
43+
transform: translateY(-14px) scaleY(1.08) rotate(360deg);
44+
}
45+
55% {
46+
transform: translateY(0) scaleY(1) rotate(0deg);
47+
}
48+
70% {
49+
transform: translateY(-3px) scaleY(1.03) rotate(-10deg);
50+
}
51+
100% {
52+
transform: translateY(0) scaleY(1) rotate(0deg);
53+
}
54+
}
55+
</style>
56+
57+
<g class="shape square">
58+
<rect x="11.291" width="20" height="20" rx="5" transform="rotate(6.98839 11.291 0)" fill="#FF7979"/>
59+
</g>
60+
<g class="shape circle">
61+
<circle cx="8" cy="9.14258" r="8" fill="#70A1FF"/>
62+
</g>
63+
<g class="shape triangle">
64+
<path d="M25.5943 8.15645C25.7834 7.35408 26.8075 7.11219 27.3355 7.74517L38.9501 21.6672C39.4233 22.2345 39.1392 23.1014 38.422 23.2786L22.607 27.1853C21.8811 27.3646 21.2224 26.7129 21.3938 25.9851L25.5943 8.15645Z" fill="#FFBE76"/>
65+
</g>
66+
</svg>
67+
</div>
68+
<div id="loading-log" style="font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;font-size:16px;line-height:1.6;height:4.8em;overflow:hidden;width:90vw;max-width:420px;margin-bottom:24px;">
69+
<div><span style="color:#34d399;">[ OK ]</span> Style loaded</div>
70+
</div>
71+
<script>
72+
(function () {
73+
var log = document.getElementById("loading-log");
74+
if (!log) {
75+
return;
76+
}
77+
78+
var steps = [
79+
"Brain mounted",
80+
"Reached target Graphical Interface",
81+
"Fake Terminal loaded",
82+
"Restored session cache",
83+
"Initialized virtual console",
84+
"Indexed command registry",
85+
"Prepared workspace",
86+
"Primed render pipeline",
87+
"Handshaking with UI core",
88+
];
89+
90+
var index = 0;
91+
var interval = 200;
92+
var ok_label = '<span style="color:#34d399;">[ OK ]</span> ';
93+
var working_label = '<span style="color:#facc15;">[ Working ]</span> ';
94+
95+
function appendLine(text, label) {
96+
var line = document.createElement("div");
97+
line.innerHTML = label + text;
98+
log.appendChild(line);
99+
while (log.children.length > 3) {
100+
log.removeChild(log.firstChild);
101+
}
102+
}
103+
104+
function tick() {
105+
if (index >= steps.length) {
106+
return;
107+
}
108+
109+
var is_last = index === steps.length - 1;
110+
appendLine(steps[index], is_last ? working_label : ok_label);
111+
index += 1;
112+
if (index < steps.length) {
113+
setTimeout(tick, interval);
114+
}
115+
}
116+
117+
setTimeout(tick, interval);
118+
})();
119+
</script>
120+
</body>
14121
</html>

‎app/src/app.rs‎

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ use wasm_bindgen_futures::spawn_local;
99
use yew::{prelude::*, use_effect_with, use_mut_ref, use_reducer};
1010

1111
const SHRC_CONTENT: &str = include_str!("../../data/.shrc");
12+
const LOADING_LOGO: &str = include_str!("icons/loading_logo.svg");
1213

1314
#[derive(Clone)]
1415
struct SubmitState {
@@ -100,15 +101,22 @@ pub fn app() -> Html {
100101
let config = ConfigService::get();
101102
let show_window = config.app.terminal_window;
102103

104+
let loading_logo = Html::from_html_unchecked(AttrValue::from(LOADING_LOGO));
105+
103106
html! {
104-
<TerminalWindow
105-
lines={displayed_lines}
106-
input={(*input).clone()}
107-
on_input={on_input}
108-
on_submit={on_submit}
109-
on_history_nav={on_history_nav}
110-
show_window={show_window}
111-
/>
107+
<>
108+
<div class="w-full flex items-center justify-center mb-4">
109+
{ loading_logo }
110+
</div>
111+
<TerminalWindow
112+
lines={displayed_lines}
113+
input={(*input).clone()}
114+
on_input={on_input}
115+
on_submit={on_submit}
116+
on_history_nav={on_history_nav}
117+
show_window={show_window}
118+
/>
119+
</>
112120
}
113121
}
114122

‎app/src/icons/loading_logo.svg‎

Lines changed: 52 additions & 0 deletions
Loading

‎app/src/vfs.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
"kind": "directory",
55
"extension": null,
66
"size": null,
7-
"modified": "2025-12-16T11:32:55.863207394Z",
7+
"modified": "2025-12-21T12:50:53.081434110Z",
88
"children_count": 18,
99
"children": [
1010
{
@@ -26,7 +26,7 @@
2626
"kind": "file",
2727
"extension": "md",
2828
"size": 439,
29-
"modified": "2025-12-16T08:07:51.358873581Z",
29+
"modified": "2025-12-21T12:50:53.080434110Z",
3030
"children_count": null,
3131
"children": null,
3232
"title": null,

0 commit comments

Comments
 (0)