From 5d9b440dc8a9ffc3a468351a9000507e173e0f58 Mon Sep 17 00:00:00 2001
From: Ren Amamiya <123083837+reyamir@users.noreply.github.com>
Date: Mon, 8 May 2023 09:32:01 +0700
Subject: [PATCH] use custom skeleton for note

---
 package.json                              |  1 -
 pnpm-lock.yaml                            | 12 ------------
 src/app/daily/pages/index.page.tsx        | 14 ++++++++++----
 src/app/note/components/base.tsx          |  4 +++-
 src/app/note/components/mentions/note.tsx |  4 ++--
 src/app/note/components/parent.tsx        |  4 ++--
 src/app/note/components/rootNote.tsx      |  4 ++--
 src/app/note/components/skeleton.tsx      | 20 ++++++++++++++++++++
 src/app/note/components/user/default.tsx  |  2 +-
 src/app/note/components/user/repost.tsx   |  3 +--
 10 files changed, 41 insertions(+), 27 deletions(-)
 create mode 100644 src/app/note/components/skeleton.tsx

diff --git a/package.json b/package.json
index fb700c69..2e449659 100644
--- a/package.json
+++ b/package.json
@@ -28,7 +28,6 @@
     "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 c61ad814..468cf4dd 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -43,9 +43,6 @@ 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.6)(react@18.2.0)
@@ -3947,15 +3944,6 @@ 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.6)(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 c6c3201a..f57b0ad1 100644
--- a/src/app/daily/pages/index.page.tsx
+++ b/src/app/daily/pages/index.page.tsx
@@ -1,12 +1,12 @@
 import { Header } from '@lume/app/daily/components/header';
 import { NoteBase } from '@lume/app/note/components/base';
 import { NoteQuoteRepost } from '@lume/app/note/components/quoteRepost';
+import { NoteSkeleton } from '@lume/app/note/components/skeleton';
 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);
