Level 34
@zemitis livewire @entangle might be what you are looking for https://laravel-livewire.com/docs/2.x/alpine-js
Mar 10, 2021
7
Level 4
Get Livewire loading state in JavaScript
Hello,
I know that we can use wire:loading directive to customize HTML when livewire is loading.
But I would like to use https://ricostacruz.com/nprogress/ to show loading state.
Do you think it is possible to somehow get loading state in JavaScript start and stop NProgress.js bar?
Level 4
@neilstee, thanks, I will try to make some prototype with it.
1 like
Level 4
I tried @entangle option, but didn't manage to get useful result with it.
I ended up with following solution:
Livewire provides useful hooks to hook in your code.
Code in app.js :
import NProgress from 'nprogress'
NProgress.configure({ showSpinner: false });
document.addEventListener("DOMContentLoaded", () => {
Livewire.hook('message.sent', (message, component) => {
NProgress.start();
})
Livewire.hook('message.processed', (message, component) => {
NProgress.done();
})
});
5 likes
Level 34
Glad you have it sorted @martinszemitis 💪🏼
Level 1
@martinszemitis tanks
Level 1
@martinszemitis this one is not working in livewire 3
Level 2
@aakashdesai-pro you can still do
Livewire.hook('commit', ({ component, commit, respond, succeed, fail }) => {
// Runs immediately before a commit's payload is sent to the server...
respond(() => {
// Runs after a response is received but before it's processed...
})
succeed(({ snapshot, effect }) => {
// Runs after a successful response is received and processed
// with a new snapshot and list of effects...
})
fail(() => {
// Runs if some part of the request failed...
})
})
Please or to participate in this conversation.