Content showing when page loading

[theprobugmaker]

For some reason the content of the dropdown is showing when the page is loading, like flickering, specially on mobile, is that right?

That is my dropdown component:

<template>
    <popper
        tag-name="div"
        :visible-arrow="false"
        trigger="clickToToggle"
        :options="{
            ...{ placement },
            modifiers: { offset: { offset: '0, 4' } }
        }"
    >
        <div class="z-50">
            <slot />
        </div>

        <slot slot="reference" name="trigger"></slot>
    </popper>
</template>

<script>
import Popper from 'vue-popperjs'

export default {
    name: 'dropdown',
    components: {
        Popper
    },
    props: {
        placement: {
            default: 'bottom-start'
        }
    }
}
</script>

[kluzny]

Old thread, but for anyone in the future:

I recommend you use v-cloak in the standard library

https://v3.vuejs.org/api/directives.html#v-cloak

It will prevent flicker on items before vue is initialized.