What to do with loading animation for very short load times?

Question

Within our iOS mobile app, we have a list of templates the user can choose from:

Each template has (initially) remote assets that need to be downloaded and cached before the user can go into edit-mode. If the user tapped on a template, two things could happen:

1. If all the template assets are already cached - just go straight to the edit-mode screen.
2. If one or more assets aren't cached - we present a modal that showing the "fetch progress". Once it's done download & cache - we go into the edit-mode screen.

The issue is that sometimes fetching the asset of the template could take 0.1/0.2 seconds. Which is far shorter than the modal presentation animation (takes around 0,5).

Here's the UI we designed for the modal:

My questions here:

• Is it appropriate to dismiss the modal without animation when the fetch completed?
• Is there a best practice for this kind of scenario, where the modal could be dismissed while it's presenting itself (during the presenting animation)?
• Will using a modal other than a full-screen one is more appropriate?

UPDATE:

Here is the outcome of your answers. What do you think? (This showcasing a device with a fast internet connection)

Answer 1

There are a couple of ways of dealing with this issue.

1. Use placeholders

Personally, I find this to be the best solution. On click of the user, move to the next screen with placeholders and lazy loading implemented. As soon as an asset gets downloaded, it would replace the placeholder. That eliminates the problem of loading animation altogether. User testing has also shown that people feel like the load times are lesser when they see such placeholders instead of loading animations

2. The placebo loading animation

Through multiple user testings and reviews, it has been found that users tend to expect some sort of a delay/loading time when there is a major transition or if data on the page is getting updated. You might have heard of the "pull to refresh" action that many apps have nowadays. Most of them actually do nothing. The page has a refresh timer but the "pull to refresh" is present to give user a feeling of control and satisfaction. (Yes, it is actually there to trigger a request of data from the server in case of loss of connection or a timeout, but in many cases it is used as a placebo)

So, if your loading animation is 0.5 secs long, let it complete the animation even if there's no loading time or if the loading time is shorter.

3. Indicate which items are "ready"

It might add the burden of coding in that logic but if a certain template was opened and its assets were cached, add a border or corner notch to indicate that the template is ready to be opened.

That way, you can simply remove the loading animation for those items. And in case the cache gets cleared and the assets need to be downloaded, let the request trigger the animation.

4. Put the loading animation on the next screen

It does two things. First, it gives the user an immediate feedback for the action they performed. Second, it gives you the "page transition time buffer". Ideally, a page transition would be under half-a-second long. If the data gets downloaded in that time, no need to trigger the loading animation. And the default state of the next screen would be to carry the loader so that if the loading time is longer than the transition, the user would see the loading animation

Answer 2

I agree with Shreyas Tripathy's answer. I would personally pick #4 for your case and then use one of other activity indication on the next screen if needed. If your usual screen transition time is less than loading time of the image the delay won't be perceivable in most cases.

Just want to add that using a modal sheet is not an appropriate mechanism here for two main reasons.

1. The in and out transitions add to the waiting time, ultimately making it even slower.
2. Modal presentation by its nature and purpose catches attention. In your case it adds a lot of friction to the interface where friction is not needed, and focuses user attention of the fact of loading. Besides, your particular implementation has a close button, which is confusing. Can you close it? What would it mean?