Svelte {#await} .. {: then} заблокируйте дублирование html с новыми данными

Question

Я пытаюсь использовать блок Sveltes {#await}..{:then}, чтобы показать изображение дня НАСА, но получаю странный прерывистый результат. На первой странице загрузите изображение и данные загрузятся в полном порядке. Когда я изменяю дату с помощью средства выбора даты на странице, предполагается, что текущее изображение и описание заменяются изображением и описанием для выбранной даты, которые извлекаются асинхронно. Однако иногда происходит то, что html с новыми данными просто добавляется в конец страницы, поэтому изображение и описание для ранее выбранной даты все еще там.

Кто-нибудь может сказать мне, как я могу убедиться, что предыдущие данные удалены? Или это могло быть какое-то состояние гонки?

<script>
    import { fade } from 'svelte/transition';
    import Loader from '../components/Loader.svelte';
    import {getContext} from 'svelte';
    import { format, parseISO } from 'date-fns'

    let todaysDate =  format(new Date(), 'y-MM-dd');
    let selectedDate = todaysDate;

    async function getPhotoOfTheDay() {
        let data = "";
        if (selectedDate !== todaysDate) {
            let response = await fetch(`https://api.nasa.gov/planetary/apod?api_key=DEMO_KEY&date=` + selectedDate);
            data = await response.json();
        } else {
            console.log("use in memory data");
            data = getContext('dailyImage');
        }
        return data;
    }

    $: imageData = getPhotoOfTheDay(selectedDate);
    $: formattedDate = format(parseISO(selectedDate), 'MMMM d, y')
</script>

<svelte:head>
    <title>All About Space: Photo of the day</title>
</svelte:head>

<div id="content">
    <h1>Photo of the day on {formattedDate}</h1>
    <p class="instructions">Choose a day to see the photo of the day for that date:
        <input type="date" bind:value="{selectedDate}" max="{todaysDate}" >
    </p>

    {#if imageData===""}
        <p>error.. no data for the selected date</p>
    {:else}
        {#await imageData}
            <Loader show="true"/>
        {:then image}
            <div class="image-result" transition:fade="{{duration: 300}}">
                <h2>{image.title}</h2>
                <p>
                    <img src="{image.url}" alt="{image.title}" title="{image.title}"/>
                    {image.explanation}
                </p>
            </div>
        {:catch error}

        {error.message}

        {/await}

    {/if}
</div>

<style lang="stylus">
    #content {
        background: rgba(0,0,0,0.8);
        backdrop-filter: blur(6px);
        border-radius: 5px;
        width: 75%;
        margin: 0 auto;
        padding: 1rem 2rem;

        &:after {
            clear: both;
            content: "";
            display: block;
            width: 100%;
        }
    }

    .instructions {
        border-bottom: 1px solid gray;
        padding-bottom: 2rem;
    }

    input {
        padding: 0.5rem 1rem;
        font-size: 1rem;
        cursor: pointer;
        border: 0;
        border-radius: 3px;
    }

    img {
        float: left;
        padding: 0 1rem 1rem 0;
        max-width: 50%;
    }
</style>

Answer 1

Есть активная ошибка переходов в блоках ожидания. Кажется, это ваша проблема: https://github.com/sveltejs/svelte/issues/1591