adding transition on pagination links

resources/js/Components/DataTable/Builder.vue

@@ -14,7 +14,7 @@ const { url, sticky } = defineProps({
 })
 
 const paginator = ref({})
-const processing = ref(false)
+const processing = ref(true)
 const last = ref(null)
 const config = useForm({
   page: 1,
@@ -114,6 +114,12 @@ onUpdated(() => rounded())
   <div class="flex flex-col w-full">
     <div class="flex flex-col sm:flex-row items-center sm:justify-between space-y-2 sm:space-y-0 sm:space-x-2 p-2">
       <div class="w-full sm:max-w-xs flex items-center space-x-2">
+        <TransitionGroup
+          enterActiveClass="transition-all duration-300"
+          leaveActiveClass="transition-all duration-300"
+          enterFromClass="translate-y-[100%]"
+          leaveToClass="translate-y-[100%]">
+          <template v-if="paginator?.total > config.per_page">
             <label for="per_page" class="w-1/4 sm:w-auto lowercase first-letter:capitalize">per page</label>
             <select name="per_page" v-model="config.per_page" @change.prevent="fetch()" class="w-full sm:w-auto bg-transparent border dark:border-gray-600 rounded-md px-3 py-1">
               <option class="dark:bg-gray-700" value="10">10</option>
@@ -122,6 +128,8 @@ onUpdated(() => rounded())
               <option class="dark:bg-gray-700" value="50">50</option>
               <option class="dark:bg-gray-700" value="100">100</option>
             </select>
+          </template>
+        </TransitionGroup>
       </div>
 
       <div class="w-full sm:max-w-sm flex items-center space-x-2 sm:justify-end">
@@ -148,6 +156,11 @@ onUpdated(() => rounded())
       </div>
     </div>
 
+    <Transition
+      enterActiveClass="transition-all duration-300"
+      leaveActiveClass="transition-all duration-300"
+      enterFromClass="-translate-y-[100%]"
+      leaveToClass="-translate-y-[100%]">
       <div v-if="paginator.total > paginator.per_page" class="flex items-center space-x-4 p-2">
         <p class="flex-none w-1/4">
           Displaying from {{ paginator.from }} to {{ paginator.to }} in total {{ paginator.total }}
@@ -157,5 +170,6 @@ onUpdated(() => rounded())
           <button v-for="(link, i) in paginator.links" :key="i" @click.prevent="goTo(link)" class="dark:hover:bg-gray-600 px-2 py-1 transition-all" :class="link.active ? 'dark:bg-gray-900' : 'dark:bg-gray-800'" v-html="link.label"></button>
         </div>
       </div>
+    </Transition>
   </div>
 </template>