[READ-ONLY] Mirror of https://github.com/improsocial/impro
An extensible Bluesky client for web
impro.social
Update global loading and error states
Grace Kind
(Jun 8, 2026, 10:37 PM -0500)
38c47ae5
ad6a3883
+42
-33
+1
-1
package.json
+1
-1
package.json
+41
-32
src/index.html
+41
-32
src/index.html
···
4
4
{% include "head.html" %}
5
5
</head>
6
6
<body>
7
-
<div id="app-root">
8
-
<div id="app-loading-state" class="app-loading-state" hidden>
9
-
<div class="app-loading-state-content">
10
-
<div class="loading-spinner"></div>
11
-
</div>
12
-
</div>
13
-
<div class="error-state app-error-state" id="app-error-state" hidden>
14
-
<div>There was an error loading the app.</div>
15
-
<button onclick="window.location.reload()">Try again</button>
16
-
</div>
17
-
</div>
7
+
<div id="app-root"></div>
18
8
19
9
<script>
10
+
window.hasLoaded = false;
11
+
window.hasErrored = false;
12
+
13
+
const appRoot = document.getElementById("app-root");
14
+
15
+
function showGlobalLoadingState() {
16
+
appRoot.innerHTML = /* html */ `
17
+
<div class="app-loading-state">
18
+
<div class="app-loading-state-content">
19
+
<div class="loading-spinner"></div>
20
+
</div>
21
+
</div>
22
+
`;
23
+
}
24
+
20
25
function showGlobalErrorState() {
21
-
const errorState = document.getElementById("app-error-state");
22
-
if (errorState) errorState.hidden = false;
23
-
const loadingState = document.getElementById("app-loading-state");
24
-
if (loadingState) loadingState.hidden = true;
26
+
appRoot.innerHTML = /* html */ `
27
+
<div class="error-state app-error-state">
28
+
<div>There was an error loading the app.</div>
29
+
<button onclick="window.location.reload()">Try again</button>
30
+
</div>
31
+
`;
25
32
}
26
-
function globalErrorStateIsShown() {
27
-
const errorState = document.getElementById("app-error-state");
28
-
return errorState && !errorState.hidden;
29
-
}
30
-
function showGlobalLoadingState() {
31
-
const errorState = document.getElementById("app-error-state");
32
-
if (errorState) errorState.hidden = true;
33
-
const loadingState = document.getElementById("app-loading-state");
34
-
if (loadingState) loadingState.hidden = false;
35
-
}
33
+
36
34
// Show loading state if the app hasn't loaded within 2 seconds, and show an error state if it hasn't loaded within 10 seconds.
37
-
// If the app loads successfully, the elements are replaced, so these timeouts won't do anything.
38
35
setTimeout(() => {
39
-
if (!globalErrorStateIsShown()) {
40
-
showGlobalLoadingState();
36
+
if (window.hasLoaded || window.hasErrored) {
37
+
return;
41
38
}
39
+
showGlobalLoadingState();
42
40
}, 2000);
41
+
43
42
setTimeout(() => {
43
+
if (window.hasLoaded || window.hasErrored) {
44
+
return;
45
+
}
46
+
window.hasErrored = true;
44
47
showGlobalErrorState();
45
48
}, 10000);
46
49
</script>
···
409
412
dispatchNativeRefreshEnded();
410
413
}
411
414
412
-
main().catch((error) => {
413
-
console.error("Error in main function:", error);
414
-
window.showGlobalErrorState();
415
-
});
415
+
main().then(
416
+
() => {
417
+
window.hasLoaded = true;
418
+
},
419
+
(error) => {
420
+
console.error("Error in main function:", error);
421
+
window.hasErrored = true;
422
+
window.showGlobalErrorState();
423
+
},
424
+
);
416
425
</script>
417
426
</body>
418
427
</html>