@@ -56,7 +56,11 @@ export function Page() {
       </div>
       <div className="flex-1">
         {status === 'loading' ? (
-          <Skeleton count={5} containerClassName="flex-1" />
+          <div className="px-3 py-1.5">
+            <div className="rounded-md border border-zinc-800 bg-zinc-900 px-3 py-3 shadow-input shadow-black/20">
+              <NoteSkeleton />
+            </div>
+          </div>
         ) : status === 'error' ? (
           <div>{error.message}</div>
         ) : (
@@ -95,8 +99,10 @@ export function Page() {
         )}
         <div>
           {isFetching && !isFetchingNextPage ? (
-            <div className="px-3 py-5">
-              <Skeleton count={3} containerClassName="flex-1" />
+            <div className="px-3 py-1.5">
+              <div className="rounded-md border border-zinc-800 bg-zinc-900 px-3 py-3 shadow-input shadow-black/20">
+                <NoteSkeleton />
+              </div>
             </div>
           ) : null}
         </div>
diff --git a/src/app/note/components/base.tsx b/src/app/note/components/base.tsx
index 5a8b178c..0fb6ae6c 100644
--- a/src/app/note/components/base.tsx
+++ b/src/app/note/components/base.tsx
@@ -6,8 +6,10 @@ import { NoteWrapper } from '@lume/app/note/components/wrapper';
 import { noteParser } from '@lume/utils/parser';
 import { isTagsIncludeID } from '@lume/utils/transform';
 
+import { useMemo } from 'react';
+
 export const NoteBase = ({ event }: { event: any }) => {
-  const content = noteParser(event);
+  const content = useMemo(() => noteParser(event), [event]);
   const checkParentID = isTagsIncludeID(event.parent_id, event.tags);
 
   const href = event.parent_id ? `/app/note?id=${event.parent_id}` : `/app/note?id=${event.event_id}`;
diff --git a/src/app/note/components/mentions/note.tsx b/src/app/note/components/mentions/note.tsx
index aade9dd9..570bf5f4 100644
--- a/src/app/note/components/mentions/note.tsx
+++ b/src/app/note/components/mentions/note.tsx
@@ -1,5 +1,6 @@
 import { NoteContent } from '@lume/app/note/components/content';
 import NoteFile from '@lume/app/note/components/file';
+import { NoteSkeleton } from '@lume/app/note/components/skeleton';
 import { NoteDefaultUser } from '@lume/app/note/components/user/default';
 import { NoteWrapper } from '@lume/app/note/components/wrapper';
 import { RelayContext } from '@lume/shared/relayProvider';
@@ -7,7 +8,6 @@ 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 MentionNote = memo(function MentionNote({ id }: { id: string }) {
@@ -50,7 +50,7 @@ export const MentionNote = memo(function MentionNote({ id }: { id: string }) {
           </div>
         </>
       ) : (
-        <Skeleton baseColor="#27272a" containerClassName="flex-1" />
+        <NoteSkeleton />
       )}
     </NoteWrapper>
   );
diff --git a/src/app/note/components/parent.tsx b/src/app/note/components/parent.tsx
index af339894..f930ec74 100644
--- a/src/app/note/components/parent.tsx
+++ b/src/app/note/components/parent.tsx
@@ -1,13 +1,13 @@
 import { NoteContent } from '@lume/app/note/components/content';
 import NoteFile from '@lume/app/note/components/file';
 import NoteMetadata from '@lume/app/note/components/metadata';
+import { NoteSkeleton } from '@lume/app/note/components/skeleton';
 import { NoteDefaultUser } from '@lume/app/note/components/user/default';
 import { RelayContext } from '@lume/shared/relayProvider';
 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 }) {
@@ -52,7 +52,7 @@ export const NoteParent = memo(function NoteParent({ id }: { id: string }) {
           </div>
         </>
       ) : (
-        <Skeleton baseColor="#27272a" containerClassName="flex-1" />
+        <NoteSkeleton />
       )}
     </div>
   );
diff --git a/src/app/note/components/rootNote.tsx b/src/app/note/components/rootNote.tsx
index 1a9d51e5..7894a183 100644
--- a/src/app/note/components/rootNote.tsx
+++ b/src/app/note/components/rootNote.tsx
@@ -1,13 +1,13 @@
 import { NoteContent } from '@lume/app/note/components/content';
 import NoteFile from '@lume/app/note/components/file';
 import NoteMetadata from '@lume/app/note/components/metadata';
+import { NoteSkeleton } from '@lume/app/note/components/skeleton';
 import { NoteDefaultUser } from '@lume/app/note/components/user/default';
 import { RelayContext } from '@lume/shared/relayProvider';
 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';
 
@@ -85,7 +85,7 @@ export const RootNote = memo(function RootNote({ id, fallback }: { id: string; f
           </div>
         </>
       ) : (
-        <Skeleton baseColor="#27272a" containerClassName="flex-1" />
+        <NoteSkeleton />
       )}
     </div>
   );
diff --git a/src/app/note/components/skeleton.tsx b/src/app/note/components/skeleton.tsx
new file mode 100644
index 00000000..16ab45d4
--- /dev/null
+++ b/src/app/note/components/skeleton.tsx
@@ -0,0 +1,20 @@
+export const NoteSkeleton = () => {
+  return (
+    <div className="flex h-min flex-col">
+      <div className="flex items-center gap-2.5">
+        <div className="relative h-9 w-9 shrink overflow-hidden rounded-md bg-zinc-700" />
+        <div className="flex flex-col gap-0.5">
+          <div className="h-3 w-20 rounded-sm bg-zinc-700" />
+          <div className="h-2 w-12 rounded-sm bg-zinc-700" />
+        </div>
+      </div>
+      <div className="mt-3 animate-pulse pl-[46px]">
+        <div className="flex flex-col gap-1">
+          <div className="h-4 w-full rounded-sm bg-zinc-700" />
+          <div className="h-4 w-2/3 rounded-sm bg-zinc-700" />
+          <div className="h-4 w-1/2 rounded-sm bg-zinc-700" />
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/src/app/note/components/user/default.tsx b/src/app/note/components/user/default.tsx
index 0132c821..c7102cd7 100644
--- a/src/app/note/components/user/default.tsx
+++ b/src/app/note/components/user/default.tsx
@@ -23,7 +23,7 @@ export const NoteDefaultUser = ({ pubkey, time }: { pubkey: string; time: number
       <div className="flex w-full flex-1 items-start justify-between">
         <div className="flex flex-col gap-0.5">
           <h5 className="text-sm font-semibold leading-none group-hover:underline">
-            {user?.display_name || user?.name || <div className="h-3 w-20 animate-pulse rounded-sm bg-zinc-800"></div>}
+            {user?.display_name || user?.name || <div className="h-3 w-20 animate-pulse rounded-sm bg-zinc-700"></div>}
           </h5>
           <div className="flex items-baseline gap-1.5 text-sm leading-none text-zinc-500">
             <span>{user?.nip05 || shortenKey(pubkey)}</span>
diff --git a/src/app/note/components/user/repost.tsx b/src/app/note/components/user/repost.tsx
index 7ad12e68..e738d8cf 100644
--- a/src/app/note/components/user/repost.tsx
+++ b/src/app/note/components/user/repost.tsx
@@ -4,7 +4,6 @@ import { useProfile } from '@lume/utils/hooks/useProfile';
 
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
-import Skeleton from 'react-loading-skeleton';
 
 dayjs.extend(relativeTime);
 
@@ -22,7 +21,7 @@ export const NoteRepostUser = ({ pubkey, time }: { pubkey: string; time: number
       </div>
       <div className="flex items-baseline gap-1.5 text-sm">
         <h5 className="font-semibold leading-tight group-hover:underline">
-          {user?.display_name || user?.name || <Skeleton />}
+          {user?.display_name || user?.name || <div className="h-3 w-20 animate-pulse rounded-sm bg-zinc-700"></div>}
           <span className="bg-gradient-to-r from-fuchsia-300 via-orange-100 to-amber-300 bg-clip-text text-transparent">
             {' '}
             reposted