reya/lume
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: performance

Browse Source
This commit is contained in:
reya
2024-11-02 13:33:48 +07:00
parent 26a6ec954c
commit a42542c16e
2 changed files with 38 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
src/routes/columns/_layout/discover-newsfeeds.lazy.tsx
View File

@@ -60,9 +60,9 @@ function Screen() {
const renderItem = useCallback( const renderItem = useCallback(
(item: NostrEvent) => { (item: NostrEvent) => {
const users = item.tags.filter((tag) => tag[0] === "p");
const name = const name =
item.tags.find((tag) => tag[0] === "title")?.[1] || "Unnamed"; item.tags.find((tag) => tag[0] === "title")?.[1] || "Unnamed";
const label = item.tags.find((tag) => tag[0] === "d")?.[1] || nanoid(); const label = item.tags.find((tag) => tag[0] === "d")?.[1] || nanoid();
return ( return (
@@ -71,32 +71,24 @@ function Screen() {
className="mb-3 group flex flex-col rounded-xl overflow-hidden bg-white dark:bg-neutral-800/50 shadow-lg shadow-primary dark:ring-1 dark:ring-neutral-800" className="mb-3 group flex flex-col rounded-xl overflow-hidden bg-white dark:bg-neutral-800/50 shadow-lg shadow-primary dark:ring-1 dark:ring-neutral-800"
> >
<div className="px-2 pt-2"> <div className="px-2 pt-2">
<ScrollArea.Root <div className="p-3 h-16 bg-neutral-100 dark:bg-neutral-800 rounded-lg">
type={"scroll"} <div className="flex flex-wrap items-center justify-center gap-2">
scrollHideDelay={300} {users.slice(0, 5).map((tag) => (
className="overflow-hidden size-full" <User.Provider key={tag[1]} pubkey={tag[1]}>
> <User.Root>
<ScrollArea.Viewport className="p-3 h-16 bg-neutral-100 dark:bg-neutral-800 rounded-lg"> <User.Avatar className="size-8 rounded-full" />
<div className="flex flex-wrap items-center justify-center gap-2"> </User.Root>
{item.tags </User.Provider>
.filter((tag) => tag[0] === "p") ))}
.map((tag) => ( {users.length > 5 ? (
<User.Provider key={tag[1]} pubkey={tag[1]}> <div className="size-8 rounded-full inline-flex items-center justify-center bg-neutral-300 dark:bg-neutral-700">
<User.Root> <p className="truncate leading-tight text-[8px] font-medium">
<User.Avatar className="size-8 rounded-full" /> +{users.length - 5}
</User.Root> </p>
</User.Provider> </div>
))} ) : null}
</div> </div>
</ScrollArea.Viewport> </div>
<ScrollArea.Scrollbar
className="flex select-none touch-none p-0.5 duration-[160ms] ease-out data-[orientation=vertical]:w-2"
orientation="vertical"
>
<ScrollArea.Thumb className="flex-1 bg-black/10 dark:bg-white/10 rounded-full relative before:content-[''] before:absolute before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:w-full before:h-full before:min-w-[44px] before:min-h-[44px]" />
</ScrollArea.Scrollbar>
<ScrollArea.Corner className="bg-transparent" />
</ScrollArea.Root>
</div> </div>
<div className="p-2 flex items-center justify-between"> <div className="p-2 flex items-center justify-between">
<div className="inline-flex items-center gap-2"> <div className="inline-flex items-center gap-2">

46
src/routes/columns/_layout/launchpad.$id.lazy.tsx
View File

@@ -62,11 +62,11 @@ function Newsfeeds() {
const renderItem = useCallback( const renderItem = useCallback(
(item: NostrEvent) => { (item: NostrEvent) => {
const users = item.tags.filter((tag) => tag[0] === "p");
const name = const name =
item.kind === 3 item.kind === 3
? "Contacts" ? "Contacts"
: item.tags.find((tag) => tag[0] === "title")?.[1] || "Unnamed"; : item.tags.find((tag) => tag[0] === "title")?.[1] || "Unnamed";
const label = const label =
item.kind === 3 item.kind === 3
? `newsfeed-${id.slice(0, 5)}` ? `newsfeed-${id.slice(0, 5)}`
@@ -78,32 +78,24 @@ function Newsfeeds() {
className="group flex flex-col rounded-xl overflow-hidden bg-white dark:bg-neutral-800/50 shadow-lg shadow-primary dark:ring-1 dark:ring-neutral-800" className="group flex flex-col rounded-xl overflow-hidden bg-white dark:bg-neutral-800/50 shadow-lg shadow-primary dark:ring-1 dark:ring-neutral-800"
> >
<div className="px-2 pt-2"> <div className="px-2 pt-2">
<ScrollArea.Root <div className="p-3 h-16 bg-neutral-100 dark:bg-neutral-800 rounded-lg">
type={"scroll"} <div className="flex flex-wrap items-center justify-center gap-2">
scrollHideDelay={300} {users.slice(0, 5).map((tag) => (
className="overflow-hidden size-full" <User.Provider key={tag[1]} pubkey={tag[1]}>
> <User.Root>
<ScrollArea.Viewport className="p-3 h-16 bg-neutral-100 dark:bg-neutral-800 rounded-lg"> <User.Avatar className="size-8 rounded-full" />
<div className="flex flex-wrap items-center justify-center gap-2"> </User.Root>
{item.tags </User.Provider>
.filter((tag) => tag[0] === "p") ))}
.map((tag) => ( {users.length > 5 ? (
<User.Provider key={tag[1]} pubkey={tag[1]}> <div className="size-8 rounded-full inline-flex items-center justify-center bg-neutral-300 dark:bg-neutral-700">
<User.Root> <p className="truncate leading-tight text-[8px] font-medium">
<User.Avatar className="size-8 rounded-full" /> +{users.length - 5}
</User.Root> </p>
</User.Provider> </div>
))} ) : null}
</div> </div>
</ScrollArea.Viewport> </div>
<ScrollArea.Scrollbar
className="flex select-none touch-none p-0.5 duration-[160ms] ease-out data-[orientation=vertical]:w-2"
orientation="vertical"
>
<ScrollArea.Thumb className="flex-1 bg-black/10 dark:bg-white/10 rounded-full relative before:content-[''] before:absolute before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:w-full before:h-full before:min-w-[44px] before:min-h-[44px]" />
</ScrollArea.Scrollbar>
<ScrollArea.Corner className="bg-transparent" />
</ScrollArea.Root>
</div> </div>
<div className="p-2 flex items-center justify-between"> <div className="p-2 flex items-center justify-between">
<div className="inline-flex items-center gap-2"> <div className="inline-flex items-center gap-2">