Filters flicker on load with alpine js v3 #589

rudolfbruder · 2021-12-08T11:26:34Z

rudolfbruder
Dec 8, 2021

Hi we have updated our alpine js version in the project and suddenly on load of the page table filters are visible for a split second. It seems like the display none is to applied at the load.

Does anyone know a way a round this?

This is how the layout page looks for us kind of.

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>{{ !empty($headTitle) ? $headTitle . ' | ' : '' }}Layout</title>
    <link rel="stylesheet" href="{{ mix('css/admin-panel/backend.css') }}">
    <link rel="stylesheet" href="{{ mix('css/admin-panel/admin-panel.css') }}">
    @livewireScripts
    @livewireStyles
    @include('components.global.translations')
</head>

<body id="page-top">
    here is the body
    <!-- Scripts -->
    <script type="text/javascript" src="{{ mix('js/backend.js') }}"></script>
    <script type="text/javascript" src="{{ mix('js/alpine.js') }}" defer></script>
    <script src=" {{ mix('js/admin-panel/sb-admin-2.js') }}" defer></script>
    <x-livewire-alert::scripts />
    @livewire('livewire-ui-modal')
    @livewire('livewire-ui-spotlight')
    @stack('scripts')
</body>

</html>

rappasoft · 2021-12-08T13:47:42Z

rappasoft
Dec 8, 2021
Maintainer

I haven't tested with Alpine 3, but it sounds like the filters need an x-cloak.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Filters flicker on load with alpine js v3 #589

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

Filters flicker on load with alpine js v3 #589

Uh oh!

rudolfbruder Dec 8, 2021

Replies: 1 comment

Uh oh!

rappasoft Dec 8, 2021 Maintainer

rudolfbruder
Dec 8, 2021

rappasoft
Dec 8, 2021
Maintainer