[QImg] support for triggering loading state manually

[fjwong]

Is your feature request related to a problem? Please describe. I have an application that fetches data from an API. The API response contains, among other things, the URL of an image associated with the requested object, and we use QImg to display it in our UI.

The problem is that, I'd like to show QImg's loading spinner while waiting for the API request to finish, but there's no straightforward way to activate/deactivate it manually.

Describe the solution you'd like It'd be great if QImg supported a loading prop similar to QBtn, and show the spinner when loading is true or while the image is loading as it is now.

Alternatively, allowing QImg's src prop to also support promises that resolve to strings would serve to this purpose, but thought that setting the loading state manually would perhaps be easier to implement and serve for a variety of cases.

Describe alternatives you've considered At the moment I can more or less achieve what I need by doing the following:

<template>
  <q-img ref="image" :src="imageUrl" />
</template>

...

data() {
  return {
    imageUrl: null,
  };
},
async mounted() {
  const { image } = this.$refs;
  try {
    image.isLoading = true;
    const response = await apiRequest();
    this.imageUrl = response.imageUrl;
  } finally {
    image.isLoading = false;
  }
}

...

but I'd rather not do it this way, since it's tied to how QImg works internally.

Please let me know if there's perhaps a better way to do this with current functionality.

[rstoenescu]

Hi,

Rather than hooking this into QImg, why not use other (and better) strategies, like:

1. v-if/v-else with a QSpinner
2. v-if/v-else with a QSkeleton

[fjwong]

@rstoenescu Thank you for the response.

Apologies for not mentioning this before. I thought of doing it that way first, but the problem I had with this is that the UI would end up showing two spinners, one during the API request, and the one shown by QImg when actually loading the image, making the animation seem to flicker during the process.

I have prepared a Codepen that better shows the issue: https://codepen.io/fjwong/pen/XWpOPOw

Some points to consider:

• The effect can look better or worse depending on the choice of spinner.
• I can deactivate QImg's loading animation by setting no-default-spinner, but then I get a blank image after the first animation until the image finishes loading.

By setting QImg's isLoading data property via refs as I mentioned before, I can get a single animation sequence: https://codepen.io/fjwong/pen/WNRPadm