mirror of
https://github.com/luminous-devs/lume.git
synced 2024-09-18 11:13:30 +00:00
optimized loading feed content
This commit is contained in:
parent
5210aa2fb8
commit
fd66fde0e0
@ -7,7 +7,7 @@ import MoreIcon from '@assets/icons/More';
|
|||||||
|
|
||||||
import Avatar from 'boring-avatars';
|
import Avatar from 'boring-avatars';
|
||||||
import { useNostrEvents } from 'nostr-react';
|
import { useNostrEvents } from 'nostr-react';
|
||||||
import { memo, useState } from 'react';
|
import { memo, useEffect, useState } from 'react';
|
||||||
import Moment from 'react-moment';
|
import Moment from 'react-moment';
|
||||||
import Database from 'tauri-plugin-sql-api';
|
import Database from 'tauri-plugin-sql-api';
|
||||||
|
|
||||||
@ -26,19 +26,39 @@ export const User = memo(function User({ pubkey, time }: { pubkey: string; time:
|
|||||||
onEvent(async (rawMetadata) => {
|
onEvent(async (rawMetadata) => {
|
||||||
try {
|
try {
|
||||||
const metadata: any = JSON.parse(rawMetadata.content);
|
const metadata: any = JSON.parse(rawMetadata.content);
|
||||||
if (metadata) {
|
if (profile.picture === null || profile.name === null) {
|
||||||
setProfile(metadata);
|
setProfile(metadata);
|
||||||
await db.execute(
|
await db.execute(
|
||||||
`INSERT INTO cache_profiles (pubkey, metadata) VALUES ("${pubkey}", '${JSON.stringify(
|
`INSERT OR IGNORE INTO cache_profiles (pubkey, metadata) VALUES ("${pubkey}", '${JSON.stringify(
|
||||||
metadata
|
metadata
|
||||||
)}')`
|
)}')`
|
||||||
);
|
);
|
||||||
|
} else {
|
||||||
|
return;
|
||||||
}
|
}
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
console.error(err, rawMetadata);
|
console.error(err, rawMetadata);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const initialProfile = async () => {
|
||||||
|
const result: any = await db.select(
|
||||||
|
`SELECT metadata FROM cache_profiles WHERE pubkey = "${pubkey}"`
|
||||||
|
);
|
||||||
|
db.close;
|
||||||
|
return result;
|
||||||
|
};
|
||||||
|
|
||||||
|
initialProfile()
|
||||||
|
.then((res) => {
|
||||||
|
if (res[0] !== undefined) {
|
||||||
|
setProfile(JSON.parse(res[0].metadata));
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(console.error);
|
||||||
|
}, [pubkey]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="relative flex items-start gap-4">
|
<div className="relative flex items-start gap-4">
|
||||||
<div className="relative h-11 w-11 shrink overflow-hidden rounded-full border border-white/10">
|
<div className="relative h-11 w-11 shrink overflow-hidden rounded-full border border-white/10">
|
||||||
|
@ -8,6 +8,7 @@ import ReactPlayer from 'react-player';
|
|||||||
|
|
||||||
const MarkdownPreview = dynamic(() => import('@uiw/react-markdown-preview'), {
|
const MarkdownPreview = dynamic(() => import('@uiw/react-markdown-preview'), {
|
||||||
ssr: false,
|
ssr: false,
|
||||||
|
loading: () => <div className="h-4 w-36 animate-pulse rounded bg-zinc-700" />,
|
||||||
});
|
});
|
||||||
|
|
||||||
export default function Content({ data }: { data: any }) {
|
export default function Content({ data }: { data: any }) {
|
||||||
|
@ -2,23 +2,14 @@ import Reaction from '@components/note/atoms/reaction';
|
|||||||
import Reply from '@components/note/atoms/reply';
|
import Reply from '@components/note/atoms/reply';
|
||||||
import RootUser from '@components/note/atoms/rootUser';
|
import RootUser from '@components/note/atoms/rootUser';
|
||||||
import { User } from '@components/note/atoms/user';
|
import { User } from '@components/note/atoms/user';
|
||||||
|
import Content from '@components/note/content';
|
||||||
import { Placeholder } from '@components/note/placeholder';
|
import { Placeholder } from '@components/note/placeholder';
|
||||||
|
|
||||||
import LikeSolidIcon from '@assets/icons/LikeSolid';
|
import LikeSolidIcon from '@assets/icons/LikeSolid';
|
||||||
|
|
||||||
import dynamic from 'next/dynamic';
|
|
||||||
import { useNostrEvents } from 'nostr-react';
|
import { useNostrEvents } from 'nostr-react';
|
||||||
import { memo } from 'react';
|
import { memo } from 'react';
|
||||||
|
|
||||||
const DynamicContent = dynamic(() => import('@components/note/content'), {
|
|
||||||
ssr: false,
|
|
||||||
loading: () => (
|
|
||||||
<>
|
|
||||||
<p>Loading...</p>
|
|
||||||
</>
|
|
||||||
),
|
|
||||||
});
|
|
||||||
|
|
||||||
export const Liked = memo(function Liked({
|
export const Liked = memo(function Liked({
|
||||||
eventUser,
|
eventUser,
|
||||||
sourceID,
|
sourceID,
|
||||||
@ -48,7 +39,7 @@ export const Liked = memo(function Liked({
|
|||||||
<User pubkey={events[0].pubkey} time={events[0].created_at} />
|
<User pubkey={events[0].pubkey} time={events[0].created_at} />
|
||||||
<div className="-mt-4 pl-[60px]">
|
<div className="-mt-4 pl-[60px]">
|
||||||
<div className="flex flex-col gap-2">
|
<div className="flex flex-col gap-2">
|
||||||
<DynamicContent data={events[0].content} />
|
<Content data={events[0].content} />
|
||||||
<div className="-ml-1 flex items-center gap-8">
|
<div className="-ml-1 flex items-center gap-8">
|
||||||
<Reply eventID={events[0].id} />
|
<Reply eventID={events[0].id} />
|
||||||
<Reaction eventID={events[0].id} eventPubkey={events[0].pubkey} />
|
<Reaction eventID={events[0].id} eventPubkey={events[0].pubkey} />
|
||||||
|
@ -1,20 +1,11 @@
|
|||||||
import Reaction from '@components/note/atoms/reaction';
|
import Reaction from '@components/note/atoms/reaction';
|
||||||
import Reply from '@components/note/atoms/reply';
|
import Reply from '@components/note/atoms/reply';
|
||||||
import { User } from '@components/note/atoms/user';
|
import { User } from '@components/note/atoms/user';
|
||||||
|
import Content from '@components/note/content';
|
||||||
import { Placeholder } from '@components/note/placeholder';
|
import { Placeholder } from '@components/note/placeholder';
|
||||||
|
|
||||||
import dynamic from 'next/dynamic';
|
|
||||||
import { useNostrEvents } from 'nostr-react';
|
import { useNostrEvents } from 'nostr-react';
|
||||||
|
|
||||||
const DynamicContent = dynamic(() => import('@components/note/content'), {
|
|
||||||
ssr: false,
|
|
||||||
loading: () => (
|
|
||||||
<>
|
|
||||||
<p>Loading...</p>
|
|
||||||
</>
|
|
||||||
),
|
|
||||||
});
|
|
||||||
|
|
||||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||||
export function Multi({ event }: { event: any }) {
|
export function Multi({ event }: { event: any }) {
|
||||||
const tags = event.tags;
|
const tags = event.tags;
|
||||||
@ -36,7 +27,7 @@ export function Multi({ event }: { event: any }) {
|
|||||||
<User pubkey={events[0].pubkey} time={events[0].created_at} />
|
<User pubkey={events[0].pubkey} time={events[0].created_at} />
|
||||||
<div className="-mt-4 pl-[60px]">
|
<div className="-mt-4 pl-[60px]">
|
||||||
<div className="flex flex-col gap-2">
|
<div className="flex flex-col gap-2">
|
||||||
<DynamicContent data={events[0].content} />
|
<Content data={events[0].content} />
|
||||||
<div className="-ml-1 flex items-center gap-8">
|
<div className="-ml-1 flex items-center gap-8">
|
||||||
<Reply eventID={events[0].id} />
|
<Reply eventID={events[0].id} />
|
||||||
<Reaction eventID={events[0].id} eventPubkey={events[0].pubkey} />
|
<Reaction eventID={events[0].id} eventPubkey={events[0].pubkey} />
|
||||||
@ -48,7 +39,7 @@ export function Multi({ event }: { event: any }) {
|
|||||||
<User pubkey={event.pubkey} time={event.created_at} />
|
<User pubkey={event.pubkey} time={event.created_at} />
|
||||||
<div className="relative z-10 -mt-4 pl-[60px]">
|
<div className="relative z-10 -mt-4 pl-[60px]">
|
||||||
<div className="flex flex-col gap-2">
|
<div className="flex flex-col gap-2">
|
||||||
<DynamicContent data={event.content} />
|
<Content data={event.content} />
|
||||||
<div className="-ml-1 flex items-center gap-8">
|
<div className="-ml-1 flex items-center gap-8">
|
||||||
<Reply eventID={event.id} />
|
<Reply eventID={event.id} />
|
||||||
<Reaction eventID={event.id} eventPubkey={event.pubkey} />
|
<Reaction eventID={event.id} eventPubkey={event.pubkey} />
|
||||||
|
@ -2,23 +2,14 @@ import Reaction from '@components/note/atoms/reaction';
|
|||||||
import Reply from '@components/note/atoms/reply';
|
import Reply from '@components/note/atoms/reply';
|
||||||
import RootUser from '@components/note/atoms/rootUser';
|
import RootUser from '@components/note/atoms/rootUser';
|
||||||
import { User } from '@components/note/atoms/user';
|
import { User } from '@components/note/atoms/user';
|
||||||
|
import Content from '@components/note/content';
|
||||||
import { Placeholder } from '@components/note/placeholder';
|
import { Placeholder } from '@components/note/placeholder';
|
||||||
|
|
||||||
import RepostIcon from '@assets/icons/Repost';
|
import RepostIcon from '@assets/icons/Repost';
|
||||||
|
|
||||||
import dynamic from 'next/dynamic';
|
|
||||||
import { useNostrEvents } from 'nostr-react';
|
import { useNostrEvents } from 'nostr-react';
|
||||||
import { memo } from 'react';
|
import { memo } from 'react';
|
||||||
|
|
||||||
const DynamicContent = dynamic(() => import('@components/note/content'), {
|
|
||||||
ssr: false,
|
|
||||||
loading: () => (
|
|
||||||
<>
|
|
||||||
<p>Loading...</p>
|
|
||||||
</>
|
|
||||||
),
|
|
||||||
});
|
|
||||||
|
|
||||||
export const Repost = memo(function Repost({
|
export const Repost = memo(function Repost({
|
||||||
eventUser,
|
eventUser,
|
||||||
sourceID,
|
sourceID,
|
||||||
@ -48,7 +39,7 @@ export const Repost = memo(function Repost({
|
|||||||
<User pubkey={events[0].pubkey} time={events[0].created_at} />
|
<User pubkey={events[0].pubkey} time={events[0].created_at} />
|
||||||
<div className="-mt-4 pl-[60px]">
|
<div className="-mt-4 pl-[60px]">
|
||||||
<div className="flex flex-col gap-2">
|
<div className="flex flex-col gap-2">
|
||||||
<DynamicContent data={events[0].content} />
|
<Content data={events[0].content} />
|
||||||
<div className="-ml-1 flex items-center gap-8">
|
<div className="-ml-1 flex items-center gap-8">
|
||||||
<Reply eventID={events[0].id} />
|
<Reply eventID={events[0].id} />
|
||||||
<Reaction eventID={events[0].id} eventPubkey={events[0].pubkey} />
|
<Reaction eventID={events[0].id} eventPubkey={events[0].pubkey} />
|
||||||
|
@ -2,20 +2,11 @@
|
|||||||
import Reaction from '@components/note/atoms/reaction';
|
import Reaction from '@components/note/atoms/reaction';
|
||||||
import Reply from '@components/note/atoms/reply';
|
import Reply from '@components/note/atoms/reply';
|
||||||
import { User } from '@components/note/atoms/user';
|
import { User } from '@components/note/atoms/user';
|
||||||
|
import Content from '@components/note/content';
|
||||||
|
|
||||||
import dynamic from 'next/dynamic';
|
|
||||||
import { useRouter } from 'next/router';
|
import { useRouter } from 'next/router';
|
||||||
import { memo } from 'react';
|
import { memo } from 'react';
|
||||||
|
|
||||||
const DynamicContent = dynamic(() => import('@components/note/content'), {
|
|
||||||
ssr: false,
|
|
||||||
loading: () => (
|
|
||||||
<>
|
|
||||||
<p>Loading...</p>
|
|
||||||
</>
|
|
||||||
),
|
|
||||||
});
|
|
||||||
|
|
||||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||||
export const Single = memo(function Single({ event }: { event: any }) {
|
export const Single = memo(function Single({ event }: { event: any }) {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
@ -32,7 +23,7 @@ export const Single = memo(function Single({ event }: { event: any }) {
|
|||||||
<User pubkey={event.pubkey} time={event.created_at} />
|
<User pubkey={event.pubkey} time={event.created_at} />
|
||||||
<div className="-mt-4 pl-[60px]">
|
<div className="-mt-4 pl-[60px]">
|
||||||
<div className="flex flex-col gap-6">
|
<div className="flex flex-col gap-6">
|
||||||
<DynamicContent data={event.content} />
|
<Content data={event.content} />
|
||||||
<div className="relative z-10 -ml-1 flex items-center gap-8">
|
<div className="relative z-10 -ml-1 flex items-center gap-8">
|
||||||
<Reply eventID={event.id} />
|
<Reply eventID={event.id} />
|
||||||
<Reaction eventID={event.id} eventPubkey={event.pubkey} />
|
<Reaction eventID={event.id} eventPubkey={event.pubkey} />
|
||||||
|
Loading…
Reference in New Issue
Block a user