, I am facing a dilemma with displaying houses in a cart. Each house has an image, but since they load asynchronously, I need to show empty cards until the data is fetched. Initially, I added empty objects to the array representing the houses, which worked well until I introduced typing through Typescript.
Removing typing would be a quick fix, but not ideal. Making all properties optional is also not recommended. So my question is, should I create mock objects with the necessary properties (which seems like a lot of work), or is there a better way to handle this situation?
Here is a snippet of the code showcasing how I preload the empty cards and then populate them with actual data once it's retrieved:
houses: House[] = [{}, {}, {}, {}, {}];
ngOnInit(): void {
this.housesService.getGreatHouses().subscribe(houses => {
if (houses && houses.length > 0) {
this.houses = houses;
}
});
}