feat: add animation

package.json

@@ -11,6 +11,7 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
+    "@formkit/auto-animate": "^0.8.2",
     "axios": "^1.7.9",
     "vue": "^3.5.13",
     "vue3-toastify": "^0.2.8"

src/App.vue

@@ -10,13 +10,14 @@
   const showDrawer = ref(false);
   const items = ref([]);
   const isLoading = ref(false);
+  const isFetching = ref(false);
   const filters = reactive({
     searchQuery: '',
     sortBy: ''
   });
   const isCreatingOrder = ref(false);
 
-  const fetchItems = async (filters = {}) => {
+  const fetchItems = async (filters = {}, {isFirstLoading}) => {
     const params = {};
     if (filters.searchQuery) {
       params.title = '*' + filters.searchQuery + '*'
@@ -26,17 +27,21 @@
     }
 
     try {
-      isLoading.value = true
+      if (isFirstLoading) {
+        isLoading.value = true
+      }
+      isFetching.value = true
       const { data } = await axios.get(`${import.meta.env.VITE_API_URL}/items`, { params });
       items.value = data
     } catch (e) {
       console.error('Some error', e)
     } finally {
       isLoading.value = false
+      isFetching.value = false
     }
   }
 
-  onMounted(fetchItems)
+  onMounted(() => fetchItems({}, {isFirstLoading: true}))
   watch(filters,  fetchItems)
 
   const toggleToFavorite = async (item) => {

src/components/CardList.vue

@@ -12,7 +12,7 @@
 </script>
 
 <template>
-  <div class="grid md:grid-cols-2 xl:grid-cols-4 gap-5">
+  <div class="grid md:grid-cols-2 xl:grid-cols-4 gap-5" v-auto-animate>
     <Card
       v-for="item in items"
       :key="item.id"

src/components/CartItemList.vue

@@ -13,7 +13,7 @@
 </script>
 
 <template>
-  <div class="flex flex-col gap-4">
+  <div class="flex flex-col gap-4" v-auto-animate>
     <CartItem v-for="item in items" :key="item.id" :item="item" @on-remove="toggleToCart" />
   </div>
 </template>

src/main.js

@@ -2,7 +2,9 @@ import { createApp } from 'vue'
 import './assets/main.css'
 import App from './App.vue'
 import Vue3Toastify from 'vue3-toastify';
+import { autoAnimatePlugin } from '@formkit/auto-animate/vue'
 
 const app = createApp(App);
 app.use(Vue3Toastify, { autoClose: 1000 });
+app.use(autoAnimatePlugin);
 app.mount('#app')

yarn.lock

@@ -609,6 +609,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@formkit/auto-animate@npm:^0.8.2":
+  version: 0.8.2
+  resolution: "@formkit/auto-animate@npm:0.8.2"
+  checksum: 10c0/0b24af241c229f37643cd62ea78fd7fddf621c06516cf62452035ea0bf489b6b53068eea47abb40b6bb3653bb91c1efad8b7257014a3559d26ad77b47b5337cb
+  languageName: node
+  linkType: hard
+
 "@humanfs/core@npm:^0.19.1":
   version: 0.19.1
   resolution: "@humanfs/core@npm:0.19.1"
@@ -1276,6 +1283,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "archakov-vue@workspace:."
   dependencies:
+    "@formkit/auto-animate": "npm:^0.8.2"
     "@vitejs/plugin-vue": "npm:^5.2.1"
     "@vitejs/plugin-vue-jsx": "npm:^4.1.1"
     "@vue/eslint-config-prettier": "npm:^10.1.0"