Livewire loading spinner issue while hotjar recording user session

It sounds like the issue you're experiencing may be related to how Hotjar interacts with dynamic content on your website, particularly content that is manipulated by Livewire. Livewire's wire:loading directive is used to show loading states when Livewire is making requests to the server.

Here are a few steps you can take to troubleshoot and potentially resolve the issue:

1. Check for JavaScript Errors: Open your browser's developer tools and check the console for any JavaScript errors that might be occurring when Hotjar is recording. An error could be preventing Livewire from updating the DOM correctly.

2. Exclude Hotjar from Livewire Requests: Sometimes, third-party scripts can interfere with AJAX requests. You can try to exclude Hotjar from Livewire requests by modifying the Livewire JavaScript configuration. This is a bit of a hack and not an official feature, but you can try something like this:

document.addEventListener('livewire:load', function () {
    Livewire.hook('message.sent', function (message, component) {
        window.hj = window.hj || function () { (hj.q = hj.q || []).push(arguments) };
        hj('excludeIf', function () { return true; });
    });
});

This script uses Livewire's hooks to tell Hotjar to exclude its tracking during Livewire requests. Please note that this might disable some of Hotjar's recording features for those requests.

1. Customize the Loading Spinner: If the issue is specifically with the loading spinner, you can try to implement your own loading indicator logic. You can use Livewire's JavaScript events to manually show and hide a loading spinner:

<div id="loading-spinner" style="display: none;">Loading...</div>

<script>
document.addEventListener('livewire:load', function () {
    var loadingSpinner = document.getElementById('loading-spinner');

    Livewire.on('loading', function() {
        loadingSpinner.style.display = 'block';
    });

    Livewire.on('finished', function() {
        loadingSpinner.style.display = 'none';
    });
});
</script>

Then, in your Livewire component, you can emit these events:

$this->emit('loading');
// Your logic here
$this->emit('finished');

1. Contact Hotjar Support: If none of the above solutions work, it might be a good idea to contact Hotjar support. They may have encountered this issue before and could have a solution or workaround.

Remember to test these changes in a development environment before applying them to your live website. If the issue persists, consider providing more details on the Laracasts forum, such as specific error messages or behaviors, so that the community can offer more targeted advice.