refactor: add fade in animation

src/client/components/DynamicVirtualList.tsx

@@ -12,6 +12,7 @@ interface VirtualListProps<T = any> {
   onFetchNextPage: () => void;
   estimateSize: number;
   renderItem: (item: T) => React.ReactElement;
+  getItemKey?: (index: number) => string | number;
   renderEmpty?: () => React.ReactElement;
 }
 export const DynamicVirtualList: React.FC<VirtualListProps> = React.memo(
@@ -22,6 +23,7 @@ export const DynamicVirtualList: React.FC<VirtualListProps> = React.memo(
       isFetchingNextPage,
       onFetchNextPage,
       estimateSize,
+      getItemKey,
       renderItem,
       renderEmpty,
     } = props;
@@ -33,6 +35,7 @@ export const DynamicVirtualList: React.FC<VirtualListProps> = React.memo(
       getScrollElement: () => parentRef.current,
       estimateSize: () => estimateSize,
       overscan: 5,
+      getItemKey,
     });
 
     const virtualItems = rowVirtualizer.getVirtualItems();

src/client/routes/feed/$channelId/index.tsx

@@ -16,6 +16,7 @@ import { DialogWrapper } from '@/components/DialogWrapper';
 import { useSocketSubscribeList } from '@/api/socketio';
 import { useMemo } from 'react';
 import { DynamicVirtualList } from '@/components/DynamicVirtualList';
+import { reverse } from 'lodash-es';
 
 export const Route = createFileRoute('/feed/$channelId/')({
   beforeLoad: routeAuthBeforeLoad,
@@ -64,7 +65,10 @@ function PageComponent() {
   });
 
   const fullEvents = useMemo(
-    () => [...realtimeEvents, ...(data?.pages.flatMap((p) => p.items) ?? [])],
+    () => [
+      ...reverse(realtimeEvents),
+      ...(data?.pages.flatMap((p) => p.items) ?? []),
+    ],
     [realtimeEvents, data]
   );
 
@@ -118,7 +122,10 @@ function PageComponent() {
           hasNextPage={hasNextPage}
           isFetchingNextPage={isFetchingNextPage}
           onFetchNextPage={fetchNextPage}
-          renderItem={(item) => <FeedEventItem className="mb-2" event={item} />}
+          getItemKey={(index) => fullEvents[index].id}
+          renderItem={(item) => (
+            <FeedEventItem className="animate-fade-in mb-2" event={item} />
+          )}
           renderEmpty={() => (
             <div className="w-full overflow-hidden p-4">
               <FeedApiGuide channelId={channelId} />

src/client/tailwind.config.ts

@@ -77,10 +77,15 @@ module.exports = {
           from: { height: 'var(--radix-accordion-content-height)' },
           to: { height: '0' },
         },
+        'fade-in': {
+          '0%': { opacity: '0' },
+          '100%': { opacity: '1' },
+        },
       },
       animation: {
         'accordion-down': 'accordion-down 0.2s ease-out',
         'accordion-up': 'accordion-up 0.2s ease-out',
+        'fade-in': 'fade-in 0.6s ease-in-out forwards',
       },
     },
   },