CODEWITHSUNDEEP
vuejs2nuxt.jscloudinaryimagekit
redshift
redshift

Reputation: 5227

VueJS and Image CDNs: How to check when image is done being optimized through the Image CDN?

I might be over thinking this, but I got a an avatarprofile component that lets a user update their avatar image. I am using Google Cloud storage as the image hosting and then I am using an image CDN (imagekit) to handle the image optimization/caching. All works good...however, I do have a minor annoyance that I was wondering if someone could help me with:

First, here's my code (will help explain what I am having issue with):

    async avatarChangeHandler(e) {
      this.overlayShow = true //<-- show a loading indicator
      try {
        if (e.target.files.length) {
          this.image = await new Promise((resolve) => {
            const reader = new FileReader()
            reader.onload = (e) => {
              resolve(e.target.result)
            }
            reader.readAsDataURL(e.target.files[0])
          })
          await this.photoUpload() //<-- upload image to Google storage and return new image URL
          await this.updateAvatar() //<-- update user's profile in the database with new URL
          await this.$store.dispatch('getUserProfile', this.currentUser) //<-- grab updated profile
          console.log('updating...done')
          this.overlayShow = false //<-- terminate the loading indicator

The problem is that the user profile is updated with the new image URL and fetched faster than the image CDN...and so that means the overlayShow is already set to false and still shows the old image for a second or so (depending on level of optimization needed).

What can I do to make sure the overlayShow is not set to false until the image CDN is done with the new image? Thanks and I realize this may not be feasible, but looking for advice or suggestions on approach. Thanks!

Upvotes: 0

Views: 218

Answers (0)

Related Questions