Question

I have a php site where a user has the ability to login. Once they submit the POST data with their credentials they are taken to a page that initiates a session and checks the database. This process takes a long time before the user is ultimately redirected to the backend of the site. Durring this time the user stairs at a blank white page. I would like to show some kind of loading page, but when anything printable is on the page I get a header error due to the redirect.

How can I create a loading page? I understand that ajax is an option but is it my only option?

Update:
The PHP application is mainly taking a long time because each login is dependent on a foreign API that needs to be authorized as well as charging data that needs to be queried. I am not trying to mask something I can easily fix, I am trying to create a better user interface.

The login process takes ~10 seconds.

Answer 1

Well, the easy way to handle this is as follows:

Once a user pressed loging, using javascript, hide the login button, inject some ajaxloader gif, than send an AJAX request with the login credentials, salt it properly, log the user in, post the response as JSON, and intercept that response, and in case of success – do redirect, incase of failure – print appropriate message.

some code:

login-handler.php

$user = new user();
if ($user -> login($_POST['uid'], $_POST['password'], $_POST['whatever']){
  $response['type'] = 'success';
}
else{
  $response['type'] = 'failure';
} 
echo json_encode($response);

js-login.js

$("#login").click(function(){
  // verify that user put user name, password and whatever, hide button and show ajax loader

  $.get("login-handler.php", {user: user, password: password}, function(data){
    if (data.type == "success"){
      window.location = "http://example.com/new/location/whatever";
    }
    else{
      //print message
    }
  }, "JSON"); 
});

EDIT: but I’d like to join the other folks and consider using a faster/different API, as 10 secs loading time is utterly ridiculous, unless it is for yourself, in which case – knock yourself out.