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
