Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Bug]: Lazy loaded table with HTML placeholder results in browser console warnings and errors #2155

Open
qwasyx0 opened this issue Jan 6, 2025 · 6 comments
Open

[Bug]: Lazy loaded table with HTML placeholder results in browser console warnings and errors #2155

qwasyx0 opened this issue Jan 6, 2025 · 6 comments
Labels
bug Something isn't working

Comments

@qwasyx0
Copy link

qwasyx0 commented Jan 6, 2025 •
edited
Loading

What happened?

Having a placeholder HTML produces the same issue as in #1990.

How to reproduce the bug

Add livewire HTML placeholder to lazy loaded table:

public function placeholder()
    {
        return <<<'HTML'
        <div class="w-full h-20 bg-white rounded shadow-md">
            <div class="flex items-center justify-center w-full h-full bg-autosas-opacity-blank">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-10 h-10 text-zinc-700 animate-spin" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                </svg>
            </div>
        </div>
        HTML;
    }

This results in the same exact errors in console after table is fully loaded.

Package Version

3.5.10

PHP Version

8.3.x

Laravel Version

11.37.0

Alpine Version

3.14.8

Theme

Tailwind 3.x

Notes

My project is using Livewire v3.5.18 and Tailwind 3.4.17

Error Message

Uncaught ReferenceError: currentlyReorderingStatus is not defined
@qwasyx0 qwasyx0 added the bug Something isn't working label Jan 6, 2025
@lrljoe
Copy link
Collaborator

lrljoe commented Jan 11, 2025

Are you injecting the assets, or bundling them?

@qwasyx0
Copy link
Author

qwasyx0 commented Jan 12, 2025

config/livewire-tables.php

    /**
     * Cache Rappasoft Frontend Assets
     */
    'cache_assets' => false,

    /**
     * Enable or Disable automatic injection of core assets
     */
    'inject_core_assets_enabled' => false,

    /**
     * Enable or Disable automatic injection of third-party assets
     */
    'inject_third_party_assets_enabled' => false,

    /**
     * Enable Blade Directives (Not required if automatically injecting or using bundler approaches)
     */
    'enable_blade_directives' => false,

resources/js/app.js

import './bootstrap';

import { Livewire, Alpine } from '../../vendor/livewire/livewire/dist/livewire.esm';
import Clipboard from '@ryangjchandler/alpine-clipboard'
import '../../vendor/rappasoft/laravel-livewire-tables/resources/imports/laravel-livewire-tables-all.js';
import 'livewire-sortable'

import mask from '@alpinejs/mask'

import flatpickr from "flatpickr";
import { Czech } from "flatpickr/dist/l10n/cs.js"

flatpickr.localize(Czech);

Alpine.plugin(mask)
Alpine.plugin(Clipboard)
Livewire.start()

tailwind.config.js

import defaultTheme from 'tailwindcss/defaultTheme';

/** @type {import('tailwindcss').Config} */
export default {
    darkMode: ['class', '[data-theme="dark"]'],
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './vendor/rappasoft/laravel-livewire-tables/resources/views/*.blade.php',
        './vendor/rappasoft/laravel-livewire-tables/resources/views/**/*.blade.php',
        './app/Livewire/*.php',
        './app/Livewire/**/*.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
        "./vendor/robsontenorio/mary/src/View/Components/**/*.php"
    ],

    theme: {
        extend: {
            fontFamily: {
                sans: ['Figtree', ...defaultTheme.fontFamily.sans],
            },
        },
    },

    plugins: [
        require("daisyui"),
        require('@tailwindcss/forms'),
        require('@tailwindcss/typography'),
    ],
    daisyui: {
        themes: ["light", "dark", "coffee", "cupcake"],
    },
};

resources/views/layouts/app-blade.php

<!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>{{ config('app.name', 'Laravel') }}</title>

    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.bunny.net">
    <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" />

    <!-- Scripts -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script>

    @livewireStyles
    @vite(['resources/css/app.css', 'resources/js/app.js'])

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

<body class="font-sans antialiased">

    @include('layouts.navigation')

    <x-main-mst with-nav full-width>

        @include('layouts.sidebar')

        <x-slot:content>
            {{ $slot }}
        </x-slot:content>

    </x-main-mst>

    <x-mary-toast />

    @livewireScriptConfig
</body>

@lrljoe
Copy link
Collaborator

lrljoe commented Jan 17, 2025

Thanks for the above, I will look at this issue this weekend

@lrljoe
Copy link
Collaborator

lrljoe commented Jan 19, 2025

So I've got a fix for this, I just need to do some additional testing.

@sdsrg22
Copy link

sdsrg22 commented Feb 13, 2025

Hi @lrljoe by the time you come up with a fix, could you atleast guide us on how can we fix it ourselves?

@lrljoe
Copy link
Collaborator

lrljoe commented Feb 15, 2025 •
edited
Loading

I'm currently reviewing the livewire core placeholder behaviour to validate whether my theory is correct or not as to why it's doing this, as I may need to put a fix into Livewire itself.

I fully intend however to do a release this weekend that has an interim fix at least, along with a load of other tweaks.

It'll come out on Sunday.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@qwasyx0 @lrljoe @sdsrg22