Trouble while loading images from api

Hello i have trouble while loading images…

This is how i do it

  imagesRect: Image[] = [
    new Image(
      0,
      {
        img: '',
      },
      {
        img: '',
      }
    ),
  ];

    this.apiService.findProduct().subscribe(
      res => {
        const images: Image[] = [];
        for(let i=0;i<res?.productImages.length;i++){
          images.push(
            new Image(
              i,
              {
                img: 'http://localhost:8080/product/image/'+res.product.title+'/'+res.productImages[i].image,
              },
              {
                img: 'http://localhost:8080/product/image/'+res.product.title+'/'+res.productImages[i].image,
              }
            ),
          )
        }
        this.imagesRect=images;
      }

so when images are not loaded and i click on arrow images got loaded. also when i click on empty image like on screenshot bellow, images are present in modal gallery But loading on main page is way too slow…

video : https://www.youtube.com/watch?v=Bb7tUbGpfeU

[Ks89]

@hvsharma63

I suggest to hide the carousel when the array is empty with an *ngIf=“show” or *ngIf=“arrayofImages.length === 0”. When the rest api returns data, in the subscribe(…) you can init the show variable or add the elements into arrayofImages. In this way, the carousel will be visible with your images. You could also display a custom spinner when show = false or arrayofImages.length === 0 to improve UX.

[Ks89]

No no wait I can’t understand your problem in this way 😃.

Your original problem was about how to update the array. The first answer should fix it.

However, your next comment is about an error when you start the carousel without images in the array. Is it right? You can’t show a carousel without images. I suggest to hide the carousel when the array is empty with an *ngIf=“show”. show starts as false and it becomes true inside the subscribe of findProduct(). In this way, it should work. You could also display a spinner when show = false to improve UX.