My app has a lot of repeating groups that include an image and text. In this particular case, the image is the icon for a company/software and the text is the company name.
The problem is that when the data shown in an element changes, the old image is sometimes shown even as the new text is displayed. This can result in the company name and logo being mismatched for up to a few seconds. My users (people who work at these companies) don’t like seeing their company name with the wrong logo, even for a couple of seconds. This video shows the effect, although today seems like a “good” day where the effect isn’t as pronounced:
It also occurs in regular (non-repeating) groups, but for those groups I’ve been able to work around the problem more successfully.
What I want to do is to “clear” out the old image somehow without creating too much of a delay for the user, so that there’s no image showing while we’re waiting for the new image to be shown. I also don’t want the any of the elements to flicker or otherwise look bad during the loading. This has been surprisingly difficult to do, and I feel like I’ve tried everything - adding timeouts, changing the image src, using all kinds of conditionals, “resetting” the repeating group when elements are opened/closed, hiding the image while the RG is loading, using custom JS and CSS, just a million attempts to fix this without luck. The hook for “this RG is loading” has not worked well for this. The images are still not fully displayed even after the RG thinks it has finished loading. And hiding the images using timeouts isn’t a good solution, since the delay can be up to several seconds for some images, while others are available immediately.
Has anyone had a similar problem and fixed it? @Bubble Do you have any ideas for me?