0

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!

redshift
  • 4,815
  • 13
  • 75
  • 138
  • You store actions should be async too and you may have to wait until the processing is over. `this.overlayShow = false` should not be called until every calls are done (thanks to `await`). Alternative solution is to always get the callback from the APIs, check if it's status is set to `completed` or alike (ala processing is done) and **then**, update `overlayShow`. – kissu Feb 02 '21 at 16:50
  • Yea, I dont' know if there's a callback for the image API (imagekit.io), I'll check! Btw, My store action is async. – redshift Feb 02 '21 at 19:17

0 Answers0