feat: 💨

src/components/NoteList/index.tsx

@@ -1,4 +1,5 @@
 import { Button } from '@/components/ui/button'
+import { Skeleton } from '@/components/ui/skeleton'
 import { PICTURE_EVENT_KIND } from '@/constants'
 import { isReplyNoteEvent } from '@/lib/event'
 import { checkAlgoRelay } from '@/lib/relay'
@@ -187,14 +188,14 @@ export default function NoteList({
         }}
         pullingContent=""
       >
-        <div className="space-y-2 sm:space-y-2">
+        <div>
           {newEvents.filter((event: Event) => {
             return (
               (!filterMutedNotes || !mutePubkeys.includes(event.pubkey)) &&
               (listMode !== 'posts' || !isReplyNoteEvent(event))
             )
           }).length > 0 && (
-            <div className="flex justify-center w-full mt-2">
+            <div className="flex justify-center w-full my-2">
               <Button size="lg" onClick={showNewEvents}>
                 {t('show new notes')}
               </Button>
@@ -202,7 +203,7 @@ export default function NoteList({
           )}
           {isPictures ? (
             <PictureNoteCardMasonry
-              className="px-2 sm:px-4 pt-2"
+              className="px-2 sm:px-4 mt-2"
               columnCount={isLargeScreen ? 3 : 2}
               events={events}
             />
@@ -220,19 +221,19 @@ export default function NoteList({
                 ))}
             </div>
           )}
-          <div className="text-center text-sm text-muted-foreground">
-            {hasMore || refreshing ? (
-              <div ref={bottomRef}>{t('loading...')}</div>
-            ) : events.length ? (
-              t('no more notes')
-            ) : (
-              <div className="flex justify-center w-full mt-2">
-                <Button size="lg" onClick={() => setRefreshCount((pre) => pre + 1)}>
-                  {t('reload notes')}
-                </Button>
-              </div>
-            )}
-          </div>
+          {hasMore || refreshing ? (
+            <div ref={bottomRef}>
+              <LoadingSkeleton isPictures={isPictures} />
+            </div>
+          ) : events.length ? (
+            <div className="text-center text-sm text-muted-foreground mt-2">t('no more notes')</div>
+          ) : (
+            <div className="flex justify-center w-full mt-2">
+              <Button size="lg" onClick={() => setRefreshCount((pre) => pre + 1)}>
+                {t('reload notes')}
+              </Button>
+            </div>
+          )}
         </div>
       </PullToRefresh>
     </div>
@@ -320,3 +321,45 @@ function PictureNoteCardMasonry({
     </div>
   )
 }
+
+function LoadingSkeleton({ isPictures }: { isPictures: boolean }) {
+  const { isLargeScreen } = useScreenSize()
+
+  if (isPictures) {
+    return (
+      <div
+        className={cn(
+          'px-2 sm:px-4 grid',
+          isLargeScreen ? 'grid-cols-3 gap-4' : 'grid-cols-2 gap-2'
+        )}
+      >
+        {[...Array(isLargeScreen ? 3 : 2)].map((_, i) => (
+          <div key={i}>
+            <Skeleton className="rounded-lg w-full aspect-[6/8]" />
+            <div className="p-2">
+              <Skeleton className="w-32 h-5" />
+              <div className="flex items-center gap-2 mt-2">
+                <Skeleton className="w-5 h-5 rounded-full" />
+                <Skeleton className="w-16 h-3" />
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    )
+  }
+
+  return (
+    <div className="px-4 py-3">
+      <div className="flex items-center space-x-2">
+        <Skeleton className="w-10 h-10 rounded-full" />
+        <div className="space-y-1">
+          <Skeleton className="w-10 h-4" />
+          <Skeleton className="w-20 h-3" />
+        </div>
+      </div>
+      <Skeleton className="w-full h-5 mt-2" />
+      <Skeleton className="w-2/3 h-5 mt-2" />
+    </div>
+  )
+}