feat: prevent the back button during transitions

Previously pressing the back button during transitions could cause the page to look glitchy or elements to dissapear. This prevents that.

src/components/TransitionHandler.js

@@ -50,6 +50,7 @@ export default class TransitionHandler extends Component {
                         }}
                         onEnter={node =>
                           !!node &&
+                          !window.__tl_back_button_pressed &&
                           onEnter({
                             node,
                             action,
@@ -64,6 +65,7 @@ export default class TransitionHandler extends Component {
                         }
                         onExit={node =>
                           !!node &&
+                          !window.__tl_back_button_pressed &&
                           onExit({
                             node,
                             inTransition,

src/gatsby-browser.js

@@ -1,3 +1,16 @@
+const { navigate } = require("gatsby");
+
 exports.wrapPageElement = require(`./wrap-page`);
 
 exports.shouldUpdateScroll = () => false;
+
+exports.onPreRouteUpdate = ({ location }) => {
+  // prevent the back button during transitions as it breaks pages
+  if (
+    window.__tl_inTransition &&
+    location.pathname !== window.__tl_desiredPathname
+  ) {
+    window.__tl_back_button_pressed = true;
+    navigate(window.__tl_desiredPathname);
+  }
+};

src/utils/triggerTransition.js

@@ -17,6 +17,10 @@ const triggerTransition = ({
 
   if (inTransition) return false;
 
+  // these globals prevent the back button from being pressed during a transition as that can have unexpected results
+  window.__tl_inTransition = true;
+  window.__tl_desiredPathname = to;
+
   updateContext({
     inTransition: true,
     exitDelay: 0,
@@ -80,16 +84,19 @@ const triggerTransition = ({
 
   // reset exit animation times so they dont apply when using browser back/forward.
   //  this will be replaced with a better solution in the future
-  setTimeout(
-    () =>
-      updateContext({
-        exitDelay: 0,
-        exitLength: 0,
-        // Once all animation is finished, it's safe to start a new animation since we're no longer inTransition.
-        inTransition: false
-      }),
-    getMs(finalResetSeconds) + 1
-  );
+  setTimeout(() => {
+    // these globals prevent the back button from being pressed during a transition as that can have unexpected results
+    window.__tl_inTransition = false;
+    window.__tl_desiredPathname = false;
+    window.__tl_back_button_pressed = false;
+
+    updateContext({
+      exitDelay: 0,
+      exitLength: 0,
+      // Once all animation is finished, it's safe to start a new animation since we're no longer inTransition.
+      inTransition: false
+    });
+  }, getMs(finalResetSeconds) + 1);
 };
 
 export { triggerTransition };