Poprawki w infinite scrollu

src/views/JournalView.vue

@@ -21,13 +21,15 @@
               </div>
 
               <ul v-else>
-                <li v-for="(item, i) in historyList" :key="item.timetableId" :style="`--delay: ${i * 50}ms`">
+                <transition-group name="history-list-anim">
+                  <li v-for="(item, i) in historyList" :key="item.timetableId">
                     <div class="history_item-top">
                       <span>
                         <span @click="navigateToTrain(!item.terminated ? item.trainNo : null)" style="cursor: pointer">
                           <b class="text--primary">{{ item.trainCategoryCode }}&nbsp;</b>
                           <b>{{ item.trainNo }}</b>
-                        | <span>{{ item.driverName }}</span> | <span class="text--grayed">#{{ item.timetableId }}</span>
+                          | <span>{{ item.driverName }}</span> |
+                          <span class="text--grayed">#{{ item.timetableId }}</span>
                         </span>
 
                         <div>
@@ -110,6 +112,7 @@
                       </div>
                     </div>
                   </li>
+                </transition-group>
               </ul>
             </div>
           </transition>
@@ -118,7 +121,6 @@
 
       <div class="history_warning" v-if="scrollNoMoreData">Brak dalszych wyników dla podanych parametrów</div>
       <div class="history_warning" v-else-if="!scrollDataLoaded">Pobieranie kolejnych wyników...</div>
-
     </div>
   </section>
 </template>
@@ -265,7 +267,7 @@ export default defineComponent({
       const element = this.$refs.scrollElement as HTMLElement;
 
       if (
-        element.getBoundingClientRect().bottom * 0.9 < window.innerHeight &&
+        element.getBoundingClientRect().bottom * 0.85 < window.innerHeight &&
         this.scrollDataLoaded &&
         !this.scrollNoMoreData
       )
@@ -385,6 +387,7 @@ export default defineComponent({
 @import '../styles/responsive.scss';
 @import '../styles/option.scss';
 
+// Animations
 .warning {
   &-enter-from,
   &-leave-to {
@@ -400,6 +403,18 @@ export default defineComponent({
   }
 }
 
+.history-list-anim {
+  &-enter-active,
+  &-leave-active {
+    transition: all 0.5s ease;
+  }
+
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+  }
+}
+
 .history-view {
   height: 100%;