When the router of vue is entered, the rendering page will get stuck. - Codes Helper

problem description

when the routing page enters, the rendering page will get stuck

the environmental background of the problems and what methods you have tried

1.vue-router jump route, the route enters the execution animation with a 300ms
2. The page you want to enter sends a request at created.
3. When you receive the request result, there will be a problem when the browser renders the page
. When the vue-router animation is executed, the request result is returned, and the browser begins to render the data. At this time, it will be particularly stuck
. My solution now is to render the data millisecond after receiving the data. In this way, the data will not be jammed, but there will be a period of waiting time. I would like to ask you bosses, is there any other way to solve this problem

related codes

/ / Please paste the code text below (do not replace the code with a picture)
/ / Route into the animation
slider ()

.slider-enter-active, .slider-leave-active 
    transition: all 300ms
.slider-enter, .slider-leave-to 
    transform: translate3d(100%, 0, 0);

/ / the page sends a request
created () {

when it enters.

  
    this._getCommonInfo();
},

/ / hide the wait box after setting 200ms to show the data

    _getCommonInfo() {
        const address = `/game/info/${this.id}?token=${this.getToken}`;
        getCommonInfo(address).then((res) => {
            console.log(res);
            setTimeout(() => {
                this.showFirstInloading = false;
            }, 200);
            this.commentScore = res.data.commentScore;
            this.comments = res.data.comments;
            this.gameInfo = res.data.gameInfo;
     
        });
    },

what result do you expect? What is the error message actually seen?

if the delay is removed, the page will be stuck when entering, and if the delay is not dropped, the page entry will see a waiting box for a period of time. Is there a good compromise