forked from
tokono.ma/diffuse
A music player that connects to your cloud/distributed storage.
chore: dashboard nav loading anim
+42
-9
+33
src/common/pages/ppr.js
+33
src/common/pages/ppr.js
···
86
86
event.intercept({
87
87
scroll: "manual",
88
88
async handler() {
89
+
const navLinks = /** @type {HTMLAnchorElement[]} */ ([
90
+
...document.querySelectorAll("#diffuse-nav a, #nav-overflow-menu a"),
91
+
]);
92
+
const stripSlash = (/** @type {string} */ p) => p.replace(/^\//, "");
93
+
const navLink = navLinks.find(
94
+
(a) =>
95
+
stripSlash(new URL(a.href).pathname) === stripSlash(url.pathname),
96
+
);
97
+
98
+
const icon = navLink?.querySelector("i");
99
+
const originalIconClass = icon?.className;
100
+
let addedSpinner = /** @type {HTMLElement | undefined} */ (undefined);
101
+
102
+
const loadingTimer = navLink
103
+
? setTimeout(() => {
104
+
if (icon) {
105
+
icon.className = "ph-bold ph-spinner animate-spin";
106
+
} else {
107
+
addedSpinner = document.createElement("i");
108
+
addedSpinner.className = "ph-bold ph-spinner animate-spin";
109
+
const span = navLink.querySelector("span");
110
+
(span ?? navLink).prepend(addedSpinner);
111
+
}
112
+
}, 250)
113
+
: undefined;
114
+
89
115
let html;
90
116
91
117
try {
···
93
119
if (!response.ok) throw new Error(`${response.status}`);
94
120
html = await response.text();
95
121
} catch {
122
+
clearTimeout(loadingTimer);
123
+
if (icon && originalIconClass !== undefined) icon.className = originalIconClass;
124
+
addedSpinner?.remove();
96
125
location.href = url.href;
97
126
return;
127
+
} finally {
128
+
clearTimeout(loadingTimer);
129
+
if (icon && originalIconClass !== undefined) icon.className = originalIconClass;
130
+
addedSpinner?.remove();
98
131
}
99
132
100
133
const parser = new DOMParser();