From cac774a0c1abd2bf8f93e2bd06c13c9a5ff50513 Mon Sep 17 00:00:00 2001
From: reya <123083837+reyamir@users.noreply.github.com>
Date: Sun, 19 May 2024 08:48:29 +0700
Subject: [PATCH] feat: small ui improve

---
 apps/desktop2/src/components/note/child.tsx   | 19 +++++++++++++++++--
 .../src/components/note/mentions/note.tsx     |  7 ++++---
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/apps/desktop2/src/components/note/child.tsx b/apps/desktop2/src/components/note/child.tsx
index 6f43f5e8..7660d109 100644
--- a/apps/desktop2/src/components/note/child.tsx
+++ b/apps/desktop2/src/components/note/child.tsx
@@ -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 (
diff --git a/apps/desktop2/src/components/note/mentions/note.tsx b/apps/desktop2/src/components/note/mentions/note.tsx
index 161e6e0c..632cb6ef 100644
--- a/apps/desktop2/src/components/note/mentions/note.tsx
+++ b/apps/desktop2/src/components/note/mentions/note.tsx
@@ -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>
 		);