How to hide a bootstrap modal on the previous page if user comes in clicking BACK?

Question

I have a website that queries a large database. It takes a while (3-10 sec) to generate a page. This is no problem for users, but I want to show a friendly message instead of the user just sitting in front of a page that is not changing. So what I did is I show a bootstrap modal saying "Please wait, we're loading your page" when a user clicks any particular link. That works well. The modal is shown on the page, and when the server has generated the new page, it will open and the modal clearly disappears.

The problem is when the user navigates to another link (again seeing the modal on the page), and then moves back. The previous modal is now shown. See overview below:

• Page A: loads instantly
• Clicks on link to page B. Modal shown: "Please wait for B".
• Page B shown.
• Clicks on link to page C. Modal shown: "Please wait for C".
• Page C shown.
• User clicks BACK button to page B. The last 'mode' of Page B shows the "Please wait for C" message in a modal, because that is where it ended. The content has clearly already loaded (from browser cache).

How to fix this?

Answer 1

Set this header

header("Cache-Control: private, must-revalidate,
    max-age=0, no-store, no-cache, must-revalidate, post-check=0, pre-check=0"
);

Also see: How to Defeat the Browser Back Button Cache