title: How to do some action and delay browser back (mobile back button)?
body: <p>I have this use case:
  One page with two subpages under a hashrouter</p>
  <p>for example</p>
  <pre><code>domain.com/post/1
  domain.com/post/1#details
  </code></pre>
  <p>in the #details hash route I want to listen to &quot;back button clicks&quot; and do one api call to update the post before page closes.</p>
  <p>During this time want to show a spinner, then after api call is done let browser finish the window.history.back (back button logic)</p>
  <p>Is that possible, and how ?</p>
  <p>I am trying this now with partial success.
  I am using <code>React</code> framework with NextJS and have following code inside one component</p>
  <pre><code>    useEffect(() =&gt; {
          async function onPopState(e: PopStateEvent): Promise&lt;void&gt; {
              return new Promise((resolve) =&gt; handleWantToClose(resolve));
          }
  
          window.addEventListener('popstate', onPopState);
          return () =&gt; {
              window.removeEventListener('popstate', onPopState);
          };
      });
  </code></pre>
  <p>In the above snippet <code>handleWantToClose</code> is called fine when clicking back navigate browser button (or mobile back button ios/android)</p>
  <p>Thing is that I cannot delay the pop state. It does not wait for the promise to finish resolve.</p>
  <p><code>handleWantToClose</code> funcion is just doing one api call, then calling the resolve function.</p>
  <p>Any idea ? This would be extremely useful to provide great user interface for the website to the mobile users especially that use <code>back button</code> a lot to navigate websites.</p>
  <p><strong>Other things I tried</strong></p>
  <pre><code>  e.preventDefault();
    e.stopPropagation();
    e.stopImmediatePropagation();
  </code></pre>
  <p>on my popstatelistener, then after api call was done, triggered window.history.back() manually but did not work.</p>
  <p>The popstate event is not cancellable.</p>