Merge pull request #148 from luminous-devs/feat/improve-perf

Improve overall performance
lumehq · Jan 27, 2024 · d18de93 · d18de93
2 parents 06674df + df15eb7
commit d18de93
Show file tree

Hide file tree

Showing 14 changed files with 178 additions and 271 deletions.
diff --git a/apps/desktop/src/app.css b/apps/desktop/src/app.css
@@ -14,7 +14,7 @@
   }
 
   .shadow-toolbar {
-    box-shadow: 0 0 #0000,0 0 #0000,0 8px 24px 0 rgba(0,0,0,.2),0 2px 8px 0 rgba(0,0,0,.08),inset 0 0 0 1px rgba(0,0,0,.2),inset 0 0 0 2px hsla(0,0%,100%,.14)
+    box-shadow: 0 0 #0000, 0 0 #0000, 0 8px 24px 0 rgba(0, 0, 0, .2), 0 2px 8px 0 rgba(0, 0, 0, .08), inset 0 0 0 1px rgba(0, 0, 0, .2), inset 0 0 0 2px hsla(0, 0%, 100%, .14)
   }
 }
 
@@ -42,3 +42,7 @@ input::-ms-clear {
 .border {
   background-clip: padding-box;
 }
+
+media-controller {
+  @apply w-full;
+}
diff --git a/packages/ark/src/ark.ts b/packages/ark/src/ark.ts
@@ -145,7 +145,6 @@ export class Ark {
 				cacheUsage: NDKSubscriptionCacheUsage.CACHE_FIRST,
 			});
 
-			if (!profile) return null;
 			return profile;
 		} catch {
 			throw new Error("user not found");
@@ -167,8 +166,9 @@ export class Ark {
 				(user) => user.pubkey,
 			);
 
-			if (!pubkey || pubkey === this.account.pubkey)
+			if (!pubkey || pubkey === this.account.pubkey) {
 				this.account.contacts = contacts;
+			}
 
 			return contacts;
 		} catch (e) {

diff --git a/packages/ark/src/components/note/preview/video.tsx b/packages/ark/src/components/note/preview/video.tsx
@@ -5,7 +5,6 @@ import {
 	MediaPlayButton,
 	MediaTimeDisplay,
 	MediaTimeRange,
-	MediaVolumeRange,
 } from "media-chrome/dist/react";
 
 export function VideoPreview({ url }: { url: string }) {
@@ -24,7 +23,6 @@ export function VideoPreview({ url }: { url: string }) {
 					<MediaTimeRange />
 					<MediaTimeDisplay showDuration />
 					<MediaMuteButton />
-					<MediaVolumeRange />
 				</MediaControlBar>
 			</MediaController>
 		</div>

diff --git a/packages/ark/src/components/user/avatar.tsx b/packages/ark/src/components/user/avatar.tsx
@@ -39,15 +39,18 @@ export function UserAvatar({ className }: { className?: string }) {
 					alt={user.pubkey}
 					loading="eager"
 					decoding="async"
-					className={cn("bg-black dark:bg-white", className)}
+					className={cn(
+						"bg-black dark:bg-white ring-1 ring-black/5 dark:ring-white/5",
+						className,
+					)}
 				/>
 			) : (
 				<Avatar.Image
 					src={user.image}
 					alt={user.pubkey}
 					loading="eager"
 					decoding="async"
-					className={className}
+					className={cn("ring-1 ring-black/5 dark:ring-white/5", className)}
 				/>
 			)}
 			<Avatar.Fallback delayMs={120}>

diff --git a/packages/ark/src/components/user/followButton.tsx b/packages/ark/src/components/user/followButton.tsx
@@ -13,13 +13,15 @@ export function UserFollowButton({
 	const [followed, setFollowed] = useState(false);
 
 	const toggleFollow = async () => {
+		setLoading(true);
 		if (!followed) {
 			const add = await ark.createContact(target);
 			if (add) setFollowed(true);
 		} else {
 			const remove = await ark.deleteContact(target);
 			if (remove) setFollowed(false);
 		}
+		setLoading(false);
 	};
 
 	useEffect(() => {
@@ -37,7 +39,12 @@ export function UserFollowButton({
 	}, []);
 
 	return (
-		<button type="button" onClick={toggleFollow} className={cn("", className)}>
+		<button
+			type="button"
+			disabled={loading}
+			onClick={toggleFollow}
+			className={cn("", className)}
+		>
 			{loading ? (
 				<LoaderIcon className="size-4 animate-spin" />
 			) : followed ? (

diff --git a/packages/ark/src/components/user/name.tsx b/packages/ark/src/components/user/name.tsx
@@ -8,7 +8,7 @@ export function UserName({ className }: { className?: string }) {
 		return (
 			<div
 				className={cn(
-					"h-4 w-20 bg-black/20 dark:bg-white/20 rounded animate-pulse",
+					"h-4 w-20 self-center bg-black/20 dark:bg-white/20 rounded animate-pulse",
 					className,
 				)}
 			/>

diff --git a/packages/ark/src/hooks/useProfile.ts b/packages/ark/src/hooks/useProfile.ts
@@ -1,8 +1,10 @@
-import { useQuery } from "@tanstack/react-query";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { useArk } from "./useArk";
 
 export function useProfile(pubkey: string) {
 	const ark = useArk();
+	const queryClient = useQueryClient();
+
 	const {
 		isLoading,
 		isError,
@@ -17,6 +19,9 @@ export function useProfile(pubkey: string) {
 				);
 			return profile;
 		},
+		initialData: () => {
+			return queryClient.getQueryData(["user", pubkey]);
+		},
 		refetchOnMount: false,
 		refetchOnWindowFocus: false,
 		refetchOnReconnect: false,