Improve realtime feed

ui/src/views/RealtimeFeedView.vue

@@ -16,16 +16,16 @@ onMounted(() => {
       <h1>Feed en Tiempo Real</h1>
     </header>
 
-    <div class="feed-list overflow-auto pr-2" style="max-height: calc(100vh - 160px);">
+    <transition-group name="feed" tag="div" class="feed-list overflow-auto pr-2" style="max-height: calc(100vh - 160px);">
       <RealtimeEventCard
         v-for="(ev, idx) in realtime.events"
-        :key="idx"
+        :key="ev.receivedAt + idx"
         :event="ev"
       />
       <div v-if="realtime.events.length === 0" class="text-center text-gray-500 mt-4">
         No hay eventos aún.
       </div>
-    </div>
+    </transition-group>
   </div>
 </template>
 
@@ -50,4 +50,17 @@ onMounted(() => {
   font-size: 2.2em;
   font-weight: 600;
 }
+
+.feed-enter-active,
+.feed-leave-active {
+  transition: all 0.3s ease-out;
+}
+.feed-enter-from {
+  opacity: 0;
+  transform: translateY(-10px);
+}
+.feed-enter-to {
+  opacity: 1;
+  transform: translateY(0);
+}
 </style>