reanimator/bee
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

feat(iso): loading screen while bee-web starts

Browse Source 
Replace 15s blocking wait with instant Chromium launch showing a
dark loading page that polls /healthz every 500ms and auto-redirects
to the app when ready.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Michael Chus
2026-03-29 09:33:04 +03:00
parent 5857805518
commit dfb94f9ca6
2 changed files with 83 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
iso/overlay/usr/local/bin/bee-openbox-session
View File

@@ -2,16 +2,6 @@
# openbox session: launch tint2 taskbar + chromium, then openbox as WM.
# This file is used as an xinitrc by bee-desktop.
# Wait for bee-web to be accepting connections (up to 15 seconds)
i=0
while [ $i -lt 15 ]; do
if curl -sf http://localhost/healthz >/dev/null 2>&1; then
break
fi
sleep 1
i=$((i+1))
done
# Disable screensaver and DPMS
xset s off
xset -dpms
@@ -25,6 +15,6 @@ chromium \
--disable-session-crashed-bubble \
--disable-features=TranslateUI \
--start-fullscreen \
http://localhost/ &
file:///usr/local/share/bee/loading.html &
exec openbox

82
iso/overlay/usr/local/share/bee/loading.html Normal file
View File

@@ -0,0 +1,82 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>EASY-BEE</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
height: 100%;
background: #0f1117;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Courier New', monospace;
color: #e2e8f0;
}
.container {
text-align: center;
}
.logo {
font-size: 13px;
line-height: 1.4;
color: #f6c90e;
margin-bottom: 48px;
white-space: pre;
}
.spinner {
width: 48px;
height: 48px;
border: 4px solid #2d3748;
border-top-color: #f6c90e;
border-radius: 50%;
animation: spin 0.8s linear infinite;
margin: 0 auto 24px;
}
@keyframes spin { to { transform: rotate(360deg); } }
.status {
font-size: 14px;
color: #a0aec0;
letter-spacing: 0.05em;
}
.dots::after {
content: '';
animation: dots 1.5s steps(4, end) infinite;
}
@keyframes dots {
0% { content: ''; }
25% { content: '.'; }
50% { content: '..'; }
75% { content: '...'; }
}
</style>
</head>
<body>
<div class="container">
<div class="logo"> ███████╗ █████╗ ███████╗██╗ ██╗ ██████╗ ███████╗███████╗
██╔════╝██╔══██╗██╔════╝╚██╗ ██╔╝ ██╔══██╗██╔════╝██╔════╝
█████╗ ███████║███████╗ ╚████╔╝ █████╗██████╔╝█████╗ █████╗
██╔══╝ ██╔══██║╚════██║ ╚██╔╝ ╚════╝██╔══██╗██╔══╝ ██╔══╝
███████╗██║ ██║███████║ ██║ ██████╔╝███████╗███████╗
╚══════╝╚═╝ ╚═╝╚══════╝ ╚═╝ ╚═════╝ ╚══════╝╚══════╝</div>
<div class="spinner"></div>
<div class="status">Starting<span class="dots"></span></div>
</div>
<script>
function probe() {
fetch('http://localhost/healthz', { cache: 'no-store' })
.then(function(r) {
if (r.ok) {
window.location.replace('http://localhost/');
} else {
setTimeout(probe, 500);
}
})
.catch(function() {
setTimeout(probe, 500);
});
}
probe();
</script>
</body>
</html>