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

add skeleton state

Browse Source
This commit is contained in:
Ren Amamiya
2023-05-06 16:09:16 +07:00
parent 77e56b3dd4
commit 417df1796d
12 changed files with 111 additions and 207 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
src/app/note/components/parent.tsx
View File

@@ -6,6 +6,7 @@ import { READONLY_RELAYS } from '@lume/stores/constants';
import { noteParser } from '@lume/utils/parser';
import { memo, useContext } from 'react';
import Skeleton from 'react-loading-skeleton';
import useSWRSubscription from 'swr/subscription';
export const NoteParent = memo(function NoteParent({ id }: { id: string }) {
@@ -38,44 +39,20 @@ export const NoteParent = memo(function NoteParent({ id }: { id: string }) {
return (
<div className="relative pb-5">
{error && <div>failed to load</div>}
{!data ? (
<>
<div className="absolute left-[21px] top-0 h-full w-0.5 bg-gradient-to-t from-zinc-800 to-zinc-600"></div>
<div className="animated-pulse relative z-10">
<div className="flex items-start gap-2">
<div className="relative h-11 w-11 shrink overflow-hidden rounded-md bg-zinc-700" />
<div className="flex w-full flex-1 items-start justify-between">
<div className="flex w-full items-center justify-between">
<div className="flex items-center gap-2 text-sm">
<div className="h-4 w-16 rounded bg-zinc-700" />
</div>
</div>
</div>
</div>
<div className="-mt-5 pl-[52px]">
<div className="flex flex-col gap-6">
<div className="h-16 w-full rounded bg-zinc-700" />
<div className="flex items-center gap-8">
<div className="h-4 w-12 rounded bg-zinc-700" />
<div className="h-4 w-12 rounded bg-zinc-700" />
</div>
</div>
</div>
</div>
</>
) : (
<>
<div className="absolute left-[21px] top-0 h-full w-0.5 bg-gradient-to-t from-zinc-800 to-zinc-600"></div>
<div className="relative z-10 flex flex-col">
<div className="absolute left-[21px] top-0 h-full w-0.5 bg-gradient-to-t from-zinc-800 to-zinc-600"></div>
<div className="relative z-10 flex flex-col">
{data ? (
<>
<NoteDefaultUser pubkey={data.pubkey} time={data.created_at} />
<div className="mt-1 pl-[52px]">
<NoteContent content={content} />
<NoteMetadata id={data.id} eventPubkey={data.pubkey} />
</div>
</div>
</>
)}
</>
) : (
<Skeleton baseColor="#27272a" containerClassName="flex-1" />
)}
</div>
</div>
);
});