60 lines
1.4 KiB
TypeScript
60 lines
1.4 KiB
TypeScript
import { TextNote } from "@/components/text";
|
|
import type { NostrEvent } from "@lume/types";
|
|
import { Spinner } from "@lume/ui";
|
|
import { Await, createFileRoute } from "@tanstack/react-router";
|
|
import { defer } from "@tanstack/react-router";
|
|
import { Suspense } from "react";
|
|
import { Virtualizer } from "virtua";
|
|
|
|
export const Route = createFileRoute("/trending/notes")({
|
|
loader: async ({ abortController }) => {
|
|
try {
|
|
return {
|
|
data: defer(
|
|
fetch("https://api.nostr.band/v0/trending/notes", {
|
|
signal: abortController.signal,
|
|
})
|
|
.then((res) => res.json())
|
|
.then((res) => res.notes.map((item) => item.event) as NostrEvent[]),
|
|
),
|
|
};
|
|
} catch (e) {
|
|
throw new Error(String(e));
|
|
}
|
|
},
|
|
component: Screen,
|
|
});
|
|
|
|
export function Screen() {
|
|
const { data } = Route.useLoaderData();
|
|
|
|
return (
|
|
<div className="w-full h-full">
|
|
<Virtualizer overscan={3}>
|
|
<Suspense
|
|
fallback={
|
|
<div className="flex h-20 w-full flex-col items-center justify-center gap-1">
|
|
<button
|
|
type="button"
|
|
className="inline-flex items-center gap-2 text-sm font-medium"
|
|
disabled
|
|
>
|
|
<Spinner className="size-5" />
|
|
Loading...
|
|
</button>
|
|
</div>
|
|
}
|
|
>
|
|
<Await promise={data}>
|
|
{(notes) =>
|
|
notes.map((event) => (
|
|
<TextNote key={event.id} event={event} className="mb-3" />
|
|
))
|
|
}
|
|
</Await>
|
|
</Suspense>
|
|
</Virtualizer>
|
|
</div>
|
|
);
|
|
}
|