Prezados,
há alguns dias criei a dúvida Exibir componente de carregamento enquanto dados estão sendo processados, porém um moderador respondeu a pergunta mas não chegou a ver a replica que mandei... e ninguém mais respondeu, então estou abrindo uma nova questão, mais direta ao assunto do problema encontrado:
Conforme mostrado na aula, foi criado um resolver para trazer os dados das fotos. Porém, no caso de a requisição demorar para trazer os dados, eu gostaria de ter um componente que exiba um loader ou uma barra de progresso para que o usuário perceba que o processamento está sendo realizado. Procurei alguma forma de solucionar o problema, porém não consegui. Alguém pode me ajudar?
Segue um exemplo de código e o que fiz até o momento.
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):
@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 fazer isFetching 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
Alguém já fez algo parecido? Alguém pode me ajudar?
