A focused Docker Compose management web application.
feat: log loading indicator
+53
-3
+4
-2
packages/node/src/core/logs.rs
+4
-2
packages/node/src/core/logs.rs
···
27
27
{
28
28
// Send previous logs in buffer to bring client up to date
29
29
let bytes = &buffer.read().await;
30
-
if !bytes.is_empty() {
31
-
yield <BytesMut as Clone>::clone(&bytes).freeze();
30
+
if bytes.is_empty() {
31
+
yield b"Nothing yet...".as_slice().into();
32
+
} else {
33
+
yield <BytesMut as Clone>::clone(&bytes).freeze()
32
34
}
33
35
}
34
36
+49
-1
packages/panel/src/lib/component/LogTerminal.svelte
+49
-1
packages/panel/src/lib/component/LogTerminal.svelte
···
10
10
11
11
let { project }: { project: string } = $props();
12
12
13
+
let loading = $state(true);
14
+
13
15
const terminal: Attachment<HTMLElement> = (el) => {
14
16
const terminal = new Terminal();
15
17
const fitAddon = new FitAddon();
···
37
39
38
40
while (true) {
39
41
try {
42
+
loading = true;
43
+
40
44
const { response } = await client.GET("/api/project/{project}/logs", {
41
45
params: { path: { project } },
42
46
parseAs: "stream",
···
49
53
response,
50
54
) as unknown as AsyncIterable<ServerSentEvent>) {
51
55
if (signal.aborted) return;
56
+
loading = false;
52
57
53
58
terminal.write(Uint8Array.from(atob(event.data), (c) => c.charCodeAt(0)));
54
59
}
···
60
65
}
61
66
</script>
62
67
63
-
<div {@attach terminal}></div>
68
+
<div class="container">
69
+
{#if loading}
70
+
<div class="positioner"><span class="loader"></span></div>
71
+
{/if}
72
+
73
+
<div {@attach terminal}></div>
74
+
</div>
75
+
76
+
<style lang="scss">
77
+
.container {
78
+
position: relative;
79
+
}
80
+
81
+
.positioner {
82
+
position: absolute;
83
+
inset: 0;
84
+
85
+
display: flex;
86
+
align-items: center;
87
+
justify-content: center;
88
+
}
89
+
90
+
.loader {
91
+
z-index: 10;
92
+
93
+
width: 48px;
94
+
height: 48px;
95
+
border: 5px solid var(--text);
96
+
border-bottom-color: transparent;
97
+
border-radius: 50%;
98
+
display: inline-block;
99
+
box-sizing: border-box;
100
+
animation: rotation 1s linear infinite;
101
+
}
102
+
103
+
@keyframes rotation {
104
+
0% {
105
+
transform: rotate(0deg);
106
+
}
107
+
100% {
108
+
transform: rotate(360deg);
109
+
}
110
+
}
111
+
</style>