From 8a74f096a182f0ee612084fac7570f0088b96465 Mon Sep 17 00:00:00 2001
From: Brendan Kenny <bckenny@gmail.com>
Date: Fri, 13 Jan 2023 10:53:13 -0600
Subject: [PATCH] async page inert when nav drawer is opened

---
 src/lib/actions.js | 37 +++++++++++++++++++++----------------
 1 file changed, 21 insertions(+), 16 deletions(-)

diff --git a/src/lib/actions.js b/src/lib/actions.js
index 7d5b775c9e9..a2e19fe7618 100644
--- a/src/lib/actions.js
+++ b/src/lib/actions.js
@@ -114,28 +114,33 @@ export const requestFetchReports = store.action((_, url, startDate) => {
  * This is used when we open the navigation drawer or show a modal dialog.
  */
 const disablePage = () => {
-  /** @type {HTMLElement|object} */
-  const main = document.querySelector('main') || {};
-  /** @type {HTMLElement|object} */
-  const footer = document.querySelector('.w-footer') || {};
-
-  document.body.classList.add('overflow-hidden');
-  main.inert = true;
-  footer.inert = true;
+  // Setting the majority of the page as inert can have a significant perf hit when
+  // trying to animate e.g. the navigation drawer, so do it in the frame after this.
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      const main = document.querySelector('main');
+      const footer = document.querySelector('footer');
+
+      if (main) main.inert = true;
+      if (footer) footer.inert = true;
+    });
+  });
 };
 
 /**
  * Uninert the page so scrolling and pointer events work again.
  */
 const enablePage = () => {
-  /** @type {HTMLElement|object} */
-  const main = document.querySelector('main') || {};
-  /** @type {HTMLElement|object} */
-  const footer = document.querySelector('.w-footer') || {};
-
-  document.body.classList.remove('overflow-hidden');
-  main.inert = false;
-  footer.inert = false;
+  // Similar to disablePage(), go inert in the next frame to avoid the perf hit.
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      const main = document.querySelector('main');
+      const footer = document.querySelector('footer');
+
+      if (main) main.inert = false;
+      if (footer) footer.inert = false;
+    });
+  });
 };
 
 export const openNavigationDrawer = store.action(() => {