Bom dia pessoal, alguém teria uma sugestão ou dica de como carregar cada Card de forma individual na tela, ou seja, tenho 10 cards, porém cada um faz uma requisição a uma entidade diferente e, alguns carregam mais rápido que outros, queria colocar tipo um ProgressSpinner, para indicar que o card está carregando e quando terminar o Card é liberado e os que estão carregando ficam cada um com seu Spinner.
hoje, com a Alura e o Google Gemini
Oi, Sergio, tudo bem?
Para carregar cada card de forma assíncrona e mostrar o progresso de cada um utilizando Angular e RxJS, você pode seguir uma abordagem em que cada card é tratado como um componente individual que gerencia seu próprio estado de carregamento. Aqui está uma sugestão de como você pode implementar isso:
@Input()) que recebe os dados necessários para fazer a requisição específica daquele card.isLoading. Você pode usar o Angular Material para um spinner elegante e fácil de integrar.isLoading como true, e quando a resposta é recebida, defina como false. Isso pode ser feito usando o operador finalize do RxJS para garantir que isLoading seja atualizado independentemente do resultado da requisição (sucesso ou erro).Espero ter ajudado. Caso tenha dúvidas, conte com o fórum. Abraços!