Skip to content

Commit 5f44c19

Browse files
committed
Fix infinite loop and page freeze caused by async Alpine.effect
WHY: Since version 1.1.19 (Feb 16, 2026), Alpine.store('LocalStorage').get() became asynchronous, but the Message store was using it incorrectly inside Alpine.effect(), causing: 1. Infinite reactivity loops - Alpine.effect() expects synchronous functions for proper dependency tracking. Using async causes the effect to return a Promise immediately, preventing Alpine from tracking reactive dependencies. 2. The effect modifies this.messages inside itself, triggering re-runs infinitely as Alpine tries to track the dependency on this.messages. 3. Page freezes and high CPU usage as the browser gets stuck in the loop. 4. saveMessage() was calling getMessagesFromStore() without await, causing it to try pushing to a Promise instead of an array. HOW: 1. Replaced Alpine.effect(async () => {...}) with a single-run event listener: - Listen for 'loki:init:localstorage-store' event (dispatched by LocalStorage store when initialized) - Use { once: true } to ensure it only runs once - Load messages asynchronously without reactive tracking issues - No infinite loops since we're not inside Alpine's reactivity system 2. Made saveMessage() async and added await before getMessagesFromStore() to properly handle the Promise returned by the async method. RESULT: - Messages load correctly from LocalStorage once on initialization - No infinite loops or page freezes - Proper async/await pattern throughout - Compatible with async LocalStorage.get() from base 1.1.19+
1 parent ceeaee5 commit 5f44c19

1 file changed

Lines changed: 5 additions & 4 deletions

File tree

view/base/templates/script/store/message-store.phtml

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -24,13 +24,14 @@ $fetchCookies = !(bool)$block->getSkipCookies();
2424
fetchCookies: <?= /* @noEscape */ $fetchLocalStorage ? 'true' : 'false' ?>,
2525
init() {
2626
if (this.fetchLocalStorage) {
27-
Alpine.effect(async () => {
27+
// Listen for LocalStorage initialization and load messages once
28+
document.addEventListener('loki:init:localstorage-store', async () => {
2829
const messageSection = await Alpine.store('LocalStorage').get('messages');
2930
if (messageSection && messageSection.messages) {
3031
this.messages = [...this.messages, ...messageSection.messages];
3132
this.reset();
3233
}
33-
});
34+
}, { once: true });
3435
}
3536
},
3637
getMessages() {
@@ -63,8 +64,8 @@ $fetchCookies = !(bool)$block->getSkipCookies();
6364
return !(message.type === type && message.text === text);
6465
});
6566
},
66-
saveMessage(type, text) {
67-
const messages = this.getMessagesFromStore();
67+
async saveMessage(type, text) {
68+
const messages = await this.getMessagesFromStore();
6869
messages.push({type, text});
6970
this.setMessageInStore(messages);
7071
},

0 commit comments

Comments
 (0)