From 33cca2e0449aa3d16d6d83a6e71dbc478e242a7c Mon Sep 17 00:00:00 2001
From: davelopez <46503462+davelopez@users.noreply.github.com>
Date: Fri, 22 Mar 2024 14:18:43 +0100
Subject: [PATCH] Add history placeholder to prevent multiple requests

And avoid reactivity issues with lost references
---
 client/src/stores/historyStore.ts | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/client/src/stores/historyStore.ts b/client/src/stores/historyStore.ts
index 87d80b14f88..49ec6b45e04 100644
--- a/client/src/stores/historyStore.ts
+++ b/client/src/stores/historyStore.ts
@@ -68,12 +68,26 @@ export const useHistoryStore = defineStore("historyStore", () => {
     const getHistoryById = computed(() => {
         return (historyId: string) => {
             if (!storedHistories.value[historyId]) {
+                // Create a placeholder to avoid multiple requests for the same history
+                // and reuse the reference to avoid reactivity issues
+                storedHistories.value[historyId] = createHistoryPlaceholder(historyId);
+
+                // TODO: Try to remove this as it can cause computed side effects
                 loadHistoryById(historyId);
             }
-            return storedHistories.value[historyId] ?? null;
+            return storedHistories.value[historyId]!;
         };
     });
 
+    function createHistoryPlaceholder(historyId: string) {
+        const history = {
+            id: historyId,
+            name: "Loading...",
+            contents_active: { active: 0, deleted: 0, hidden: 0 },
+        } as AnyHistory;
+        return history;
+    }
+
     const getHistoryNameById = computed(() => {
         return (historyId: string) => {
             const history = getHistoryById.value(historyId);