How to make a component fade in in Vue?

Question

JavaScript

Maybe the question is also a Nubian one, in principle there is a solution for it. But it seems to me that Vue has a solution from the "box" of this cant. Considering the initial download of the application.
Consider the primitive component "Search.vue"

<template lang="pug">
     form.nav__search(action="")
        .nav__search__block
            input.nav__search__input#search(
                type="text"
                placeholder="Найти вопрос, ответ, категорию или пользователя.."
                v-model="message"
            )
            label.nav__search__label.icon-search(for="search")
</template>
<script>
    export default {
        ...
        data (){
            return {
                message:''
            }
        }
        ...
    }
</script>

And its call:

import Vue from 'vue';
import Search from './vue/Search.vue';

new Vue({
    el: "#app",
    components: {
        Search
    }
});

When there is only one such component, it will render without problems, its appearance will not be noticeable to the eye. But with 30+ components, as in my application, the rendering of these pieces is very striking.
How can this be optimized without using SSR?

Answer 1

You can wrap a component in <transition>and assign an arbitrary animation to it.
Maybe your rendering slowdown is due to the fact that you are loading data for these components. Those. data comes in chunks and after each chunk you display the appropriate component? Then you should first accept all the data, and then render everything at once.