From 5f44c19cc04d13465d91bd74ca7dbb92350371fa Mon Sep 17 00:00:00 2001
From: allrude <allrude@gmail.com>
Date: Mon, 2 Mar 2026 12:20:32 +0100
Subject: [PATCH] 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+
---
 view/base/templates/script/store/message-store.phtml | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/view/base/templates/script/store/message-store.phtml b/view/base/templates/script/store/message-store.phtml
index e8de3d2..b3f46f7 100644
--- a/view/base/templates/script/store/message-store.phtml
+++ b/view/base/templates/script/store/message-store.phtml
@@ -24,13 +24,14 @@ $fetchCookies = !(bool)$block->getSkipCookies();
             fetchCookies: <?= /* @noEscape */ $fetchLocalStorage ? 'true' : 'false' ?>,
             init() {
                 if (this.fetchLocalStorage) {
-                    Alpine.effect(async () => {
+                    // Listen for LocalStorage initialization and load messages once
+                    document.addEventListener('loki:init:localstorage-store', async () => {
                         const messageSection = await Alpine.store('LocalStorage').get('messages');
                         if (messageSection && messageSection.messages) {
                             this.messages = [...this.messages, ...messageSection.messages];
                             this.reset();
                         }
-                    });
+                    }, { once: true });
                 }
             },
             getMessages() {
@@ -63,8 +64,8 @@ $fetchCookies = !(bool)$block->getSkipCookies();
                     return !(message.type === type && message.text === text);
                 });
             },
-            saveMessage(type, text) {
-                const messages = this.getMessagesFromStore();
+            async saveMessage(type, text) {
+                const messages = await this.getMessagesFromStore();
                 messages.push({type, text});
                 this.setMessageInStore(messages);
             },