// The alpine:init event listener is triggered when Alpine.js initializes on the webpage.
document.addEventListener('alpine:init', () => {
    // Inside the callback function, Alpine.data() is used to define a new Alpine.js component named "loader."
    Alpine.data('loader', () => ({
        loading: true,
        showLoader() {
            this.loading = true;
            document.body.classList.add('backdrop');
        },
        hideLoader() {
            this.loading = false;
            document.body.classList.remove('backdrop');
        }
    }));
});