added lots of animations, added debounce to search query, fixed faulty refetching when logging out from profile page

src/views/Employees/Index.vue

@@ -1,5 +1,5 @@
 <template>
-
+<div>
 <IndexSettingsModal 
     id="indexSettingsModal"
     :left-column="settings.columnsSelected"
@@ -13,8 +13,7 @@
     @search="store.setSimpleSearch($event)"
 />
 
-
-<table class="table table-hover table-bordered mt-3 ">
+<table class="table table-hover mt-3 ">
     <thead>
         <tr>
             <th 
@@ -37,14 +36,13 @@
             </th>
         </tr>
     </thead>
-    <tbody>
-        <tr v-for="employee in rows" @click="router.push({name: 'Employees/Details', params: {id: employee.id}})">
+    <transition-group name="list" tag="tbody">
+        <tr v-for="employee in rows" :key="employee.id" @click="router.push({name: 'Employees/Details', params: {id: employee.id}})">
             <td v-for="col in settings.columnsSelected">
-                {{ employee[col] }}
+                {{ employee[col] }}       
             </td>
         </tr>
-    </tbody>
-
+    </transition-group>
 </table>
 
 <h5 v-show="rows.length === 0" class="text-muted">Keine Daten anzuzeigen...</h5>
@@ -56,7 +54,7 @@
     :last-page="store.meta.last_page"
     @set-page="paginatorSetPage" 
 />
-
+</div>
 </template>
 
 <script setup lang="ts">
@@ -110,10 +108,26 @@ function paginatorSetPage(e : number){
 
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+
+.list- {
+    &enter-active,
+    &leave-active {
+        transition: all .2s ease
+    }
+
+    &enter-from,
+    &leave-to {
+        opacity: 0;
+    }
+
+    &move {
+        transition: all .2s ease
+    }
+}
 
 table thead tr:first-child th:first-child {
-    width: 51px;
+    min-width: 51px;
 }
 
 table th {