Exosphere is a set of small, modular, self-hostable community tools built on the AT Protocol.
app.exosphere.site
feaat: show loading state on signin
+4
-2
+4
-2
packages/app/src/pages/sign-in.tsx
+4
-2
packages/app/src/pages/sign-in.tsx
···
4
4
export function SignIn() {
5
5
const handle = useSignal("");
6
6
const error = useSignal("");
7
+
const loading = useSignal(false);
7
8
8
9
const submit = (e: Event) => {
9
10
e.preventDefault();
···
12
13
error.value = "Please enter your handle.";
13
14
return;
14
15
}
16
+
loading.value = true;
15
17
// Full page redirect to initiate OAuth flow
16
18
window.location.href = `/api/oauth/login?handle=${encodeURIComponent(value)}`;
17
19
};
···
42
44
43
45
{error.value && <p class={ui.errorText}>{error.value}</p>}
44
46
45
-
<button type="submit" class={ui.button}>
46
-
Sign in
47
+
<button type="submit" class={ui.button} disabled={loading.value}>
48
+
{loading.value ? "Signing in…" : "Sign in"}
47
49
</button>
48
50
</form>
49
51
</div>