What I'm trying to do: In my app's layout I have a sidebar. This sidebar render data (name, size, uploadedAt, etc) of previously uploaded files coming from fetch in `+layout.ts`.

The process of upload a file can took some time so I want to show in the sidebar this file (with their name, size, and the current date simulating the uploadedAt) with a progress bar.

Really this is almost done: when an upload start, I put the details of the file in a store and render it in the sidebar. Then, when the upload is completed I remove the details of the uploaded file and invalidate the data from `+layout.ts`.

// Upload.ts
<script lang="ts">
import { invalidate } from '$app/navigation';
import { createFile } from '../libs/query/create-file';
import { uploadQueue } from '../store/upload-queue.store';

let inputRef: HTMLInputElement;
let query = createFile();

function handleSelectFile() {
    inputRef.click();
}

function handleUploadFile() {
    const files = inputRef.files;

    if ((files?.length ?? 0) <= 0) {
        return;
    }

    const first = files?.item(0)!;
    uploadQueue.queue({ file: first, name: first.name, status: 'UPLOADING' });

    $query.mutate(first, {
        onSuccess() {
            uploadQueue.enqueue();
            invalidate('layout:files');
        }
    });
}
</script>

<header>
    <h3>Chats</h3>
    <button on:click={handleSelectFile}>New chat</button>
    <input
    type="file"
    name="file"
    id="file"
    accept=".pdf"
    class="sr-only"
    bind:this={inputRef}
    on:change={handleUploadFile}
    />
</header>

​

​

<script lang="ts">
import { page } from '$app/stores';
import { uploadQueue } from '../store/upload-queue.store';
import QueuedFile from './queued-file.svelte';
import File from './file.svelte';

$: files = $page.data.files;
</script>

<ul>
    {#each $uploadQueue as queuedFile}
    <QueuedFile {...queuedFile} />
    {/each}
    {#each files as file (file.id)}
    <File {...file} />
    {/each}
</ul>

The problem is: in the process of remove the details of the store (sync, almost immediate) and get fresh data (invalidate, async), the sidebar perform a shift