Forum Academy Marketplace Showcase Pricing Features

Visual feedback when loading images

Dear community,

I’m working on a simple page that displays a main image. Underneath that image there is a repeating group with related image thumbnails. Once a user clicks on one of the thumbnails the main image updates to show that photo accordingly - please see the screenshot below.

How this works:

  • The page has a state that holds the data type ‘pole’.
  • The main image dynamically loads the image that is one of the data fields of ‘pole’.
  • When a user clicks on the thumbnail the page state is updated and so the main image also changes

My problem:
As this is a single page application navigating pages in general is blazing fast if not instant. It can feel so fast that updating the main image after clicking one of the thumbnails now actually feels slow (can take 1-2 seconds).

My desired solution:
I would like to show a loader or grey out the image to indicate to users that the images are being updated.

I tried:
To set a loading state to yes when the thumbnail is first clicked, then I would set it to no after the core workflow steps. This seems to be too fast, as the workflow finishes update the ‘pole’ state on the page before the image is loaded.

Can someone help or guide me in giving the users some more feedback whilst images are updated?

Thanks in advance and cheers,
Lip

It looks like a simple issue. Can you record a Loom or a gif to show the issue because from the description it is not completely clear?

Hey, @lipshow,

In the workflow for changing the image, you can show an alert with Loading that has the size of the main image :grinning: :computer:

Maybe have a separate group that you define as “loading” with text that says “Loading”.

When user selects image to display.

  1. Hide “main” image display
  2. Show Loading display
  3. Display data in popup/group “main”
  4. Hide loading display
  5. Show main