It seems like you're experiencing an issue with your Alpine.js timer where it's decrementing by 2 seconds instead of 1. Without seeing the actual code, I can only provide a general solution. Here's a basic example of how you might set up a countdown timer with Alpine.js that decrements by 1 second at a time:
<div x-data="timer()" x-init="start()">
<span x-text="timeRemaining"></span>
<div x-show="timeRemaining <= 560"> <!-- Show modal when time is less than or equal to 560 -->
<!-- Modal content here -->
</div>
</div>
<script>
function timer() {
return {
timeRemaining: 600,
start() {
const interval = setInterval(() => {
if (this.timeRemaining > 0) {
this.timeRemaining--;
} else {
clearInterval(interval);
// Trigger the logout or show the modal
}
}, 1000);
}
};
}
</script>
Make sure you only have one interval running at a time. If you accidentally set up multiple intervals, they could each decrement the timer, resulting in it counting down by 2s, 3s, etc., depending on how many intervals are running.
If you're using Livewire to manage the state, you might be sending an update to the Alpine component more than once, or there might be a conflict between Livewire's reactivity and Alpine's reactivity. Ensure that you're not initializing the Alpine component multiple times, which could cause multiple intervals to be created.
If you're still having trouble, please provide the actual Livewire and Alpine.js code you're using, and I can give you a more specific solution.