vielle.dev
forked from
pds.ls/pdsls
atproto explorer
load more button fixed position
juliet.paris
+15
-9
+9
-5
src/views/blob.tsx
+9
-5
src/views/blob.tsx
···
47
47
</For>
48
48
</div>
49
49
</Show>
50
-
<Show when={cursor() && !response.loading}>
51
-
<Button onClick={() => refetch()}>Load More</Button>
52
-
</Show>
53
-
<Show when={response.loading}>
54
-
<span class="iconify lucide--loader-circle mt-2 animate-spin text-xl"></span>
50
+
<Show when={cursor()}>
51
+
<div class="dark:bg-dark-500/70 fixed bottom-0 z-5 flex w-screen justify-center bg-neutral-100/70 py-3 backdrop-blur-xs">
52
+
<Show when={!response.loading}>
53
+
<Button onClick={() => refetch()}>Load More</Button>
54
+
</Show>
55
+
<Show when={response.loading}>
56
+
<span class="iconify lucide--loader-circle animate-spin py-3.5 text-xl"></span>
57
+
</Show>
58
+
</div>
55
59
</Show>
56
60
</div>
57
61
);
+6
-4
src/views/pds.tsx
+6
-4
src/views/pds.tsx
···
110
110
</A>
111
111
)}
112
112
</For>
113
-
<div class="mt-2 flex w-full justify-center">
114
-
<Show when={cursor() && !response.loading}>
113
+
</div>
114
+
<Show when={cursor()}>
115
+
<div class="dark:bg-dark-500/70 fixed bottom-0 z-5 flex w-screen justify-center bg-neutral-100/70 py-3 backdrop-blur-xs">
116
+
<Show when={!response.loading}>
115
117
<Button onClick={() => refetch()}>Load More</Button>
116
118
</Show>
117
119
<Show when={response.loading}>
118
-
<span class="iconify lucide--loader-circle animate-spin text-xl"></span>
120
+
<span class="iconify lucide--loader-circle animate-spin py-3.5 text-xl"></span>
119
121
</Show>
120
122
</div>
121
-
</div>
123
+
</Show>
122
124
</Show>
123
125
);
124
126
};