F
Filament•2w ago
dyo

show table loading when filtering data in resource page

Can someone help me to show table loading when filtering data in resource page?
4 Replies
LeandroFerreira
LeandroFerreira•2w ago
maybe a <div wire:loading>Loading...</div> via render hooks ?
Render hooks - Core Concepts - Filament
dyo
dyoOP•2w ago
thanks, I'll try..
Auth1Specialist
Auth1Specialist•2w ago
I added a global loader in my project, which also works on tables (filtering, searching, ...). I based it off some snippet online IIRC, but here's my adapted code: 
    document.addEventListener('alpine:init', () => Alpine.store('isLoading', {
        value: false,
        delayTimer: null,
        set(value) {
            clearTimeout(this.delayTimer);
            if (value === false) {
                this.value = false;
                document.getElementById('global-loading-indicator').style.display = 'none';
            } else {
                this.delayTimer = setTimeout(() => {
                    this.value = true;
                    document.getElementById('global-loading-indicator').style.display = 'block';
                }, 700);
            }
        }
    }))
    document.addEventListener("livewire:init", () => {
        Livewire.hook('commit.prepare', () => {
            Alpine.store('isLoading').set(true)
        })
        Livewire.hook('commit', ({component, commit, respond, succeed, fail}) => {
            succeed(() => {
                queueMicrotask(() => Alpine.store('isLoading').set(false))
            })
            fail(() => {
                queueMicrotask(() => Alpine.store('isLoading').set(false))
            })
        })
    })
    document.addEventListener('alpine:init', () => Alpine.store('isLoading', {
        value: false,
        delayTimer: null,
        set(value) {
            clearTimeout(this.delayTimer);
            if (value === false) {
                this.value = false;
                document.getElementById('global-loading-indicator').style.display = 'none';
            } else {
                this.delayTimer = setTimeout(() => {
                    this.value = true;
                    document.getElementById('global-loading-indicator').style.display = 'block';
                }, 700);
            }
        }
    }))
    document.addEventListener("livewire:init", () => {
        Livewire.hook('commit.prepare', () => {
            Alpine.store('isLoading').set(true)
        })
        Livewire.hook('commit', ({component, commit, respond, succeed, fail}) => {
            succeed(() => {
                queueMicrotask(() => Alpine.store('isLoading').set(false))
            })
            fail(() => {
                queueMicrotask(() => Alpine.store('isLoading').set(false))
            })
        })
    })
Add some CSS on top, and voila: 
.progress {
    background-color: rgba(229,233,235, 0);
    height: 5px;
    position: relative;
    width: 100%;
    margin-top: -2px;
}

.progress-bar-red {
    height: 100%;
    position: relative;
    background-color: var(--mainTheme);
    animation: cssload-width 3.45s cubic-bezier(0.45, 0, 1, 1) 1;
    -o-animation: cssload-width 3.45s cubic-bezier(0.45, 0, 1, 1) 1;
    -ms-animation: cssload-width 3.45s cubic-bezier(0.45, 0, 1, 1) 1;
    -webkit-animation: cssload-width 3.45s cubic-bezier(0.45, 0, 1, 1) 1;
    -moz-animation: cssload-width 3.45s cubic-bezier(0.45, 0, 1, 1) 1;
}

@keyframes cssload-width {
    0%, 100% {
        transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
    }
    0% {
        width: 0;
    }
    100% {
        width: 100%;
    }
}

@-o-keyframes cssload-width {
    0%, 100% {
        -o-transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
    }
    0% {
        width: 0;
    }
    100% {
        width: 100%;
    }
}

@-ms-keyframes cssload-width {
    0%, 100% {
        -ms-transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
    }
    0% {
        width: 0;
    }
    100% {
        width: 100%;
    }
}

@-webkit-keyframes cssload-width {
    0%, 100% {
        -webkit-transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
    }
    0% {
        width: 0;
    }
    100% {
        width: 100%;
    }
}

@-moz-keyframes cssload-width {
    0%, 100% {
        -moz-transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
    }
    0% {
        width: 0;
    }
    100% {
        width: 100%;
    }
}
.progress {
    background-color: rgba(229,233,235, 0);
    height: 5px;
    position: relative;
    width: 100%;
    margin-top: -2px;
}

.progress-bar-red {
    height: 100%;
    position: relative;
    background-color: var(--mainTheme);
    animation: cssload-width 3.45s cubic-bezier(0.45, 0, 1, 1) 1;
    -o-animation: cssload-width 3.45s cubic-bezier(0.45, 0, 1, 1) 1;
    -ms-animation: cssload-width 3.45s cubic-bezier(0.45, 0, 1, 1) 1;
    -webkit-animation: cssload-width 3.45s cubic-bezier(0.45, 0, 1, 1) 1;
    -moz-animation: cssload-width 3.45s cubic-bezier(0.45, 0, 1, 1) 1;
}

@keyframes cssload-width {
    0%, 100% {
        transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
    }
    0% {
        width: 0;
    }
    100% {
        width: 100%;
    }
}

@-o-keyframes cssload-width {
    0%, 100% {
        -o-transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
    }
    0% {
        width: 0;
    }
    100% {
        width: 100%;
    }
}

@-ms-keyframes cssload-width {
    0%, 100% {
        -ms-transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
    }
    0% {
        width: 0;
    }
    100% {
        width: 100%;
    }
}

@-webkit-keyframes cssload-width {
    0%, 100% {
        -webkit-transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
    }
    0% {
        width: 0;
    }
    100% {
        width: 100%;
    }
}

@-moz-keyframes cssload-width {
    0%, 100% {
        -moz-transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
    }
    0% {
        width: 0;
    }
    100% {
        width: 100%;
    }
}
dyo
dyoOP•2w ago
That's cool.. I'll take a look.. thanks..

Did you find this page helpful?