Eu tenho algumas caixas de verificação que quando clicado irá causar uma série de alterações no DOM, e este congela-se a aplicação por alguns segundos. Eu gostaria que as caixas de verificação para atualização de primeira, e/ou exibir um indicador de espera. Tentei várias coisas, mas por algum motivo nada mais no DOM vai atualizar antes do congelamento. As alterações são feitas em uma tabela grande, removendo ou adicionando colunas inteiras, e ele age como se este tem maior prioridade sobre qualquer outra coisa, porque qualquer outro tenta atualizar o DOM depois de clicar a caixa de seleção não passa até que a tabela foi concluída re-renderização. FWIW, eu posso usar o console.log para exibir uma mensagem antes de a tabela de atualizações, e também depois de conclui-lo por algum motivo.
0
import {tick} from "svelte";
let checked = false;
$: applyChanges(checked);
async function applyChanges() {
messageVisible = true
await tick()
requestAnimationFrame(() => {
requestAnimationFrame(() => {
// do the stuff that causes a lots of dom updates
})
})
}
O await tick() aplica-se o messageVisible alterações para o DOM.
O casal raf vai aguardar o navegador para desenhar atualizado DOM.