forked from
tokono.ma/diffuse
A music player that connects to your cloud/distributed storage.
chore: build loading animation
+45
-6
+43
-4
src/common/pages/build.js
+43
-4
src/common/pages/build.js
···
23
23
const $editingFacet = signal(/** @type {Facet | null} */ (null));
24
24
25
25
////////////////////////////////////////////
26
+
// LOADING
27
+
////////////////////////////////////////////
28
+
29
+
const LOADING_EL_ID = "editor-loading";
30
+
31
+
/**
32
+
* @param {boolean} loading
33
+
*/
34
+
function setEditorLoading(loading) {
35
+
const container = /** @type {HTMLElement | null} */ (
36
+
document.querySelector("#html-input-container")
37
+
);
38
+
if (!container) return;
39
+
40
+
if (loading) {
41
+
if (document.getElementById(LOADING_EL_ID)) return;
42
+
const el = document.createElement("div");
43
+
el.id = LOADING_EL_ID;
44
+
el.className = "with-icon";
45
+
el.style.fontSize = "var(--fs-sm)";
46
+
el.innerHTML = '<i class="ph-bold ph-spinner animate-spin"></i> Loading…';
47
+
container.before(el);
48
+
container.hidden = true;
49
+
} else {
50
+
document.getElementById(LOADING_EL_ID)?.remove();
51
+
container.hidden = false;
52
+
}
53
+
}
54
+
55
+
////////////////////////////////////////////
26
56
// EDITOR
27
57
////////////////////////////////////////////
28
58
···
152
182
153
183
// Make sure HTML is loaded
154
184
if (!facet.html && facet.uri) {
185
+
setEditorLoading(true);
155
186
const html = await loadURI(facet.uri);
156
187
const cid = await CID.create(0x55, new TextEncoder().encode(html));
188
+
setEditorLoading(false);
157
189
158
190
facet.html = html;
159
191
facet.cid = cid;
···
216
248
217
249
switch (rel) {
218
250
case "edit": {
251
+
setEditorLoading(true);
219
252
const facet = await facetFromURI({ kind, name, uri }, {
220
253
fetchHTML: true,
221
254
});
255
+
setEditorLoading(false);
222
256
editFacet(facet);
223
257
document.querySelector("#build")?.scrollIntoView();
224
258
break;
···
236
270
const idParam = new URLSearchParams(location.search).get("id");
237
271
238
272
if (idParam) {
239
-
const out = await output();
240
-
const col = await Output.data(out.facets);
241
-
const facet = col.find((f) => f.id === idParam);
242
-
if (facet) await editFacet(facet);
273
+
setEditorLoading(true);
274
+
try {
275
+
const out = await output();
276
+
const col = await Output.data(out.facets);
277
+
const facet = col.find((f) => f.id === idParam);
278
+
if (facet) await editFacet(facet);
279
+
} finally {
280
+
setEditorLoading(false);
281
+
}
243
282
}
244
283
}
+1
-1
src/common/pages/dashboard.js
+1
-1
src/common/pages/dashboard.js
+1
-1
src/dashboard.vto
+1
-1
src/dashboard.vto