An easy-to-host PDS on the ATProtocol, MacOS. Grandma-approved.
feat(identity-wallet): add LoadingScreen component
authored by
Tangled
a6758653
92b56ed7
+43
+43
apps/identity-wallet/src/lib/components/onboarding/LoadingScreen.svelte
+43
apps/identity-wallet/src/lib/components/onboarding/LoadingScreen.svelte
···
1
+
<script lang="ts">
2
+
let {
3
+
statusText = 'Creating your account…',
4
+
}: {
5
+
statusText?: string;
6
+
} = $props();
7
+
</script>
8
+
9
+
<div class="screen">
10
+
<div class="spinner" aria-label="Loading"></div>
11
+
<p class="status">{statusText}</p>
12
+
</div>
13
+
14
+
<style>
15
+
.screen {
16
+
display: flex;
17
+
flex-direction: column;
18
+
align-items: center;
19
+
justify-content: center;
20
+
height: 100%;
21
+
gap: 1.5rem;
22
+
}
23
+
24
+
.spinner {
25
+
width: 48px;
26
+
height: 48px;
27
+
border: 4px solid #e5e7eb;
28
+
border-top-color: #007aff;
29
+
border-radius: 50%;
30
+
animation: spin 0.8s linear infinite;
31
+
}
32
+
33
+
@keyframes spin {
34
+
to { transform: rotate(360deg); }
35
+
}
36
+
37
+
.status {
38
+
font-size: 1rem;
39
+
color: #6b7280;
40
+
margin: 0;
41
+
text-align: center;
42
+
}
43
+
</style>