Mask UI blocking when loading large chat session

src/lib/Chat.svelte

@@ -10,11 +10,10 @@
     submitExitingPromptsNow,
     continueMessage,
     getMessage,
+    currentChatMessages,
+    setCurrentChat,
 
-    currentChatId,
-
-    currentChatMessages
-
+    currentChatId
 
   } from './Storage.svelte'
   import {
@@ -99,6 +98,7 @@
   
   $: onStateChange($checkStateChange, $showSetChatSettings, $submitExitingPromptsNow, $continueMessage)
 
+  setCurrentChat(0)
   // Make sure chat object is ready to go
   updateChatSettings(chatId)
 
@@ -112,8 +112,7 @@
   onMount(async () => {
     if (!chat) return
 
-    $currentChatId = chatId
-    $currentChatMessages = chat.messages
+    setCurrentChat(chatId)
 
     chatRequest = new ChatRequest()
     chatRequest.setChat(chat)
@@ -355,9 +354,9 @@
   </div>
 </nav>
 
-<Messages messages={$currentChatMessages} chatId={chatId} />
+<Messages messages={$currentChatMessages} chatId={chatId} chat={chat} />
 
-{#if chatRequest.updating === true}
+{#if chatRequest.updating === true || $currentChatId === 0}
   <article class="message is-success assistant-message">
     <div class="message-body content">
       <span class="is-loading" ></span>
@@ -366,7 +365,7 @@
   </article>
 {/if}
 
-{#if $currentChatMessages.length === 0 || ($currentChatMessages.length === 1 && $currentChatMessages[0].role === 'system')}
+{#if $currentChatId !== 0 && ($currentChatMessages.length === 0 || ($currentChatMessages.length === 1 && $currentChatMessages[0].role === 'system'))}
   <Prompts bind:input />
 {/if}
 </div>

src/lib/EditMessage.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import Code from './Code.svelte'
   import { afterUpdate, createEventDispatcher, onMount } from 'svelte'
-  import { deleteMessage, chatsStorage, deleteSummaryMessage, truncateFromMessage, submitExitingPromptsNow, continueMessage, updateMessages } from './Storage.svelte'
+  import { deleteMessage, deleteSummaryMessage, truncateFromMessage, submitExitingPromptsNow, continueMessage, updateMessages } from './Storage.svelte'
   import { getPrice } from './Stats.svelte'
   import SvelteMarkdown from 'svelte-markdown'
   import type { Message, Model, Chat } from './Types.svelte'
@@ -14,9 +14,8 @@
 
   export let message:Message
   export let chatId:number
+  export let chat:Chat
 
-
-  $: chat = $chatsStorage.find((chat) => chat.id === chatId) as Chat
   $: chatSettings = chat.settings
 
   const isError = message.role === 'error'
@@ -49,7 +48,7 @@
   })
 
   afterUpdate(() => {
-    if (message.content.slice(-5).includes('```')) refreshCounter++
+    if (message.streaming && message.content.slice(-5).includes('```')) refreshCounter++
   })
 
   const edit = () => {

src/lib/Messages.svelte

@@ -1,19 +1,19 @@
 <script lang="ts">
   // Iterate messages
   import type { Message, Chat } from './Types.svelte'
-  import { chatsStorage, globalStorage } from './Storage.svelte'
+  import { globalStorage } from './Storage.svelte'
   import EditMessage from './EditMessage.svelte'
 
   export let messages : Message[]
   export let chatId: number
+  export let chat: Chat
   
-  $: chat = $chatsStorage.find((chat) => chat.id === chatId) as Chat
   $: chatSettings = chat.settings
 
 </script>
 
 {#each messages as message, i}
   {#if !((message.summarized) && $globalStorage.hideSummarized) && !(i === 0 && message.role === 'system' && !chatSettings.useSystemPrompt)}
-  {#key message.uuid}<EditMessage bind:message={message} chatId={chatId} />{/key}
+  <EditMessage bind:message={message} chatId={chatId} chat={chat} />
   {/if}
 {/each}

src/lib/Storage.svelte

@@ -222,6 +222,19 @@
     return getChat(chatId).messages
   }
 
+  let setChatTimer: any
+  export const setCurrentChat = (chatId: number) => {
+    clearTimeout(setChatTimer)
+    if (!chatId) {
+      currentChatId.set(0)
+      currentChatMessages.set([])
+    }
+    setChatTimer = setTimeout(() => {
+      currentChatId.set(chatId)
+      currentChatMessages.set(getChat(chatId).messages)
+    }, 10)
+  }
+
   let setMessagesTimer: any
   export const setMessages = (chatId: number, messages: Message[]) => {
     if (get(currentChatId) === chatId) {