Question

I have a simple web application with a number of tabs. The tab content’s gets loaded using AJAX when the user clicks on the tab. However, it takes < 1s to load some of the tabs so from the user’s point of view, there is no content at first (just empty inputs that will be populated via AJAX)

$('#my-tab').on('click', function() {
   // load content
});

$('#another-tab').on('click', function() {
   // load some different content
});

To solve the problem I can:

1) Use some AJAX spinner to inform the user that there is content but it’s about to be loaded

2) Use HTML forms instead so content is loaded without AJAX

What is the correct/best/common solution? Many thanks.

Answer 1

This is a good article that summaries what you ask for.

There are 3 main time limits (which are determined by human perceptual
abilities) to keep in mind when optimizing web and application
performance.

Based on an approximate time it takes to load the content for your average user, you can apply this practice :

0.1 second is about the limit for having the user feel that the system is reacting instantaneously, meaning that no special feedback is
necessary except to display the result.

1.0 second is about the limit for the user’s flow of thought to stay uninterrupted, even though the user will notice the delay. Normally,
no special feedback is necessary during delays of more than 0.1 but
less than 1.0 second, but the user does lose the feeling of operating
directly on the data.

10 seconds is about the limit for keeping the
user’s attention focused on the dialogue. For longer delays, users
will want to perform other tasks while waiting for the computer to
finish, so they should be given feedback indicating when the computer
expects to be done. Feedback during the delay is especially important
if the response time is likely to be highly variable, since users will
then not know what to expect.