Quando executamos um projeto Blazor, até que todos os arquivos da aplicação sejam baixados pelo Browser, é exibido um texto Loading… (Figura 1)
Muita gente me pergunta como fazer para substituir esse texto por um gif animado, ou alguma “splash page” mais elaborada. Apesar de ser muito simples fazer isso, vou deixar documentado aqui nesse artigo.
index.html
Você vai achar esse texto Loading… na página index.html,que está dentro da pasta wwwroot do seu projeto Blazor.
Veja na Figura 2 que o texto é colocado dentro da tag <app></app>, que está dentro do body do HTML.
Essa tag app é exatamente onde a aplicação Blazor será renderizada, ocupando todo o body do index. Qualquer coisa que passarmos no conteúdo dessa tag irá aparecer durante o processo de download e inicialização da sua aplicação.
loading.gif
Vamos trocar o texto Loading… por um gif animado qualquer. Nesse exemplo, nosso gif se chama loading.gif, e foi colocado na pasta wwwroot/images/.
Para centralizar o gif na página, vamos adicionar a classe .loading no arquivo site.css, que fica na pasta wwwroot/css/. Veja essa classe css na Figura 3.
Voltando ao index.html, substitua o texto Loading… pelo gif animado, como mostra a Figura 4.
E pra fechar, vamos executar a aplicação para ver o resultado, como mostra a Figura 5.
Essa é uma atividade extremamente simples, e você pode elaborar o loading da sua aplicação como desejar.
Grande Abraço e até o próximo!
Blaze of Code 