Is there a better way to display a loader while fetching data from an API? Currently, I am showing the loader if the product list length is 0, but I feel this approach is not optimal. Any suggestions on how I can improve this?
HTML:
<div *ngIf="!CoffeeItemList?.length" class="mt-5 text-center">
<img src="https://chickenrecipeseasy.top/images/loader.gif"/>
</div>
TS:
constructor(private getDataListingService: DataListingService) {}
ngOnInit(): void {
this.getGlobalSearchList('');
this.getAllData();
}
getAllData() {
this.getDataListingService.getAllDataLists().subscribe(value => {
this.CoffeeItemList = value.data;
});
}
getGlobalSearchList(type) {
this.CoffeeItemList = [];
this.getDataListingService.getAllDataLists().subscribe(value => {
let data = [];
data = value.data;
console.log(data);
}
});
}
getSmartSearchValues(search) {
if (search === '' ) {
this.getAllData();
return false;
} else {
this.getGlobalSearchList(this.type);
this.searchText = this.type;
}
this.getDataListingService.searchList(search).subscribe(value => {
this.CoffeeItemList = value.data;
});
}
}