Início / coding / Perguntas / 79295915
Accepted
Leonardo Cavalcante
Asked: 2024-12-20 08:15:12 +0800 CST

Svelte 5: O formulário aparece brevemente e depois desaparece no carregamento da página ao usar renderização condicional para uma imagem

  • 772

Estou encontrando um problema estranho com um componente Svelte 5, onde um formulário pisca brevemente na tela por cerca de meio segundo quando a página carrega e depois desaparece. Isso acontece quando tenho renderização condicional (usando {#if}) para uma imagem E tenho bind:value={name} se eu remover AMBOS o formulário aparece.

<script>
    let name = $state('');
    let name2 = 'test';
</script>

<body>
    <div class="container">
        {#if name.toLowerCase() === name2.toLowerCase()}
            <img src="example" alt="fantasma" class="fantasma" />
        {/if}
        <div class="box">
            <form class="form-group" action="">
                <label for="name" class="pergunta">Seu nome completo</label>
                <input type="text" id="name" class="input" bind:value={name} />
                <label for="date" class="pergunta">data de nascimento</label>
                <input type="date" id="data" class="input" />
            </form>
        </div>
    </div>
</body>

<style>
    .fantasma {
        width: 24%;
        height: auto;
    }
    .container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        flex-direction: column;
        background-color: #f0f0f0;
        margin: 0;
    }
    .form-group {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .pergunta {
        margin-bottom: 7px;
    }
    .input {
        width: 300px;
        margin-bottom: 20px;
    }

    .box {
        width: 370px;
        height: 180px;
        margin: 40px;
        align-items: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        border-radius: 10px;
        background-color: red;
        border: 2.13px solid #ccc;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
</style>

Entendo que inicialmente, name está vazio (''), então a condição name.toLowerCase() === name2.toLowerCase() é avaliada como false. Isso impede que a imagem seja renderizada, que é o comportamento pretendido. No entanto, não entendo por que isso faz com que o formulário desapareça após aparecer brevemente. Parece que a renderização condicional está de alguma forma interferindo na renderização inicial do próprio formulário.

O que eu tentei:

  • Remover o bloco {#if}: Não resolve o problema.
  • Remover bind:value={name}: Não resolve o problema.
  • Remover {#if} e bind:value: resolve o problema de desaparecimento do formulário, mas obviamente remove a exibição condicional da imagem.
javascript

1 respostas

  1. Best Answer

    Geralmente você não deve ter um <body>no componente. Ao usar o SvelteKit, já há um no app.html, adicionar outro provavelmente causa um erro de tempo de execução na hidratação (verifique o console do navegador).

    O que você vê inicialmente é o HTML da renderização do lado do servidor que é corrigido pelo navegador removendo a tag body duplicada. Uma vez que o JS carrega e tenta hidratar a página, ele percorre o DOM esperando elementos onde agora não há nenhum.

    • 0

relate perguntas