Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Exibir componente de carregamento enquanto dados estão sendo processados

Prezados,

após aprender a colocar a responsabilidade de fazer a busca de dados em um resolver, gostaria de conseguir adicionar em minha aplicação angular o comportamento de exibir um componente de loading enquanto os dados não chegam.

Como posso fazer tal procedimento?

Eu cheguei a ver a questão "Em caso de demora no Resolver, como adicionar loading?" publicada aqui no fórum, mas não consegui fazer funcionar da forma ali explicada...

Eu fiz um teste colocando um delay de 10s em cada requisição na implementação do backend e percebi que com a solução do resolver, o front-end fica aguardando os 10s sem nada na página, somente esperando o dado chegar.

Há alguma forma simples de renderizar algum componente enquanto o resolver não se resolve?

3 respostas

Fala aí Jefferson, tudo bem? Você pode criar um novo componente com um novo serviço para isso.

Dai você importa ele no root da aplicação, assim que uma request for realizada, você muda o status dele para loading = true e quando a mesma terminar, volta para false.

Isso pode ser feito dentro dos outros serviços ou você pode criar um interceptor.

Se quiser, dá uma olhada no meu componente, já fiz algo parecido:

https://github.com/mahenrique94/mymusic-frontend/tree/master/src/app/components/progress-bar

Espero ter ajudado.

Olá Matheus, segui o exemplo do seu projeto (bem interessante por sinal), mas ainda não consegui fazer funcionar...

No meu resolver eu tenho o seguinte:

@Injectable({ providedIn: 'root' })
export class PhotoListResolver implements Resolve<Observable<IPhoto[]>> {
  constructor(private photoService: PhotoService) {}

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    const userName = route.params.userName;
    return this.photoService.listForUserPaginated(userName, 1);
  }
}

Esse método resolve retorna um Observable...

Criei um componente loader (com um service), bem similar ao que você criou:

@Injectable({ providedIn: 'root' })
export class LoaderService {
  private subject = new Subject<any>();

  public fetching(isFetching: boolean) {
    this.subject.next({ isFetching: isFetching });
  }

  public isFetching(): Observable<any> {
    return this.subject.pipe(switchMap(({ isFetching }) => of({ isFetching })));
  }
}

Mas ainda não consegui juntar as duas coisas... não consegui colocar para ele ser true antes do resolver processar e false após o processamento...

Não sei se consegui ser claro, mas subi o projeto no github também, em uma branch separada com a parte do loader (https://github.com/studiojms/angular-pics/tree/loader)

O código específico da parte do loader ficou isolado neste commit: https://github.com/studiojms/angular-pics/commit/6f670f2301cbf0b297681560da49a0e3fb910be3

Agradeço antecipadamente pela ajuda

solução!

Fala aí Jefferson, desculpa a demora, está bem corrido por aqui.

Então, a ideia vai ser você não ter um resolver e sim utilizar esse componente de progress.

Se você usar o resolver, realmente não vai funcionar, pois a tela só ira carregar após resolver o resolver e quando o mesmo for resolvido não tem mais o progress.

Espero ter ajudado.