A focused Docker Compose management web application.
feat: make loader replace icon
+41
-29
+5
-1
packages/panel/src/lib/component/LoaderButton.svelte
+5
-1
packages/panel/src/lib/component/LoaderButton.svelte
···
27
27
<span class="loader"></span>
28
28
{/if}
29
29
30
-
<div>
30
+
<div class="content">
31
31
{#if typeof children === "string"}
32
32
{children}
33
33
{:else}
···
62
62
100% {
63
63
transform: rotate(360deg);
64
64
}
65
+
}
66
+
67
+
.content:empty {
68
+
display: none;
65
69
}
66
70
</style>
+36
-28
packages/panel/src/routes/(authenticated)/projects/[project]/ProjectStatus.svelte
+36
-28
packages/panel/src/routes/(authenticated)/projects/[project]/ProjectStatus.svelte
···
26
26
onclick={() =>
27
27
api.client.POST("/api/project/{project}/start", { params: { path: { project: project.name } } })}
28
28
>
29
-
<div class="flexr center gap-10">
30
-
<Fa icon={faPlay} />
31
-
Start All
32
-
</div>
29
+
{#snippet children(loading)}
30
+
<div class="flexr center gap-10">
31
+
{#if !loading}<Fa icon={faPlay} />{/if}
32
+
Start All
33
+
</div>
34
+
{/snippet}
33
35
</PromiseButton>
34
36
</div>
35
37
<div>
···
40
42
onclick={() =>
41
43
api.client.POST("/api/project/{project}/restart", { params: { path: { project: project.name } } })}
42
44
>
43
-
<div class="flexr center gap-10">
44
-
<Fa icon={faArrowsRotate} />
45
-
Restart All
46
-
</div>
45
+
{#snippet children(loading)}
46
+
<div class="flexr center gap-10">
47
+
{#if !loading}<Fa icon={faArrowsRotate} />{/if}
48
+
Restart All
49
+
</div>
50
+
{/snippet}
47
51
</PromiseButton>
48
52
</div>
49
53
<div>
···
54
58
onclick={() =>
55
59
api.client.POST("/api/project/{project}/stop", { params: { path: { project: project.name } } })}
56
60
>
57
-
<div class="flexr center gap-10">
58
-
<Fa icon={faStop} />
59
-
Stop All
60
-
</div>
61
+
{#snippet children(loading)}
62
+
<div class="flexr center gap-10">
63
+
{#if !loading}<Fa icon={faStop} />{/if}
64
+
Stop All
65
+
</div>
66
+
{/snippet}
61
67
</PromiseButton>
62
68
</div>
63
69
<div>
···
67
73
onclick={() =>
68
74
api.client.POST("/api/project/{project}/redeploy", { params: { path: { project: project.name } } })}
69
75
>
70
-
<div class="flexr center gap-10">
71
-
<Fa icon={faRocket} />
72
-
Redeploy All
73
-
</div>
76
+
{#snippet children(loading)}
77
+
<div class="flexr center gap-10">
78
+
{#if !loading}<Fa icon={faRocket} />{/if}
79
+
Redeploy All
80
+
</div>
81
+
{/snippet}
74
82
</PromiseButton>
75
83
</div>
76
84
</div>
···
98
106
params: { path: { project: project.name, service: service.serviceName } },
99
107
})}
100
108
>
101
-
<div class="flexr center gap-10">
102
-
<Fa icon={faPlay} />
103
-
</div>
109
+
{#snippet children(loading)}
110
+
{#if !loading}<Fa icon={faPlay} />{/if}
111
+
{/snippet}
104
112
</PromiseButton>
105
113
<PromiseButton
106
114
style="a"
···
111
119
params: { path: { project: project.name, service: service.serviceName } },
112
120
})}
113
121
>
114
-
<div class="flexr center gap-10">
115
-
<Fa icon={faArrowsRotate} />
116
-
</div>
122
+
{#snippet children(loading)}
123
+
{#if !loading}<Fa icon={faArrowsRotate} />{/if}
124
+
{/snippet}
117
125
</PromiseButton>
118
126
119
127
<PromiseButton
···
125
133
params: { path: { project: project.name, service: service.serviceName } },
126
134
})}
127
135
>
128
-
<div class="flexr center gap-10">
129
-
<Fa icon={faStop} />
130
-
</div>
136
+
{#snippet children(loading)}
137
+
{#if !loading}<Fa icon={faStop} />{/if}
138
+
{/snippet}
131
139
</PromiseButton>
132
140
133
141
<PromiseButton
···
138
146
params: { path: { project: project.name, service: service.serviceName } },
139
147
})}
140
148
>
141
-
<div class="flexr center gap-10">
142
-
<Fa icon={faRocket} />
143
-
</div>
149
+
{#snippet children(loading)}
150
+
{#if !loading}<Fa icon={faRocket} />{/if}
151
+
{/snippet}
144
152
</PromiseButton>
145
153
</div>
146
154
</div>