nostr/lume
1
0
Fork 0
mirror of https://github.com/luminous-devs/lume.git synced 2024-09-29 16:30:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: small ui improve

Browse Source
This commit is contained in:
reya 2024-05-19 08:48:29 +07:00
parent 82689bf3c3
commit cac774a0c1
2 changed files with 21 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
apps/desktop2/src/components/note/child.tsx
View File

@ -1,6 +1,7 @@
import { useEvent } from "@lume/ark";
import { cn } from "@lume/utils";
import { Note } from ".";
import { InfoIcon } from "@lume/icons";
export function NoteChild({
eventId,
@ -12,11 +13,25 @@ export function NoteChild({
const { isLoading, isError, data } = useEvent(eventId);
if (isLoading) {
return <div>Loading...</div>;
return (
<div className="pt-3 px-3 flex items-center gap-2">
<div className="size-8 shrink-0 rounded-full bg-neutral-200 dark:bg-neutral-800 animate-pulse" />
<div className="animate-pulse rounded-md h-4 w-2/3 bg-neutral-200 dark:bg-neutral-800" />
</div>
);
}
if (isError || !data) {
return <div>Error</div>;
return (
<div className="pt-3 px-3 flex items-center gap-2">
<div className="size-8 shrink-0 rounded-full bg-red-500 text-white inline-flex items-center justify-center">
<InfoIcon className="size-5" />
</div>
<p className="text-red-500 text-sm">
Event not found with your current relay set
</p>
</div>
);
}
return (

7
apps/desktop2/src/components/note/mentions/note.tsx
View File

@ -4,6 +4,7 @@ import { useRouteContext } from "@tanstack/react-router";
import { useTranslation } from "react-i18next";
import { cn } from "@lume/utils";
import { User } from "@/components/user";
import { Spinner } from "@lume/ui";
export function MentionNote({
eventId,
@ -18,15 +19,15 @@ export function MentionNote({
if (isLoading) {
return (
<div className="flex w-full cursor-default items-center justify-between rounded-xl border border-black/10 p-3 dark:border-white/10">
<p>Loading...</p>
<div className="mt-2 w-full flex h-20 items-center justify-center rounded-xl border border-black/10 dark:border-white/10">
<Spinner className="size-5" />
</div>
);
}
if (isError || !data) {
return (
<div className="w-full cursor-default rounded-xl border border-black/10 p-3 dark:border-white/10">
<div className="mt-2 w-full rounded-xl border border-black/10 p-3 dark:border-white/10">
{t("note.error")}
</div>
);