danabra.mov
forked from
slices.network/slices
Highly ambitious ATProtocol AppView service and sdks
chadtmiller.com
improve waitlist ui with search and load more, update getActors in api to support same where as getRecords
1import type { JSX } from "preact";
2import { Button } from "./Button.tsx";
3
4interface LoadMoreProps {
5 nextUrl?: string;
6 loading?: boolean;
7}
8
9export function LoadMore({ nextUrl, loading = false }: LoadMoreProps): JSX.Element | null {
10 if (!nextUrl) {
11 return null;
12 }
13
14 return (
15 <div className="load-more-container text-center py-4 border-t border-zinc-200 dark:border-zinc-700">
16 <Button
17 variant="outline"
18 size="md"
19 disabled={loading}
20 hx-get={nextUrl.replace("/waitlist?", "/waitlist/load-more?")}
21 hx-target="closest .load-more-container"
22 hx-swap="outerHTML"
23 hx-on="htmx:beforeRequest: this.disabled = true; this.textContent = 'Loading...';"
24 >
25 {loading ? "Loading..." : "Load More"}
26 </Button>
27 </div>
28 );
29}