From 417df1796d00e57f663c19cb8d0d5ef502b984ce Mon Sep 17 00:00:00 2001 From: Ren Amamiya <123083837+reyamir@users.noreply.github.com> Date: Sat, 6 May 2023 16:09:16 +0700 Subject: [PATCH] add skeleton state --- package.json | 1 + pnpm-lock.yaml | 12 ++++++ src/app/daily/pages/index.page.tsx | 12 ++++-- src/app/note/components/parent.tsx | 43 +++++-------------- src/app/note/components/placeholder.tsx | 25 ----------- src/app/note/components/quote.tsx | 24 ++++++----- src/app/note/components/rootNote.tsx | 36 ++++------------ src/app/note/components/user/default.tsx | 54 +++++++++--------------- src/app/note/components/user/mention.tsx | 12 +----- src/app/note/components/user/reply.tsx | 47 ++++++++------------- src/app/note/components/user/repost.tsx | 51 ++++++++-------------- src/renderer/_default.page.client.tsx | 1 + 12 files changed, 111 insertions(+), 207 deletions(-) delete mode 100644 src/app/note/components/placeholder.tsx diff --git a/package.json b/package.json index 3a440297..e7d5c79f 100644 --- a/package.json +++ b/package.json @@ -28,6 +28,7 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "react-hook-form": "^7.43.9", + "react-loading-skeleton": "^3.3.1", "react-markdown": "^8.0.7", "react-virtuoso": "^4.3.5", "remark-gfm": "^3.0.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index cb88f2a8..1fc853fc 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -43,6 +43,9 @@ dependencies: react-hook-form: specifier: ^7.43.9 version: 7.43.9(react@18.2.0) + react-loading-skeleton: + specifier: ^3.3.1 + version: 3.3.1(react@18.2.0) react-markdown: specifier: ^8.0.7 version: 8.0.7(@types/react@18.2.5)(react@18.2.0) @@ -3944,6 +3947,15 @@ packages: { integrity: sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w== } dev: false + /react-loading-skeleton@3.3.1(react@18.2.0): + resolution: + { integrity: sha512-NilqqwMh2v9omN7LteiDloEVpFyMIa0VGqF+ukqp0ncVlYu1sKYbYGX9JEl+GtOT9TKsh04zCHAbavnQ2USldA== } + peerDependencies: + react: '>=16.8.0' + dependencies: + react: 18.2.0 + dev: false + /react-markdown@8.0.7(@types/react@18.2.5)(react@18.2.0): resolution: { integrity: sha512-bvWbzG4MtOU62XqBx3Xx+zB2raaFFsq4mYiAzfjXJMEz2sixgeAfraA3tvzULF02ZdOMUOKTBFFaZJDDrq+BJQ== } diff --git a/src/app/daily/pages/index.page.tsx b/src/app/daily/pages/index.page.tsx index 1f5f9248..18a38919 100644 --- a/src/app/daily/pages/index.page.tsx +++ b/src/app/daily/pages/index.page.tsx @@ -1,11 +1,11 @@ import NoteBase from '@lume/app/note/components/base'; -import { Placeholder } from '@lume/app/note/components/placeholder'; import { NoteQuoteRepost } from '@lume/app/note/components/quoteRepost'; import { getNotes } from '@lume/utils/storage'; import { useInfiniteQuery } from '@tanstack/react-query'; import { useVirtualizer } from '@tanstack/react-virtual'; import { useEffect, useRef } from 'react'; +import Skeleton from 'react-loading-skeleton'; const ITEM_PER_PAGE = 10; const TIME = Math.floor(Date.now() / 1000); @@ -49,7 +49,7 @@ export function Page() {
{status === 'loading' ? ( - + ) : status === 'error' ? (
{error.message}
) : ( @@ -88,7 +88,13 @@ export function Page() {
)} -
{isFetching && !isFetchingNextPage ? : null}
+
+ {isFetching && !isFetchingNextPage ? ( +
+ +
+ ) : null} +
); diff --git a/src/app/note/components/parent.tsx b/src/app/note/components/parent.tsx index a4f7d7c7..b8723843 100644 --- a/src/app/note/components/parent.tsx +++ b/src/app/note/components/parent.tsx @@ -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 (
- {error &&
failed to load
} - {!data ? ( - <> -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - ) : ( - <> -
-
+
+
+ {data ? ( + <>
-
- - )} + + ) : ( + + )} +
); }); diff --git a/src/app/note/components/placeholder.tsx b/src/app/note/components/placeholder.tsx deleted file mode 100644 index 072dd7bf..00000000 --- a/src/app/note/components/placeholder.tsx +++ /dev/null @@ -1,25 +0,0 @@ -export const Placeholder = () => { - return ( -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- ); -}; diff --git a/src/app/note/components/quote.tsx b/src/app/note/components/quote.tsx index b9c9a744..2ea0d8c3 100644 --- a/src/app/note/components/quote.tsx +++ b/src/app/note/components/quote.tsx @@ -5,6 +5,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'; import { navigate } from 'vite-plugin-ssr/client/router'; @@ -50,17 +51,18 @@ export const NoteQuote = memo(function NoteQuote({ id }: { id: string }) { onClick={(e) => openNote(e)} className="relative mb-2 mt-3 rounded-lg border border-zinc-700 bg-zinc-800 p-2 py-3" > - {error &&
failed to load
} - {!data ? ( -
- ) : ( -
- -
- -
-
- )} +
+ {data ? ( + <> + +
+ +
+ + ) : ( + + )} +
); }); diff --git a/src/app/note/components/rootNote.tsx b/src/app/note/components/rootNote.tsx index 1d13c396..c02a39ae 100644 --- a/src/app/note/components/rootNote.tsx +++ b/src/app/note/components/rootNote.tsx @@ -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'; import { navigate } from 'vite-plugin-ssr/client/router'; @@ -71,39 +72,18 @@ export const RootNote = memo(function RootNote({ id, fallback }: { id: string; f } return ( - <> - {error &&
failed to load
} - {!data ? ( -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- ) : ( -
openNote(e)} className="relative z-10 flex flex-col"> +
openNote(e)} className="relative z-10 flex flex-col"> + {data ? ( + <>
-
+ + ) : ( + )} - +
); }); diff --git a/src/app/note/components/user/default.tsx b/src/app/note/components/user/default.tsx index 816da7b8..3a6b840b 100644 --- a/src/app/note/components/user/default.tsx +++ b/src/app/note/components/user/default.tsx @@ -9,45 +9,31 @@ import relativeTime from 'dayjs/plugin/relativeTime'; dayjs.extend(relativeTime); export const NoteDefaultUser = ({ pubkey, time }: { pubkey: string; time: number }) => { - const { user, isError, isLoading } = useProfile(pubkey); + const { user } = useProfile(pubkey); return (
- {isError || isLoading ? ( - <> -
-
-
-
-
-
-
-
+
+ {pubkey} +
+
+
+
+
+ {user?.display_name || shortenKey(pubkey)} +
- - ) : ( - <> -
- {pubkey} +
+ {user?.nip05 || shortenKey(pubkey)} + • + {dayjs().to(dayjs.unix(time))}
-
-
-
-
- {user?.display_name || user?.name || shortenKey(pubkey)} -
-
- - {user?.nip05 || shortenKey(pubkey)} • {dayjs().to(dayjs.unix(time))} - -
-
- - )} +
+
); }; diff --git a/src/app/note/components/user/mention.tsx b/src/app/note/components/user/mention.tsx index 2a74d51d..044b652a 100644 --- a/src/app/note/components/user/mention.tsx +++ b/src/app/note/components/user/mention.tsx @@ -2,15 +2,7 @@ import { useProfile } from '@lume/utils/hooks/useProfile'; import { shortenKey } from '@lume/utils/shortenKey'; export const NoteMentionUser = ({ pubkey }: { pubkey: string }) => { - const { user, isError, isLoading } = useProfile(pubkey); + const { user } = useProfile(pubkey); - return ( - <> - {isError || isLoading ? ( - - ) : ( - @{user?.username || user?.name || shortenKey(pubkey)} - )} - - ); + return @{user?.username || user?.name || shortenKey(pubkey)}; }; diff --git a/src/app/note/components/user/reply.tsx b/src/app/note/components/user/reply.tsx index fcad843e..340bcc68 100644 --- a/src/app/note/components/user/reply.tsx +++ b/src/app/note/components/user/reply.tsx @@ -9,39 +9,26 @@ import relativeTime from 'dayjs/plugin/relativeTime'; dayjs.extend(relativeTime); export default function NoteReplyUser({ pubkey, time }: { pubkey: string; time: number }) { - const { user, isError, isLoading } = useProfile(pubkey); + const { user } = useProfile(pubkey); return (
- {isError || isLoading ? ( - <> -
-
-
-
-
-
- - ) : ( - <> -
- {pubkey} -
-
-
- - {user?.display_name || user?.name || shortenKey(pubkey)} - - · - {dayjs().to(dayjs.unix(time))} -
-
- - )} +
+ {pubkey} +
+
+
+ + {user?.display_name || user?.name || shortenKey(pubkey)} + + · + {dayjs().to(dayjs.unix(time))} +
+
); } diff --git a/src/app/note/components/user/repost.tsx b/src/app/note/components/user/repost.tsx index 07b3d1a6..40aa9950 100644 --- a/src/app/note/components/user/repost.tsx +++ b/src/app/note/components/user/repost.tsx @@ -9,42 +9,27 @@ import relativeTime from 'dayjs/plugin/relativeTime'; dayjs.extend(relativeTime); export const NoteRepostUser = ({ pubkey, time }: { pubkey: string; time: number }) => { - const { user, isError, isLoading } = useProfile(pubkey); + const { user } = useProfile(pubkey); return (
- {isError || isLoading ? ( - <> -
-
-
-
-
-
-
-
- - ) : ( - <> -
- {pubkey} -
-
-
- {user?.display_name || user?.name || shortenKey(pubkey)}{' '} - - reposted - -
- · - {dayjs().to(dayjs.unix(time))} -
- - )} +
+ {pubkey} +
+
+
+ {user?.display_name || user?.name || shortenKey(pubkey)}{' '} + + reposted + +
+ · + {dayjs().to(dayjs.unix(time))} +
); }; diff --git a/src/renderer/_default.page.client.tsx b/src/renderer/_default.page.client.tsx index c2049ca8..b4a52ce0 100644 --- a/src/renderer/_default.page.client.tsx +++ b/src/renderer/_default.page.client.tsx @@ -4,6 +4,7 @@ import { PageContextClient } from '@lume/renderer/types'; import { StrictMode } from 'react'; import { Root, createRoot, hydrateRoot } from 'react-dom/client'; +import 'react-loading-skeleton/dist/skeleton.css'; import 'vidstack/styles/defaults.css'; export const clientRouting = true;