[READ-ONLY] Mirror of https://github.com/improsocial/impro
An extensible Bluesky client for web
impro.social
Update global error state logic
Grace Kind
(May 2, 2026, 3:55 PM -0500)
cc2585ec
803f2f80
+36
-15
+1
-1
package.json
+1
-1
package.json
+33
-12
src/index.html
+33
-12
src/index.html
···
5
5
</head>
6
6
<body>
7
7
<div id="app-root">
8
-
<div id="splash-screen-container" class="splash-screen-container" hidden>
9
-
<div class="splash-screen">
8
+
<div id="app-loading-state" class="app-loading-state" hidden>
9
+
<div class="app-loading-state-content">
10
10
<div class="loading-spinner"></div>
11
11
</div>
12
12
</div>
···
14
14
<div>There was an error loading the app.</div>
15
15
<button onclick="window.location.reload()">Try again</button>
16
16
</div>
17
-
<script>
18
-
setTimeout(() => {
19
-
const errorState = document.getElementById("app-error-state");
20
-
if (errorState && !errorState.hidden) return;
21
-
const splash = document.getElementById("splash-screen-container");
22
-
if (splash) splash.hidden = false;
23
-
}, 2000);
24
-
</script>
25
17
</div>
18
+
19
+
<script>
20
+
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;
25
+
}
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
+
}
36
+
// 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
+
setTimeout(() => {
39
+
if (!globalErrorStateIsShown()) {
40
+
showGlobalLoadingState();
41
+
}
42
+
}, 2000);
43
+
setTimeout(() => {
44
+
showGlobalErrorState();
45
+
}, 10000);
46
+
</script>
26
47
27
48
<script type="module">
28
49
import { enableErrorLogs } from "/js/errorLogs.js";
···
130
151
await dataLayer.initializePreferences();
131
152
} catch (retryError) {
132
153
console.error("Error initializing preferences", retryError);
133
-
document.getElementById("app-error-state").hidden = false;
134
-
document.getElementById("splash-screen-container").hidden = true;
154
+
window.showGlobalErrorState();
155
+
throw retryError;
135
156
}
136
157
}
137
158
+2
-2
src/css/style.css
+2
-2
src/css/style.css
···
6168
6168
display: none;
6169
6169
}
6170
6170
6171
-
.splash-screen {
6171
+
.app-loading-state-content {
6172
6172
display: flex;
6173
6173
flex-direction: column;
6174
6174
align-items: center;
···
6176
6176
height: 100vh;
6177
6177
}
6178
6178
6179
-
.splash-screen .loading-spinner {
6179
+
.app-loading-state-content .loading-spinner {
6180
6180
width: 32px;
6181
6181
height: 32px;
6182
6182
border-width: 3px;