Temporarily hide menu from Dropdown component using v-cloak attribute to prevent flickering upon loading
MODIFY
resources/views/layout.blade.php
resources/views/layout.blade.php
.theme-dark .ct-label {
color: #758193;
}
+
+ [v-cloak] {
+ display: none;
+ }
</style>
</head>
<body class="theme-{{ Auth::check() ? Auth::user()->theme : 'light' }}">
<span slot="button">
<i class="far fa-plus mr-05"></i> <i class="fas fa-caret-down fa-sm"></i>
</span>
+ <div v-cloak>
<ul slot="menu">
<li>
<a href="/earnings/create">{{ __('actions.create') }} {{ __('models.earning') }}</a>
<a href="/spendings/create">{{ __('actions.create') }} {{ __('models.spending') }}</a>
</li>
</ul>
+ </div>
</dropdown>
</li>
@if (Auth::user()->spaces->count() > 1)
<span slot="button">
{{ str_limit(session('space')->name, 3) }} <i class="fas fa-caret-down fa-sm"></i>
</span>
+ <div v-cloak>
<ul slot="menu">
@foreach (Auth::user()->spaces as $space)
<li>
</li>
@endforeach
</ul>
+ </div>
</dropdown>
</li>
@endif
<span slot="button">
<img src="{{ Auth::user()->avatar }}" class="avatar mr-05" /> <i class="fas fa-caret-down fa-sm"></i>
</span>
+ <div v-cloak>
<ul slot="menu">
<li>
<a href="/imports">{{ __('models.imports') }}</a>
<a href="/logout">{{ __('pages.log_out') }}</a>
</li>
</ul>
+ </div>
</dropdown>
</li>
</ul>

Temporarily hide menu from Dropdown component using v-cloak attribute to prevent flickering upon loading