Filament•13mo ago

Buttons have loading state after upgrade Filament v3 Upgrade

I think it must be how the layout file is setup, but I followed the instructions. Originallly we were getting the Livewire loaded twice error, but then we added the @livewireScriptConfig directive and those errors went away, but the loading state never turns off after page load. It seem like the buttons are working, aside from the loading state on them.

4 Replies

swilla•13mo ago

awcodes•13mo ago

Sounds like you have conflicting livewire versions. You were getting loaded twice errors because you were manually loading livewire and filament was also loading livewire. Since you’re using the panel it would be better to remove your manual version and just let filament use its version.

swilla•13mo ago

This is the layout I'm using:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="h-full bg-gray-100">

<head>
    <meta charset="utf-8">
    <meta name="application-name" content="{{ config('app.name') }}">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'Laravel') }}</title>

    <link rel="icon" href="{{ url('img/favicon.png') }}">

    <!-- Fonts -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap">

    <!-- Styles -->
    <style>
        [x-cloak] {
            display: none !important;
        }
    </style>

    @filamentStyles
    @vite('resources/css/app.css')
</head>

<body class="font-sans antialiased h-full">
    <x-banner />

    <div class="min-h-full">
        <x-main-header />

        <div class="py-10">
            <div class="mx-auto max-w-3xl sm:px-6 lg:grid lg:max-w-7xl lg:grid-cols-12 lg:gap-8 lg:px-8">
                <div class="hidden lg:col-span-2 lg:block">
                    @include('sidebar-menu')
                </div>

                <main class="lg:col-span-10 xl:col-span-10">
                    <!-- Page Heading -->
                    @if (isset($header))
                        <header class="pb-2 px-4 sm:px-0">
                            {{ $header }}
                        </header>
                    @endif

                    {{ $slot }}
                </main>
            </div>
        </div>
    </div>

    @stack('modals')

    @livewire('wire-elements-modal')
    @stack('scripts')

    @livewireScriptConfig

    @filamentScripts
    <!-- Scripts -->
    @vite('resources/js/app.js')
</body>

</html>

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="h-full bg-gray-100">

<head>
    <meta charset="utf-8">
    <meta name="application-name" content="{{ config('app.name') }}">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'Laravel') }}</title>

    <link rel="icon" href="{{ url('img/favicon.png') }}">

    <!-- Fonts -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap">

    <!-- Styles -->
    <style>
        [x-cloak] {
            display: none !important;
        }
    </style>

    @filamentStyles
    @vite('resources/css/app.css')
</head>

<body class="font-sans antialiased h-full">
    <x-banner />

    <div class="min-h-full">
        <x-main-header />

        <div class="py-10">
            <div class="mx-auto max-w-3xl sm:px-6 lg:grid lg:max-w-7xl lg:grid-cols-12 lg:gap-8 lg:px-8">
                <div class="hidden lg:col-span-2 lg:block">
                    @include('sidebar-menu')
                </div>

                <main class="lg:col-span-10 xl:col-span-10">
                    <!-- Page Heading -->
                    @if (isset($header))
                        <header class="pb-2 px-4 sm:px-0">
                            {{ $header }}
                        </header>
                    @endif

                    {{ $slot }}
                </main>
            </div>
        </div>
    </div>

    @stack('modals')

    @livewire('wire-elements-modal')
    @stack('scripts')

    @livewireScriptConfig

    @filamentScripts
    <!-- Scripts -->
    @vite('resources/js/app.js')
</body>

</html>

Based on https://filamentphp.com/docs/3.x/tables/installation#configuring-your-layout

Installation - Table Builder - Filament

swilla•13mo ago

app.js:

import "./bootstrap";

import {
  Livewire,
  Alpine,
} from "../../vendor/livewire/livewire/dist/livewire.esm";
import focus from "@alpinejs/focus";
import ui from "@alpinejs/ui";
import Tooltip from "@ryangjchandler/alpine-tooltip";

Alpine.plugin(focus);
Alpine.plugin(ui);
Alpine.plugin(Tooltip);

Livewire.start();

import "./bootstrap";

import {
  Livewire,
  Alpine,
} from "../../vendor/livewire/livewire/dist/livewire.esm";
import focus from "@alpinejs/focus";
import ui from "@alpinejs/ui";
import Tooltip from "@ryangjchandler/alpine-tooltip";

Alpine.plugin(focus);
Alpine.plugin(ui);
Alpine.plugin(Tooltip);

Livewire.start();

Gaming

Programming

Buttons have loading state after upgrade Filament v3 Upgrade