I'm showing a loading screen (state) before redirecting to an external url (payment provider), since they tend to load for a while.

If the user chooses not to plete the payment and goes history.back() (Gesture, back button, ...) the browser pulls the page before from the BFCache, including the loading state, and the user will be "stuck" loading forever.

How would you suggest handling that? Persisted loads can be detected using the pageshow event, but I'm not sure if that is the react way to handle the case.

I'm showing a loading screen (state) before redirecting to an external url (payment provider), since they tend to load for a while.

If the user chooses not to plete the payment and goes history.back() (Gesture, back button, ...) the browser pulls the page before from the BFCache, including the loading state, and the user will be "stuck" loading forever.

How would you suggest handling that? Persisted loads can be detected using the pageshow event, but I'm not sure if that is the react way to handle the case.

• javascript
• reactjs
• browser
• next.js
• bfcache

2 Answers 2

Persisted loads should be handled manually. In your case you should handle the
loader state based on the event property persisted from pageshow event handler.

I had the same issue, I ended up using pageshow event

const [isLoading, setIsLoading] = useState<boolean>(false);
useEffect(() => {
    window.onpageshow = function(event) {
      if (event.persisted) {
        setIsLoading(false);
      }
    };
  }, []);