finxol.io
A very simple bookmarking webapp
bookmarker.finxol.deno.net/
fix: add loading indicator
+15
-3
src/routes/__root.tsx
+15
-3
src/routes/__root.tsx
···
1
1
import { createRootRoute, Outlet } from "@tanstack/solid-router"
2
2
import { Link } from "@tanstack/solid-router"
3
-
import { BookmarkIcon, CircleUserRoundIcon, LogInIcon } from "lucide-solid"
3
+
import {
4
+
BookmarkIcon,
5
+
CircleUserRoundIcon,
6
+
LoaderIcon,
7
+
LogInIcon,
8
+
} from "lucide-solid"
4
9
import { Show } from "solid-js"
5
10
import "./main.css"
6
11
import "./root.css"
···
18
23
19
24
return (
20
25
<main>
21
-
{!query.isPending &&
22
-
(query.data ? <Outlet /> : <LoggedOutPage />)}
26
+
<div>
27
+
{!query.isPending
28
+
? (query.data ? <Outlet /> : <LoggedOutPage />)
29
+
: (
30
+
<div class="loading">
31
+
<LoaderIcon class="spinner" />
32
+
</div>
33
+
)}
34
+
</div>
23
35
24
36
<BottomNav />
25
37
+4
-53
src/routes/root.css
+4
-53
src/routes/root.css
···
6
6
min-height: 100svh;
7
7
font-family: var(--font-sans);
8
8
9
-
header {
9
+
.loading {
10
10
display: flex;
11
-
justify-content: space-between;
11
+
flex-direction: column;
12
12
align-items: center;
13
-
padding: calc(var(--spacing) * 1.25) calc(var(--spacing) * 2.5);
14
-
background: oklch(from var(--page-bg) 0.8 c h / 0.1);
15
-
border-bottom: 1px solid oklch(from var(--primary-text) l c h / 0.08);
16
-
box-shadow: 0 1px 3px oklch(from var(--primary-text) l c h / 0.04);
17
-
18
-
nav {
19
-
display: flex;
20
-
align-items: center;
21
-
gap: calc(var(--spacing) * 2);
22
-
23
-
a {
24
-
text-decoration: none;
25
-
transition: color 0.15s ease;
26
-
27
-
&:first-child {
28
-
font-size: 1.1rem;
29
-
font-weight: 700;
30
-
color: var(--primary-text);
31
-
letter-spacing: -0.02em;
32
-
line-height: unset;
33
-
display: flex;
34
-
align-items: center;
35
-
gap: 0.5rem;
36
-
margin-inline-end: var(--spacing);
37
-
}
38
-
39
-
&:not(:first-child) {
40
-
font-size: 0.875rem;
41
-
font-weight: 500;
42
-
color: oklch(from var(--primary-text) l c h / 0.9);
43
-
}
44
-
}
45
-
}
46
-
47
-
& > div {
48
-
display: flex;
49
-
align-items: center;
50
-
gap: var(--spacing);
51
-
52
-
img {
53
-
--size: 2.25rem;
54
-
border-radius: 50%;
55
-
object-fit: cover;
56
-
border: 2px solid oklch(from var(--primary) l c h / 0.2);
57
-
transition: border-color 0.15s ease;
58
-
59
-
&:hover {
60
-
border-color: var(--primary);
61
-
}
62
-
}
63
-
}
13
+
justify-content: center;
14
+
gap: var(--spacing);
64
15
}
65
16
66
17
footer {