enh: chat loading screen

This commit is contained in:
Timothy Jaeryang Baek 2025-01-26 23:17:58 -08:00
parent 91221cd4b1
commit 6f3c92f6d5

View File

@ -82,10 +82,12 @@
import EventConfirmDialog from '../common/ConfirmDialog.svelte'; import EventConfirmDialog from '../common/ConfirmDialog.svelte';
import Placeholder from './Placeholder.svelte'; import Placeholder from './Placeholder.svelte';
import NotificationToast from '../NotificationToast.svelte'; import NotificationToast from '../NotificationToast.svelte';
import Spinner from '../common/Spinner.svelte';
export let chatIdProp = ''; export let chatIdProp = '';
let loaded = false; let loading = false;
const eventTarget = new EventTarget(); const eventTarget = new EventTarget();
let controlPane; let controlPane;
let controlPaneComponent; let controlPaneComponent;
@ -133,6 +135,7 @@
$: if (chatIdProp) { $: if (chatIdProp) {
(async () => { (async () => {
loading = true;
console.log(chatIdProp); console.log(chatIdProp);
prompt = ''; prompt = '';
@ -141,11 +144,9 @@
webSearchEnabled = false; webSearchEnabled = false;
imageGenerationEnabled = false; imageGenerationEnabled = false;
loaded = false;
if (chatIdProp && (await loadChat())) { if (chatIdProp && (await loadChat())) {
await tick(); await tick();
loaded = true; loading = false;
if (localStorage.getItem(`chat-input-${chatIdProp}`)) { if (localStorage.getItem(`chat-input-${chatIdProp}`)) {
try { try {
@ -1861,7 +1862,7 @@
: ' '} w-full max-w-full flex flex-col" : ' '} w-full max-w-full flex flex-col"
id="chat-container" id="chat-container"
> >
{#if !chatIdProp || (loaded && chatIdProp)} {#if chatIdProp === '' || (!loading && chatIdProp)}
{#if $settings?.backgroundImageUrl ?? null} {#if $settings?.backgroundImageUrl ?? null}
<div <div
class="absolute {$showSidebar class="absolute {$showSidebar
@ -2065,5 +2066,11 @@
{eventTarget} {eventTarget}
/> />
</PaneGroup> </PaneGroup>
{:else if loading}
<div class=" flex items-center justify-center h-full w-full">
<div class="m-auto">
<Spinner />
</div>
</div>
{/if} {/if}
</div> </div>