Чтобы показывать спиннер только если нет ответа от сервера более 3-х секунд, вы можете использовать функциональность Observable в Angular.
Первым шагом, вам понадобится импортировать необходимые классы из RxJS. Выполните следующую команду в вашем терминале:
npm install rxjs --save
После этого, импортируйте необходимые классы в вашем компоненте:
import { Observable, timer } from 'rxjs'; import { takeUntil, map, catchError, timeout } from 'rxjs/operators';
Затем, создайте метод в вашем компоненте, который будет делать запрос к серверу и показывать спиннер только в случае, если ответ не будет получен в течение указанного времени:
makeServerRequest(): void { // Показать спиннер this.showSpinner = true; // Создать Observable, который выполнит запрос к серверу const serverData$: Observable<any> = this.http.get('YOUR_SERVER_URL'); // Создать Observable, который будет эмитировать событие через 3 секунды const timer$: Observable<number> = timer(3000); // Соединить оба Observable и выполнить необходимые действия timer$.pipe( takeUntil(serverData$), // Завершить Observable timer$, если будет получен ответ от сервера timeout(3000), // Завершить Observable timer$, если истекло указанное время map(() => { // Скрыть спиннер this.showSpinner = false; // Обработать случай, когда ответ не был получен в течение 3 секунд // Например, вы можете выполнить дополнительные действия, показать сообщение об ошибке и т.д. }), catchError(() => { // Обработать случай, когда произошла ошибка при запросе к серверу // Например, вы можете выполнить дополнительные действия, показать сообщение об ошибке и т.д. return EMPTY; }) ).subscribe(); }
Не забудьте добавить в ваш компонент необходимые импорты:
import { HttpClient } from '@angular/common/http'; import { EMPTY } from 'rxjs';
Теперь вы можете вызвать метод makeServerRequest()
в нужном месте вашего компонента, чтобы выполнить запрос к серверу и показать спиннер только при отсутствии ответа от сервера в течение 3 секунд.
Обратите внимание, что в приведенном выше коде значение this.showSpinner
предполагается использовать для отображения/скрытия спиннера в вашем шаблоне.