optimize files and animations

Author: andrepg

src/components/Blog/PostTimelineFeature.vue

@@ -1,20 +1,27 @@
 <script setup lang="ts">
 import type { Post } from '@/interfaces';
 import PostSingleCardFeature from './PostSingleCardFeature.vue';
+import { TransitionGroup } from 'vue';
 
 defineProps<{
   posts: Post[];
+  isLoading?: boolean;
 }>();
 </script>
 
 <template>
-  <ul class="list">
+  <TransitionGroup
+    name="fade"
+    tag="ul"
+    class="list"
+  >
     <li
-      v-for="post in posts"
+      v-for="(post, index) in posts"
       :key="post.path"
       class="p-0 not-sm:p-2 my-4"
+      :style="{ transitionDelay: `${index * 100}ms` }"
     >
       <PostSingleCardFeature :post="post" />
     </li>
-  </ul>
+  </TransitionGroup>
 </template>

src/views/PostListView.vue

@@ -5,7 +5,7 @@ import { useRoute } from 'vue-router'
 import PostTimelineFeature from '@/components/Blog/PostTimelineFeature.vue'
 
 import { SitemapBridge } from '@/router/sitemap'
-import { Post } from '@data/Posts'
+import { Post } from '@/interfaces'
 
 const route = useRoute()
 const isLoading = ref(true)
@@ -62,18 +62,7 @@ onMounted(() => {
     </h1>
   </SectionWithHeader>
 
-  <div
-    v-if="isLoading"
-    class="w-full px-6 max-w-5xl mx-auto py-12 flex flex-col items-center"
-  >
-    <span class="loading loading-dots" />
-    <p>Carregando posts...</p>
+  <div class="max-w-5xl mx-auto md:px-5">
+    <PostTimelineFeature :posts="posts" :is-loading="isLoading" />
   </div>
-
-  <ul
-    v-else
-    class="py-4 px-2 md:px-4 lg:w-5/6 mx-auto list"
-  >
-    <PostTimelineFeature :posts="posts" />
-  </ul>
 </template>

src/views/PostSingleView.vue

@@ -225,20 +225,3 @@ onMounted(() => {
     />
   </div>
 </template>
-
-<style scoped>
-.fade-enter-active,
-.fade-leave-active {
-  transition: all 0.5s ease;
-}
-
-.fade-enter-from {
-  opacity: 0;
-  transform: translateY(10px);
-}
-
-.fade-leave-to {
-  opacity: 0;
-  transform: translateY(-10px);
-}
-</style>